Tutoriel d'installation de la CLI angulaire

Cet article présente principalement l'installation et l'utilisation d'Angular CLI pour le développement et l'apprentissage Angular. Maintenant, je le partage avec vous et le donne comme référence.

Nous avons préalablement préparé l'environnement de développement et pouvons maintenant officiellement développer. Comme mentionné précédemment, Angular fournit un outil de ligne de commande qui peut simplifier le développement de notre programme. Nous utiliserons également cet outil pour des développements futurs, nous devons donc d'abord installer cet outil de développement appelé Angular CLI.

Le processus d'installation de CLI est très simple, pas différent de l'installation d'autres outils ou même de l'installation d'un package de développement normal. Nous avons configuré le registre NPM et installé avec succès Yarn, nous pouvons donc utiliser Yarn pour installer cet outil. La commande spécifique est :

yarn global add @angular/cli

Paramètres global signifie installer globalement ; add signifie « ajouter » ; le dernier est le nom du package CLI ; si la version n'est pas spécifiée, cela entraînera. Yarn installe la dernière version de la CLI. . Cette déclaration est équivalente au précédent NPM

npm install -g @angular/cli

.

Après cela, nous exécutons

ng version

Si le numéro de version d'Angular CLI peut être affiché, l'installation est réussie. Notez que toutes les commandes Angular CLI commencent par ng.

Angular CLI est construit sur webpack et peut nous aider à générer un cadre de projet angulaire, à générer des modules, des composants, des instructions angulaires, etc. Si vous créez cet environnement de développement manuellement, vous devez comprendre divers détails du webpack, écrire divers scripts automatisés, etc., ce qui nécessite une technologie de développement front-end supérieure. Compte tenu de notre didacticiel de base, l'utilisation de la CLI pour aider au développement est tout à fait appropriée. Nous présenterons en détail l'utilisation d'Angular CLI dans les chapitres suivants. Si vous êtes intéressé par Angular CLI, vous pouvez en apprendre plus sur son site officiel.

La CLI qui vient d'être installée utilise NPM comme outil de gestion des packages par défaut. Si nous voulons utiliser du fil, exécutez simplement la commande suivante :

ng set --global packageManager=yarn

Par contre, si nous voulons revenir à NPM, utilisez simplement

ng set --global packageManager=npm

.

Après avoir installé Angular CLI, créons le premier exemple de projet pour comprendre l'utilisation de base d'Angular CLI.

Tout d'abord, créez un projet de démonstration en utilisant

ng new demo

. new consiste à créer un nouveau projet, et le demo suivant est le nom du projet. Angular CLI nous aidera à générer un cadre de projet complet - comprenant tous les fichiers, structures de fichiers et divers fichiers auxiliaires requis pour le projet. Ensuite, Angular CLI s'exécutera automatiquement yarn install pour installer diverses dépendances requises par le projet. Le processus d'installation prendra beaucoup de temps, vous devrez donc attendre patiemment un certain temps.

Lorsqu'une interface similaire à celle ci-dessus apparaît et invite « Projecy 'demo' créé avec succès », cela signifie que le projet a été créé. S'il y a des erreurs, vous devez vérifier le processus d'installation ou la connexion réseau, etc.

Une fois le projet créé, un dossier de projet sera généré dans le répertoire courant. Après cela, nous pouvons entrer dans le répertoire du projet

cd demo

et exécuter la commande

ng serve

ng serve qui compilera le projet puis lancera un petit serveur intégré, nous pouvons visualiser les résultats en cours du projet via le navigateur. Faites attention au conseil ci-dessus : NG Live Development Server écoute sur localhost:4200, ouvrez votre navigateur sur http://localhost:4200/, c'est-à-dire que l'adresse de ce serveur doit être http://localhost:4200 , il nous suffit d'utiliser Accédez simplement à cette adresse avec votre navigateur :

Vous pouvez voir les résultats d'exécution de la page du projet généré par Angular CLI par défaut.

Notez que ce serveur intégré ne convient qu'au développement et aux tests et ne peut pas être utilisé comme serveur réel. Par conséquent, si nous souhaitons déployer sur un serveur formel, nous devons compiler le projet dans une version finale. La compilation de la version finale est également très simple, utilisez simplement une commande :

ng build --prod

Une fois la compilation terminée, ouvrez le dossier du projet et vous pouvez voir un répertoire dist. Les fichiers qu'il contient sont les fichiers nécessaires pour. exécuter tout le projet. Lorsque nous déployons l'application, il nous suffit de déployer tous les fichiers de ce dossier sur le serveur.

Nous commençons par la création du projet, jusqu'au développement et aux tests du projet, et enfin au packaging et au déploiement du projet, le tout en utilisant les différentes fonctions fournies par Angular CLI. Comme vous pouvez le voir, Angular CLI fournit un modèle de développement unique. Nous pouvons utiliser Angular CLI pour développer facilement des projets Angular. Cependant, ce que nous démontrons ici n'est que l'utilisation la plus simple. En utilisation formelle, de nombreux paramètres supplémentaires peuvent être ajoutés pour générer les fichiers et les projets dont nous avons besoin. Cela nécessite de lire la documentation Angular CLI pour plus d'informations. Dans les chapitres suivants, si nous rencontrons du contenu pertinent, nous le présenterons à nouveau.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Existe-t-il une meilleure solution que l'implémentation asynchrone utilisant JavaScript ?

Utilisez Koa pour créer des projets via Node.js

Interprétation détaillée de la disposition React Native Flexbox

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!