Explication détaillée de l'utilisation d'Angular CLI pour générer du code à partir de plans-js tutoriel-php.cn

Explication détaillée de l'utilisation d'Angular CLI pour générer du code à partir de plans

亚连

Libérer： 2018-05-29 11:05:38

original

1551 Les gens l'ont consulté

Cet article présente principalement l'explication détaillée de l'utilisation d'Angular CLI pour générer du code à partir de plans. Maintenant, je le partage avec vous et le donne comme référence.

Le premier article est : "Utiliser Angular cli pour générer des projets Angular5" : http://www.jb51.net/article/136621.htm

Cet article parle principalement de la génération de composants, Directive, service, classe, interface, énumération, etc.

Commande ng generate .

Le format de cette commande est ng generate < name> .

Vous pouvez également utiliser le paramètre --dry-run pour lister les fichiers à générer au lieu de les générer réellement.

Par exemple :

ng générer une personne de composant, générera un person.component.ts

ng générera des données de vente de service, générera un sales-data.service.ts.

ng générera un utilisateur de classe. -model générera un user-model.ts qui contient la classe UserModel.

Components.

ng La commande pour générer xxx xxx est encore un peu longue, ici angulaire cli a des alias intégrés pour les commandes, par exemple :

ng generate composant personne Pour cette commande, générer dans

peut être remplacé par la lettre g, et composant dans

peut être remplacé par la lettre c. Remplacer.

Donc ces deux commandes sont égales :

ng generate component person
ng g c person

Copier après la connexion

Vous pouvez y aller ici pour afficher les commandes et les alias liés aux composants :

https://github.com/angular/angular-cli/wiki/generate-component

Les paramètres de commande éventuellement couramment utilisés sont :

- -flat indique s'il n'est pas nécessaire de créer un dossier
--inline-template (-it) si le modèle doit être placé dans le fichier ts
--inline-style (-is) Indique si le style doit être placé dans le fichier ts.
-- spec S'il est nécessaire de créer un fichier de spécifications (fichier de test)
--view-encapsulation (-ve) Voir la stratégie d'encapsulation (simplement comprise comme la stratégie de portée des fichiers de style).
--change-detection (-cd) change Vérifiez la stratégie.
--prefix Définissez le préfixe de ce composant
--dry-run (-d), imprimer la liste de fichiers générée n'est pas générée directement

Regardez les deux paires suivantes de. commandes avec la même fonction. Il est plus pratique d'utiliser des alias :

ng generate component person
ng generate component person --inline-template --inline-style

ng g c person
ng g c person -it -is

Copier après la connexion

Essayez ces commandes ci-dessous :

Créez le projet : ng new my-app Attendez la fin de l'installation de npm avant de continuer

Après avoir créé le projet, entrez dans le répertoire, exécutez la commande :

ng g c person -d

Copier après la connexion

<🎜. >

Cette commande générera les 4 fichiers ci-dessus et mettra à jour app.module.ts .

Ensuite, supprimez le paramètre -d et générez le fichier :

Vous pouvez voir que le fichier est généré dans le projet et mis à jour app.module.ts, en y faisant une déclaration de composant <🎜. >

Essayez de générer un autre composant, en utilisant certains paramètres. Voir la stratégie d'encapsulation et de détection des changements :

ng g c student -ve Emulated -cd OnPush

Copier après la connexion

Vous pouvez voir que les paramètres fonctionnent.

Grâce à la page de gestion du code source, vous pouvez voir que ces deux commandes ont un effet sur l'application. Quelles mises à jour ont été apportées à .module :

déclare respectivement les deux composants générés