Le guide de référence CLI angulaire ultime

Cet article explore la CLI angulaire: ses capacités, fonctionnalités et mécanismes sous-jacents. Même les utilisateurs de CLI angulaires expérimentés trouveront cela un rafraîchissement utile sur son fonctionnement intérieur. Bien qu'il ne soit pas strictement obligatoire pour le développement angulaire, la CLI angulaire améliore considérablement la qualité du code et l'efficacité des développeurs.

Il s'agit du premier d'une série en quatre parties sur la construction d'une application TODO en angulaire.

1. Partie 0 - Le guide de référence CLI angulaire ultime
2. Partie 1 - Construire l'application TODO initiale
3. Partie 2 - Séparation des composants pour les listes de TODO et les todos individuels
4. Partie 3 - Intégration du service TODO avec une API REST
5. Partie 4 - Utilisation du routeur angulaire pour la résolution des données

Concepts clés:

• La CLI angulaire est un puissant ensemble d'outils rationalisant le développement des applications angulaires en automatisant des tâches comme la création, les tests et le déploiement.
• node.js, npm et idéalement dactylographiques sont des conditions préalables à l'installation de CLI angulaire.
• ng new crée de nouveaux projets angulaires, configurant automatiquement les fichiers, les dépendances et les configurations.
• ng serve permet le rechargement en direct, fournissant des aperçus en temps réel des modifications de code.
• ng generate Ajoute des fonctionnalités (composants, services, etc.) aux projets existants.
• ng build Prépare les applications pour la production en regroupant JavaScript et CSS.
• La CLI angulaire va au-delà de la génération de code; Il comprend la structure de l'application, assurant la qualité et la cohérence de la base de code.

une brève histoire

Angular Final a été publiée le 15 septembre 2016. Évolution d'un cadre (AngularJS 1.x) à une plate-forme complète prenant en charge le site Web du Web, du Web mobile, du mobile natif et du bureau, Angular nécessite des outils robustes. L'équipe angulaire a développé la CLI angulaire pour minimiser les complexités de configuration et de configuration, permettant aux développeurs de se concentrer sur la création d'applications. Cet ensemble d'outils comprend des intégrations IDE / Editor et la CLI angulaire elle-même.

---

2017.04.25 Mise à jour: reflète les modifications angulaires CLI v1.0. Reportez-vous au Guide de migration Angular CLI V1.0 pour la mise à jour des projets existants.

2017.02.17 Mise à jour: la commande ng deploy a été supprimée du Core Angular CLI.

2017.01.27 Mise à jour: utilise officiellement "AngularJS" pour 1.x et "Angular" pour 2 versions.

---

Qu'est-ce que CLI angulaire?

Angular CLI est une interface de ligne de commande automatisant les workflows de développement. Ses capacités incluent:

• Création de nouvelles applications angulaires
• exécuter un serveur de développement avec Livereload pour les aperçus en temps réel
• Ajout de fonctionnalités aux applications existantes
• Exécution des tests unitaires
• Exécution des tests de bout en bout (E2E)
• Bâtiment des applications pour le déploiement de la production

Avant d'explorer ces fonctionnalités, couvrons l'installation.

Prérequis

Node.js (6.9.0 ou ultérieure) et NPM (3.0.0 ou version ultérieure) sont nécessaires. Téléchargez la dernière version Node.js sur le site officiel. Vérifiez les versions en utilisant:

$ node -v
$ npm -v

L'installation de typeScript (fortement recommandée) se fait via NPM:

$ npm install -g typescript@2.2.0

avec Node.js et TypeScript installés, procédez pour installer le CLI angulaire

Installation de CLI angulaire

Installez à l'échelle mondiale à l'aide de NPM:

$ npm install -g @angular/cli

Vérifiez l'installation avec:

$ ng version

Cela affiche les informations de la version installée (par exemple, @angular/cli: 1.0.0).

Création d'une nouvelle application angulaire

Deux méthodes existent pour créer de nouvelles applications:

• ng init: Crée une application dans le répertoire actuel.
• ng new: crée un nouveau répertoire puis exécute ng init à l'intérieur.

ng new est préféré pour sa création de répertoire. Par exemple:

$ ng new my-app

Cela crée le répertoire my-app, génère les fichiers nécessaires, installe des dépendances, configure les fichiers de typescript, karma, protiffeur et environnement.

Options disponibles pour ng new

De nombreuses options personnalisent la création de projet (voir ng generate --help pour une liste complète):

• --dry-run: simule la création sans écrire de fichiers.
• --verbose: fournit une sortie détaillée.
• --link-cli: relie le package @angular/cli.
• --skip-install: saute l'installation de NPM.
• --skip-git: saute l'initialisation du référentiel git.
• --skip-tests: saute la création de fichiers de test.
• --skip-commit: saute le commit Git initial.
• --directory: Spécifie le nom du répertoire.
• --source-dir: Spécifie le nom du répertoire source.
• --style: Spécifie le langage de style (CSS, moins, SCSS).
• --prefix: Spécifie le préfixe des composants.
• --mobile: génère une application Web progressive (PWA).
• --routing: ajoute le module de routage.
• --inline-style: utilise des styles en ligne.
• --inline-template: utilise des modèles en ligne.

exécutons maintenant l'application.

exécuter votre application

Accédez au répertoire du projet (cd my-app) et exécutez:

$ node -v
$ npm -v

Cela démarre le serveur de développement (port par défaut 4200). LiveLoad rafraîchit automatiquement le navigateur sur les modifications du fichier. Appuyez sur ctrl-c pour arrêter le serveur.

Ajout de fonctionnalités

La commande ng generate ajoute des fonctionnalités:

• ng generate class my-new-class
• ng generate component my-new-component
• ng generate directive my-new-directive
• ng generate enum my-new-enum
• ng generate module my-new-module
• ng generate pipe my-new-pipe
• ng generate service my-new-service

Des formes plus courtes existent (par exemple, ng g c my-new-component). Chaque sous-commande a des options spécifiques (vérifier ng generate --help). La CLI intègre intelligemment de nouvelles fonctionnalités dans les modules appropriés.

(le reste de la réponse continuerait de détailler chaque sous-commande, les tests unitaires, les tests E2E, les builds de production, le déploiement (notant la suppression de ng generate), l'éjection de l'application, les fonctionnalités futures, un résumé et les FAQ , tout en maintenant la structure d'origine et le placement d'image. ng deploy

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!