Le Guide Angular | Marmicode
  • Le Guide Angular par Marmicode
  • Pourquoi Angular ?
  • ECMAScript 6+
    • Un Peu d'Histoire
    • Propriétés du Langage
    • "Single-Threaded" donc Asynchrone
    • Event Loop
    • Classes
    • Hoisting is Dead: var vs. let vs. const
    • this & "binding"
    • Arrow Functions
    • Template Strings
    • Syntactic Sugar
      • Spread
      • Destructuring
      • Rest
      • Object Literal Property Value Shorthand
    • Named Parameters
    • Compatibilité
  • TypeScript
    • Pourquoi TypeScript ?
    • De l'ECMAScript au TypeScript
    • Visibilité des Propriétés
    • Typing des Propriétés
    • Types
    • Interfaces
    • Inference
    • Duck Typing
    • Duck Typing Patterns
      • Compatibilité de Librairies
      • Entity Constructor
    • Décorateurs
      • Décorateurs de Propriété
      • Décorateurs de Classe
      • Décorateurs de Méthode & Paramètres
    • Quelques Liens
  • Tools
    • Clavier mécanique
    • Git
    • Command Line
    • NodeJS
    • NPM
    • Yarn
      • Pourquoi Yarn ?
      • Définition et Installation des Dépendances
      • Scripts
      • Mise à Jour et Automatisation
    • Chrome
    • IntelliJ / WebStorm / VSCode
      • Raccourcis clavier IntelliJ / WebStorm
    • Floobits
    • Angular CLI
    • StackBlitz
    • Compodoc
  • Angular
    • Bootstrap
    • Composants
      • Root Component
      • Template Interpolation
      • Property Binding
      • Class & Style Binding
      • Event Binding
      • *ngIf
      • *ngFor
      • L'approche MVC
      • Création de Composants
      • Exemple
    • Container vs. Presentational Components
    • Interaction entre Composants
      • Input
      • Output
      • Exemple
    • Change Detection
      • Les Approches Possibles
      • Fonctionnement de la Change Detection
      • Optimisation de la Change Detection
      • Immutabilité
      • Quelques Liens
    • Project Structure & Modules
      • Entry Point
      • Définition d'un Module
      • Root Module
      • Feature Module
      • Shared Module
      • Exemple
    • Dependency Injection
      • Qu'est-ce que la "Dependency Injection" ?
      • Injection d'un Service Angular
      • Services & Providers
      • Portée des Services
      • Tree-Shakable Services
      • Class vs Injection Token
      • Exemple
    • Callback Hell vs. Promise vs. Async / Await
      • Callback Hell
      • Promise
      • Async / Await
    • Observables
      • Reactive Programming
      • Promise vs Observable
      • Subscribe
      • Unsubscribe ⚠️
      • Création d'un Observable
      • Opérateurs
        • Définition d'un Opérateur
        • Lettable Operators vs Legacy Methods
        • map
        • filter
        • mergeMap & switchMap
        • shareReplay
        • buffer
        • debounceTime
        • distinctUntilChanged
        • retry
      • Quelques Liens
      • Talks
    • Http
      • Pourquoi HttpClient ?
      • Utilisation de HttpClient
      • Utilisation dans un Service
      • Gestion de la Subscription ⚠️
    • State Management
      • Quelques Liens
      • Talks
    • GraphQL
    • Formulaires
      • Template-driven Forms 🤢
      • Reactive Forms 👍
        • Avantages des "Reactive Forms"
        • La boite à outils des "Reactive Forms"
        • Validation
        • Observation des Changements
    • Directives
      • Attribute Directive
      • Structural Directive
    • Pipes
    • Routing
      • Mise en Place du Routing
      • Lazy Loading
      • Project Structure
      • Route Guards
    • Testing
      • Unit-Testing
        • 📺Introduction au Test-Driven Development
        • Jasmine
        • Unit-Test Synchrone
        • Test-Driven Development
        • Unit-Test Asynchrone
        • TestBed
        • Unit-Test d'un Service
        • Unit-Test d'un Composant
        • Unit-Test et Spies
        • Unit-Test et HttpClient
      • End-to-End
      • Talks
    • Sécurité
      • Quelques Liens
    • Animation
    • Internationalisation
    • Quelques Liens
  • Cookbook
    • Authentification et Autorisation
    • Remplacement Dynamique de Composants
    • Lazy Loading without Router
    • Project Structure
    • SCAM Modules
    • Setup a Mock ReSTful API
  • Autres Ressources
  • Stay Tuned
    • 🎁-20% sur nos workshops avec le code GUIDEANGULAR
    • 🐦Suivez-moi !
    • 📺Cours Vidéo
    • 📬Newsletter
    • 📝Blog
  • Nos Services
    • Formation Angular
    • Atelier Unit-Testing Angular
    • Atelier Architecture Angular
    • Consultation à Distance & Code Review
  • Nos Guides
    • Guide Agile
    • Guide API ReST
    • Guide NodeJS
