Angular 9 pour les débutants - Comment installer votre première application avec Angular CLI

Angular est l'un des frameworks JavaScript les plus populaires créés et développés par Google. Au cours des deux dernières années, ReactJS a suscité beaucoup d'intérêt et est devenu la bibliothèque JS moderne la plus populaire de l'industrie. Mais cela ne signifie pas que Angular n'est plus important.

Au contraire, Angular est le deuxième framework le plus populaire après React selon Google Trends (dans le monde entier):

En tant que développeur front-end, j'ai travaillé avec Angular. Je voudrais maintenant couvrir certaines fonctionnalités importantes d'Angular dans mes prochains articles:

  • Partie 1: Comment installer votre première application avec la CLI angulaire (vous êtes actuellement ici)
  • Partie 2: Composants angulaires et interpolation de chaîne
  • Partie 3 : Directives angulaires et tuyaux
  • Partie 4: Liaison de données unidirectionnelle en angulaire
  • Partie 5: Liaison de données bidirectionnelle angulaire avec ngModel

Dans la première partie de ma série Angular for Beginners, vous allez apprendre ce qu'est Angular & Angular CLI et comment installer votre première application Angular à l'aide de la CLI.

Conditions préalables

Avant de commencer à apprendre Angular, je vous recommande de vous familiariser avec les langues suivantes si vous ne l'êtes pas déjà:

  • HTML, CSS
  • JavaScript / ES6
  • Manuscrit

Si vous préférez, vous pouvez regarder la vidéo du tutoriel ci-dessous:

Qu'est-ce que Angular?

Angular est un framework JavaScript développé et maintenu par Google pour créer des applications frontales. Permettez-moi de commencer par expliquer ce qu'est un cadre…

Qu'est-ce qu'un cadre?

Un Framework est un package complet avec ses propres fonctionnalités et bibliothèques. Un Framework a ses propres règles, vous n'avez pas beaucoup de flexibilité et le projet dépend du Framework que vous utilisez. Angular est un exemple de cadre.

Angular est sorti en 2016 mais avant Angular, il y avait AngularJS. L'une des questions les plus posées sur Angular est quelle est la différence entre AngularJS et Angular?

AngularJS vs Angular

Ces 2 versions d'Angular déroutent de nombreux développeurs. AngularJS et Angular sont des frameworks complètement différents. Les versions angulaires (comme 1, 1.2, 1.5, etc.) sont appelées Angular JS et à partir de la version 2 et supérieures, elles s'appellent Angular.

  • Angular JS → versions à partir de 1.x
  • Angulaire → version 2 et supérieure

Ainsi, la version 2 d'Angular est une réécriture complète du framework AngularJS et les versions plus récentes (comme 4,5,6 et ainsi de suite) sont des changements mineurs de la version 2 d'Angular.

Dans cette série d'articles, vous allez apprendre Angular 2+.

Qu'est-ce que la CLI angulaire?

CLI signifie Interface de ligne de commande. Angular a sa propre CLI officielle qui nous aide avec beaucoup de choses pendant le processus de développement.

Angular CLI est utilisé pour automatiser les opérations dans les projets Angular plutôt que de les faire manuellement. CLI nous accompagne, développeurs, dans un projet Angular du début à la fin.

Par exemple, Angular CLI peut être utilisé pour:

  • Configurations, configuration de l'environnement
  • Composants du bâtiment, services, système de routage
  • Démarrage, test et déploiement du projet
  • Installer des bibliothèques tierces (comme Bootstrap, Sass, etc.)

et beaucoup plus. Voyons maintenant comment installer notre première application angulaire en utilisant la CLI étape par étape.

Étape 1: installer NPM (Node Package Manager)

Tout d'abord, nous allons avoir besoin de Node js. NPM (node ​​package manager, fait partie de node js) est un outil permettant d'installer des bibliothèques et des dépendances tierces dans notre projet. Si vous ne l'avez pas encore, vous pouvez le télécharger et l'installer à partir d'ici. Je l'ai également expliqué étape par étape sur la vidéo du tutoriel.

Étape 2: Installez Angular CLI

Si vous avez installé le nœud js, l'étape suivante consiste à installer la CLI angulaire elle-même sur votre ordinateur:

npm install -g @angular/cli

g signifie installation globale . Si vous utilisez -g plus tard, vous pouvez utiliser la CLI dans n'importe quel projet Angular sur votre ordinateur.

Conseil : saisissez ng vvotre interface de ligne de commande (ou votre terminal) pour vérifier votre version Angular.

Étape 3: créer un nouveau projet angulaire

Une fois l'installation terminée, vous pouvez utiliser Angular CLI pour créer un nouveau projet Angular avec la commande suivante:

ng new my-first-app

Cette commande crée un nouveau projet Angular (nommé my-first-app, vous pouvez utiliser n'importe quel nom) avec toutes les dépendances et fichiers nécessaires. Vous n'avez à vous soucier de rien car la CLI le fait automatiquement pour vous.

Étape 4: Exécutez l'application

Après avoir installé la CLI et créé une nouvelle application Angular, la dernière étape consiste à démarrer le projet. Pour ce faire, nous devons utiliser la commande suivante:

ng serve -- open

Le drapeau «ouvert» ouvre automatiquement la fenêtre de votre navigateur local.

Angular prend en charge le serveur en direct , vous pouvez donc voir les modifications dans votre local sans actualiser la page de votre navigateur. Pour plus de détails et de mises à jour, consultez également la documentation officielle.

Conclusion

Donc, dans la première partie, nous avons fait une introduction à Angular, ce qu'est la CLI et comment installer votre première application Angular. Dans le deuxième article, vous allez en apprendre davantage sur les composants angulaires et l'interpolation de chaîne. Restez à l'écoute :)

Si vous souhaitez en savoir plus sur le développement Web, n'hésitez pas à me suivre sur Youtube !

Merci pour la lecture!