Qu'est-ce que Angular? (Partie 1) | Configuration de l'environnement de développement | Créez un nouveau projet angulaire.

Commençons par What Angular is?

Angular est un framework pour créer des applications clientes en HTML, CSS et Javascript / Typescript.

Typescript : est un langage qui compile en Javascript. Typescript est très courant lors de l'utilisation d'Angular - car même Angular est écrit en Typescript.

Pourquoi avons-nous besoin d'Angular?

Les applications complexes sont difficiles à maintenir en Javascript et Jquery. Nous avons besoin d'un moyen de structurer notre application. C'est pourquoi ces frameworks (Angular, React etc.) sont utilisés.

Avantages de l'utilisation d'Angular?

• Donne à notre application une structure propre: facile à comprendre et facile à entretenir
• Comprend beaucoup de code réutilisable
• Rend notre application plus testable

Front-end (client) 👇 ← → Back-end (serveur web) 👇

Interface utilisateur (UI) 👇 ← → Données + API et traitement (logique métier) 👇

(HTML, CSS, Typescript, JS, Angular) 👇 ← → (Java, Python, Node.js etc.) 👇

Front-end (client) envoie / reçoit des données vers / depuis le serveur à l'aide de l'API

A pplication P ROGRAMMATION I nterface (API) / HTTP services

Dans les API, les endpoints sont accessibles via le protocole HTTP (méthodes GET & POST)

Les points de terminaison sont des URL pour accéder aux API et les requêtes HTTP obtiennent / envoient des données depuis / vers le serveur.

Et le rôle d'Angular est au front-end qui est du côté client - Interface utilisateur.

Première application angulaire

Configurer l'environnement de développement

1. Installez la version stable de Node .

N ode : Il s'agit essentiellement d'un environnement d'exécution pour exécuter du code Javascript en dehors du navigateur. Dans ce projet, nous n'utilisons pas fondamentalement Node, mais Node fournit certains outils dont nous avons besoin pour créer un projet angulaire.

Visite: https://nodejs.org/ pour télécharger et installer la version stable recommandée de Node.

Une fois l'installation terminée, assurez-vous que l'installation a réussi -> Ouvrez l'invite de commande et tapez: node - version pour vous assurer que Node a été installé avec succès. (La version minimale de Node requise pour créer une application angulaire est la version 6.9)

node --version

2. Installez une CLI régulière .

* Une fois que nous avons installé nœud , nous pouvons utiliser N ode Package M GESTIONNAIRE ou NPM installer des bibliothèques tierces. *

Une des bibliothèques que nous allons installer pour ce projet est A ngular CLI ou A ngular C ommand- L ine I nterface . C'est un outil de ligne de commande que nous utilisons pour créer un nouveau projet Angular ou générer du code standard pour démarrer un nouveau projet.

A ngular CLI : Installation de Angular CLI… | Ouvrez C ommand P rompt ou T erminal et entrez la commande suivante:

sudo npm install -g @angular/cli

• Si nous ne mettons pas -gle cli angulaire ne sera installé que dans le dossier actuel et il ne sera accessible nulle part ailleurs.
• Mettre sudoou ouvrir 'Invite de commandes' en tant qu'administrateur nous demandera d'entrer le mot de passe du système.

ng --version

* Nous avons installé Node, NPM et Angular CLI. Maintenant, nous pouvons créer un nouveau projet angulaire *

Si vous ne parvenez pas à faire fonctionner votre environnement, utilisez la zone de commentaire ci-dessous et postez vos questions / erreurs.

Créer un nouveau projet angulaire

1. Ouvrez la ligne de commande et tapez:

sudo ng new hello-world

• Cette commande générera un tas de fichiers et de dossiers (regardez en haut de l'image jointe 👇 ) puis utilisera NPM pour télécharger des bibliothèques tierces (regardez en bas de l'image jointe 👇 ).

Pour vous débarrasser de l' 'git'erreur, vous devez installer git sur votre système - utilisez ce lien👇 pour télécharger et installer git sur votre système,click here for git → https://git-scm.com/downloads

• Notre projet est créé avec succès.
• Maintenant, pour commencer à coder, nous avons besoin d'un éditeur de code. L'éditeur que nous allons utiliser est V isual S tudio C ode ou VS C ode

( VS C ode est un bel éditeur léger multi-plateforme ou n'hésitez pas à utiliser sublime, atom ou tout autre éditeur )

• Le projet est magnifique dans VS C ode . 👇👇

Si cela ne vous dérange pas de lui donner quelques applaudissements 👏 👏 car cela a aidé, je l'apprécierais beaucoup :) Aidez les autres à trouver l'article, afin qu'il puisse les aider!

Applaudissez toujours…