Générer du code avec ng generate
Créez la structure de composants, de services et d’autres éléments.
Générer du code avec ng generate est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Générer du code avec ng generate
La commande ng generate (abrégée en ng g) crée la structure des éléments Angular avec le code de base et les conventions de nommage appropriés.
Générer un composant
Créez un composant autonome avec une seule commande.
ng generate component hello
# short form:
ng g component helloÉléments créés
La commande génère hello.component.ts, .html, la feuille de style et un test .spec.ts, et utilise le mode autonome par défaut.
Générer dans un dossier
Indiquez un chemin pour placer le composant dans un sous-dossier.
ng g component features/dashboardGénérer un service
Créez un service injectable avec le schéma de service.
ng g service data
# creates data.service.ts with @InjectableGénérer une directive
Les directives autonomes sont créées de manière similaire.
ng g directive highlightGénérer un tube
Créez un tube personnalisé pour transformer les modèles.
ng g pipe truncateGénérer une garde
Les gardes de route protègent la navigation. La CLI crée des gardes fonctionnelles.
ng g guard authAperçu à blanc
Utilisez l'option d'exécution à blanc pour voir ce qui serait créé sans écrire de fichiers.
ng g component hello --dry-runIgnorer le fichier de test
Ajoutez une option pour éviter de générer le test .spec.ts si vous n'en voulez pas.
ng g component hello --skip-testsModèle et styles intégrés
Vous pouvez demander un modèle et des styles intégrés plutôt que des fichiers distincts.
ng g component badge --inline-template --inline-styleVérification rapide : ng generate
Créer la structure des éléments.
Récapitulatif : génération
ng generate (ng g) crée la structure des composants, services, directives, tubes et gardes en respectant les conventions appropriées. Des options comme --dry-run, --skip-tests et --inline-template permettent d'adapter la sortie. Ensuite : compiler et lancer l'application.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 38
- Leçons
- 144
Questions Fréquemment Posées
La leçon « Générer du code avec ng generate » est-elle gratuite ?
Oui — le texte complet de « Générer du code avec ng generate » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Générer du code avec ng generate » ?
Créez la structure de composants, de services et d’autres éléments. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Générer du code avec ng generate » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Générer un nouveau projet
- Structure du projet expliquée
- Générer du code avec ng generate
- Compiler et servir