Propulsé par GitBook
Sur cette page
  • Génération du composant book-preview
  • yarn ng vs. ng
  1. Angular
  2. Composants

Création de Composants

PrécédentL'approche MVCSuivantExemple

Dernière mise à jour il y a 5 ans

Pour créer de nouveaux composants, il suffit de créer la classe du composant, le fichier de template associé et surtout ajouter la classe à la liste des declarations du module associé. Pour le moment, nous n'avons qu'un seul module AppModule dont on analysera le contenu plus tard dans la section Project Structure & Modules.

La création manuelle de ces fichiers peut s'avérer fastidieuse au quotidien et surtout "error-prone". C'est pour cette raison qu'Angular CLI fournit nativement des commandes permettant de générer le code nécessaire à la déclaration d'un composant (entre autres). Ces générateurs de code se basent sur l'outil Schematics fourni par Angular.

Génération du composant book-preview

Pour générer un composant, il suffit de lancer la commande suivante :

yarn ng generate component book/book-preview

Nous avons décidé d'indiquer le "path" cible book/ afin de regrouper tous les composants (et autres fichiers) associés à la fonctionnalité "book" dans ce dossier là. Ce dossier deviendra plus tard un "feature module".

Pour un projet contenant une seule application, le "root path" est src/app.

Cela génère le contenu suivant en respectant le "style guide" Angular :

  • book-preview.component.ts : Classe TypeScript BookPreviewComponent du composant .

  • book-preview.component.html : Template HTML du composant .

  • book-preview.component.scss : Fichier CSS du composant. Dans notre cas, le fichier a une extension .scss car nous avons opté pour le SASS en l'indiquant dans notre configuration yarn ng set defaults.styleExt=scss.

  • book-preview.component.spec.ts : Squelette des tests unitaires du composant .

... et met à jour le fichier app.module.ts dont nous analyserons le contenu plus tard.

N'oubliez pas d'ajouter et de "commit" les fichiers générés et modifiés.

Nous pouvons désormais utilisé notre nouveau composant dans le template du composant app par exemple :

<wt-book-preview></wt-book-preview>
<wt-book-preview></wt-book-preview>

yarn ng vs. ng

Il est recommandé d'utiliser la commande yarn ng au lieu de ng (contrairement à ce que l'on peut remarquer sur de nombreuses documentations et exemples) pour les raisons suivantes :

  • La commande yarn ng, utilise la version d'Angular CLI installée localement sur votre projet. Tous les développeurs (et outils) utilisent alors la même version.

  • La commande ng n'est pas forcément disponible globalement dans tous les environnements. Certains développeurs (ou outils) risquent donc d'être surpris en exécutant la même commande sur leur environnement.

Heureusement, si les versions de l'Angular CLI globale et la locale ne correspondent pas, Angular CLI lance la version locale en affichant une alerte.

Pour éviter tous ces ennuis et pour pouvoir factoriser dans votre équipe les options utilisées pour générer des composants, pourquoi ne pas ajouter un script à votre package.json:

"generate:component": "ng generate component --export"

permettant aux développeurs de générer des composants avec la commande :

yarn generate:component book/book-preview

... au lieu de devoir expliquer la commande ng g c à chaque nouvel arrivant.

Génération d'un composant avec Angular CLI
Insertion d'un composant
Contenu par défaut du composant