Cours acceléré
Durée estimée : 2 heures
1. Introduction à Angular
- Expliquez brièvement ce qu'est Angular et son utilité dans le développement web.
- Angular est un framework de développement d'applications web basé sur TypeScript, qui permet de créer des applications web dynamiques et interactives.
- Mettez en évidence les avantages d'Angular, tels que la facilité de création de composants réutilisables, la gestion de l'état de l'application, le routage, etc.
2. Prérequis
- Présentez brièvement Node.js et expliquez son rôle dans le développement d'applications Angular.
- Node.js est une plateforme permettant d'exécuter du code JavaScript côté serveur. Il est utilisé dans le développement d'applications Angular pour gérer les dépendances, exécuter des scripts de construction, etc.
- Montrez comment installer Node.js sur le système de la personne.
- Rendez-vous sur le site officiel de Node.js (https://nodejs.org) et téléchargez la version recommandée pour votre système d'exploitation.
- Suivez les instructions d'installation fournies par le programme d'installation de Node.js.
- Expliquez les bases de npm (Node Package Manager) et comment l'utiliser pour installer les dépendances.
- Expliquez que npm est le gestionnaire de paquets par défaut de Node.js, utilisé pour installer des bibliothèques tierces et gérer les dépendances d'un projet.
- Montrez comment ouvrir une invite de commande ou un terminal, puis comment utiliser la commande
npm installpour installer des dépendances dans un projet.
3. Environnement de développement
- Expliquez les options disponibles pour configurer un environnement de développement Angular, notamment l'utilisation d'Angular CLI (Command Line Interface).
- Angular CLI est un outil en ligne de commande qui facilite la création et la gestion de projets Angular.
- Montrez comment installer Angular CLI via npm.
- Ouvrez une invite de commande ou un terminal et exécutez la commande suivante :
npm install -g @angular/cli.
- Ouvrez une invite de commande ou un terminal et exécutez la commande suivante :
- Créez un nouveau projet Angular en utilisant la commande
ng new.- Utilisez la commande
ng new nom-du-projetpour générer un nouveau projet Angular. - Répondez aux questions posées par Angular CLI, telles que le style CSS à utiliser et si vous souhaitez configurer le routage.
- Utilisez la commande
4. Structure d'un projet Angular
Explorez laLa structure
de based'un projet Angular généré par AngularCLI.CLI est organisée de manière logique et suit des conventions établies. Explorons les différents dossiers et fichiers importants :Expliqueznode_modules : Ce dossier contient toutes les dépendances du projet installées via npm. Il est généré automatiquement lorsque vous exécutez la commande
npm install.-
src : Ce dossier contient le
rôlecode source dechaquel'application Angular.-
app : Ce sous-dossier contient le code spécifique à votre application. Il contient notamment les composants, les services, les modèles et les styles.
-
app.component.ts : Ce fichier contient la classe TypeScript du composant racine de votre application. Il est responsable du comportement du composant.
-
app.component.html : Ce fichier contient le template HTML du composant racine. Il détermine la structure et la mise en page de votre application.
-
app.module.ts : Ce fichier définit le module racine de votre application, qui est un conteneur pour tous les composants, services, directives et autres fonctionnalités utilisées dans votre application.
-
-
assets : Ce dossier
etest utilisé pour stocker des ressources statiques telles que des images, des fichiers de configuration, etc. -
environments : Ce dossier contient des fichiers de configuration pour différents environnements de déploiement (par exemple, développement, production). Ces fichiers peuvent contenir des variables spécifiques à chaque environnement, telles que les URL des API, les clés d'accès, etc.
-
styles.css : Ce fichier
important.contient les styles globaux de votre application. Vous pouvez y définir des styles qui s'appliqueront à tous les composants.
-
Mettezenangular.json
évidence: Ce fichier de configuration contient des informations sur le projet Angular, telles que les chemins des fichiersprincipauxsources,telslesqueoptionsapp.component.ts,deapp.component.html,compilation,app.module.ts,les dépendances, etc. Vous pouvez le modifier si nécessaire.
-
tsconfig.json : Ce fichier contient la configuration du compilateur TypeScript pour votre projet Angular.
-
package.json : Ce fichier définit les métadonnées du projet et les dépendances du package utilisées dans votre application. Vous pouvez y ajouter des scripts personnalisés, des dépendances supplémentaires, etc.
5. Composants et modèles
ExpliquezAngular,le concept deles composantsdansjouentAngular et leurun rôle central dans la construction de l'interface utilisateur.- Ils
Unencapsulentcomposantlareprésentelogique et le rendu d'une partie de l'interfaceapplication.utilisateurLesetcomposantsestsont composés d'une classe TypeScript et d'un templateHTML.HTML
détermine la structure et l'apparence du composant. Voici comment créer et utiliser des composants dans Angular :
-
Créez un nouveau composant en utilisant la commande
ng generate component.:UtilisezOuvrez une invite de commande ou un terminal.- Exécutez la commande suivante :
ng generate component nom-du-composant. - Cela générera automatiquement les fichiers nécessaires pour
générer unle nouveaucomposantcomposant,Angular.tels que la classe TypeScript, le template HTML et les styles CSS.
MontrezcommentUtilisez
lierle composant dans un autre composant :- Dans le composant parent où vous souhaitez utiliser le nouveau composant, importez la classe du composant en utilisant
import { NomDuComposantComponent } from './chemin-vers-le-composant'. - Ajoutez le composant à la liste des déclarations dans le module qui contient le composant parent. Cela permet à Angular de reconnaître et de rendre le composant disponible.
- Dans le template HTML du composant parent, utilisez la balise du composant en utilisant
<nom-du-composant></nom-du-composant>.
- Dans le composant parent où vous souhaitez utiliser le nouveau composant, importez la classe du composant en utilisant
-
Liez des données du composant au modèle et
les afficher dans le template.Ajoutez des propriétés et des méthodes au composant et utilisez-affichez-les dans le template :- Dans la classe du composant, définissez des propriétés qui représentent les données que vous souhaitez afficher.
- Dans le template HTML, utilisez la syntaxe double accolade
{{ }}pour lier les propriétés du composant au modèle et les afficher. Par exemple,<h1>{{ titre }}</h1>. - Vous pouvez également utiliser des directives structurales comme
*ngForet*ngIfpour afficheretdynamiquementmanipulerdeslesélémentsdonnées.basés sur des listes ou des conditions.
-
Interagissez avec les événements et les actions utilisateur :
- Dans le template HTML du composant, utilisez les événements intégrés tels que
(click),(input),(submit), etc., pour réagir aux actions de l'utilisateur. - Dans la classe du composant, définissez des méthodes pour gérer les événements et effectuer des actions en réponse à ceux-ci.
- Utilisez la liaison de données bidirectionnelle avec
[(ngModel)]pour lier des éléments de formulaire à des propriétés du composant et mettre à jour les valeurs lorsque l'utilisateur interagit avec le formulaire.
- Dans le template HTML du composant, utilisez les événements intégrés tels que
IntroduisezAngular, lesservices et leur rôle dans la logique métier de l'application.Lesservices sont utilisés pour encapsuler la logique métier et partager des données entre les composants.
services sont des classes TypeScript qui fournissent des fonctionnalités spécifiques et peuvent être injectés dans les composants ou d'autres services. Voici comment créer et utiliser des services dans Angular :
-
Créez un nouveau service en utilisant la commande
ng generate service.:UtilisezOuvrez une invite de commande ou un terminal.- Exécutez la commande suivante :
ng generate service nom-du-service. - Cela générera automatiquement les fichiers nécessaires pour
générer unle nouveauserviceservice,Angular.tels que la classe TypeScript.
MontrezcommentInjectez
injecter unle service dans un composant :- Dans le composant où vous souhaitez utiliser le service, importez la classe du service en utilisant
import { NomDuService } from './chemin-vers-le-service'. - Ajoutez le service à la liste des fournisseurs dans le module qui contient le composant. Cela permet à Angular de reconnaître et
l'utiliserd'injecter le service lorsque le composant en a besoin. - Dans le constructeur du composant, ajoutez une dépendance du service en utilisant
private nomDuService: NomDuService.
- Dans le composant où vous souhaitez utiliser le service, importez la classe du service en utilisant
-
Utilisez le service pour effectuer des opé
rations.rations :- Dans la classe du composant, appelez les méthodes fournies par le service pour effectuer des opérations métier ou récupérer des données.
- Vous pouvez également utiliser les propriétés du service pour accéder aux données partagées entre les composants.
-
Optionnel : Utilisez l'injection de dépendances pour
injecterconfigurer le service :- Vous pouvez injecter d'autres services ou dépendances dans
levotrecomposant.service en utilisant l'injection de dépendances. - Utilisez
lesleméthodesdécorateur@Injectable()sur la classe du servicedanspour indiquer à Angular que lecomposantservicepourpeuteffectuerêtre injecté avec desopérations, par exemple récupérer des données à partir d'une API.dépendances.
- Vous pouvez injecter d'autres services ou dépendances dans
Expliquez l'utilité duLe routage
dansest un élément clé d'une applicationAngularAngular,et comment configurer les routes.Le routage permetpermettant de naviguer entrelesdifférentes vues (ou pages) de l'application.
-
Créez un module de routage :
- Dans le dossier
app, créez un nouveau fichiernom-du-module-routing.module.tspour votre module de routage. CréezImportezquelqueslesroutesmodulesbasiquesnécessaires depuis Angular etmontrezdéclarezcommentunnaviguernouveauentremoduleelles.de- routage en utilisant
@NgModule.- Configurez les routes dans le tableau
routesen définissant chaque route avec un chemin et un composant associé.
- Dans le dossier
-
Importez le module de routage dans le module principal :
- Dans le fichier
app-routing.app.module.tsimport { NomDuModuleRoutingModule } from './chemin-vers-le-module-routing.module'. UtilisezAjoutez lecomposantmodule de routage à la liste des imports dans le décorateur@NgModuledu module principal.
- Dans le fichier
-
Configurez les liens de navigation dans les templates des composants :
- Utilisez la directive
routerLinkpour créer des liens de navigation dans les templates des composants. Par exemple,<a routerLink="/chemin-de-la-route">Lien</a>. UtilisezVous pouvez également utiliser des liens relatifs en utilisant[routerLink]avec un tableau pour spécifier les segments de l'URL. Par exemple,<a [routerLink]="['/chemin-parent', id, 'chemin-enfant']">Lien</a>.
- Utilisez la directive
-
Affichez les composants de route dans le template principal :
- Dans le template principal (généralement
app.component.html), utilisez la directiverouter-outletpour spécifier où afficher les composants correspondant aux routes. - Lorsque vous naviguez vers une route, le
contenucomposantdeassociéchaqueserarouteautomatiquement chargé et affiché danslel'emplacementtemplatespécifiéprincipal.parrouter-outlet.
- Dans le template principal (généralement
-
Utilisez la navigation programmée :
- Vous pouvez également effectuer une navigation programmée en utilisant le service
Routerfourni par Angular. - Importez
Routerdans votre composant et injectez-le dans le constructeur. - Utilisez les méthodes
navigateounavigateByUrldu serviceRouterpour effectuer des navigations programmées vers des routes spécifiques.
- Vous pouvez également effectuer une navigation programmée en utilisant le service
8. Gestion de l'état avec NgRx
Introduisez NgRx,est une bibliothèque de gestion d'état inspirée par Redux, conçue spécifiquement pour les applications Angular.NgRxElle facilite la gestion de l'état global de l'application en utilisant un flux de données unidirectionnel.
Expliquez les concepts clés de NgRx, tels que les actions, les reducers et les selectors.Les actions représentent des événements qui se produisent dans l'application.Les reducers sont des fonctions qui décrivent comment l'état de l'application change en réponse aux actions.Les selectors permettent de sélectionner des parties spécifiques de l'état de l'application.
MontrezVoici comment configurer NgRx dansunvotre projet Angular et implémenter un exemplesimple.simple- :
-
Installez les dépendances nécessaires via
npm.npm :- Ouvrez une invite de commande ou un terminal à la racine de votre projet Angular.
- Exécutez la commande suivante pour installer les dépendances NgRx :
npm install @ngrx/store @ngrx/effects @ngrx/entity.
-
Créez
desuneactions,action :- Dans le dossier
app, créez un nouveau fichiernom-de-l-action.actions.ts. - Définissez une classe pour représenter votre action et utilisez le décorateur
@ngrx/storepour définir le type d'action. - Par exemple, vous pouvez créer une action pour charger des
reducersdonnées :
import { createAction } from '@ngrx/store'; export const loadDonnees = createAction('[Donnees] Charger les données'); - Dans le dossier
-
Créez un reducer :
- Dans le dossier
app, créez un nouveau fichiernom-du-reducer.reducer.ts. - Définissez une fonction reducer qui prend en paramètre l'état actuel et
desuneselectorsaction, et retourne le nouvel état. - Par exemple, vous pouvez créer un reducer pour gérer
unlesétatdonnéessimplechargéesdans:
l'application.import { createReducer, on } from '@ngrx/store'; import { loadDonnees } from './nom-de-l-action.actions'; export interface State { donnees: any[]; } export const initialState: State = { donnees: [], }; export const reducer = createReducer( initialState, on(loadDonnees, (state) => { // Effectuez les opérations nécessaires pour charger les données depuis une API ou une source de données return { ...state, donnees: /* Données chargées */ }; }) );
- Dans le dossier
- Configurez le store :
- Dans le dossier
app, créez un nouveau fichiernom-du-store.module.ts. - Importez les modules nécessaires depuis NgRx et configurez le store en utilisant
StoreModule.forRoot({}). - Enregistrez le reducer dans la configuration du store.
import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import { reducer } from './nom-du-reducer.reducer'; @NgModule({ imports: [StoreModule.forRoot({ donnees: reducer })], }) export class NomDuStoreModule {}
- Dans le dossier
-
Utilisez le store dans un composant :
- Importez
Storedepuis@ngrx/storedans le composant où vous souhaitez utiliser le store. - Injectez
Storedans le constructeur du composant. - Dispatchez une action en utilisant
store.dispatch(nom-de-l-action())pour effectuer des changements d'état.
import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import { loadDonnees } from './nom-de-l-action.actions'; @Component({ selector: 'app-mon-composant', template: ` <button (click)="chargerDonnees()">Charger les données</button> `, }) export class MonComposantComponent { constructor(private store: Store) {} chargerDonnees() { this.store.dispatch(loadDonnees()); } }
- Importez
- Présentez ng-zorro, une bibliothèque de composants UI pour Angular.
- ng-zorro fournit des composants prêts à l'emploi pour créer une interface utilisateur attrayante et réactive.
- Montrez comment installer ng-zorro via npm.
- Utilisez la commande
npm install ng-zorro-antdpour installer la bibliothèque ng-zorro.
- Utilisez la commande
- Intégrez quelques composants ng-zorro dans l'application pour illustrer son utilisation.
- Utilisez les composants ng-zorro tels que les boutons, les formulaires, les modales, etc., pour améliorer l'apparence et la fonctionnalité de l'application.
Expliquez l'importance duLe linting est une pratique importante pour maintenir un code
proprepropre, cohérent etcohérent.exempt- d'erreurs
Lede style. ESLint est un outil populaire de lintingpermetJavaScript, tandis que Prettier est un outil dedétecterformatage de code. Combiner ESLint etdePrettiercorrigervousautomatiquementpermetlesd'automatiser la détection et la correction des erreurset les violationsdestylestyle.dans le code.
MontrezVoici comment configurer ESLint et Prettier dans votre projet Angular :-
Installez les dépendances nécessaires via npm :
- Ouvrez une invite de commande ou un terminal à la racine de votre projet Angular.
InstallezExécutez la commande suivante pour installer les dépendances ESLint et Prettiervia:npm.npm install eslint prettier eslint-plugin-prettier eslint-config-prettier --save-dev.
- Ouvrez une invite de commande ou un terminal à la racine de votre projet Angular.
-
Créez un fichier de configuration pour ESLint :
- À la racine de votre projet, créez un fichier
.eslintrc.json. - Configurez ESLint en utilisant les
fichiersrègles et les plugins souhaités. Vous pouvez commencer avec une configuration de base ou utiliser une configuration spécifique à Angular. - Voici un exemple de configuration de base avec le plugin Prettier :
.eslintrc{ "extends": ["eslint:recommended", "plugin:prettier/recommended"], "rules": { // Règles personnalisées ou supplémentaires si nécessaire } }et
- À la racine de votre projet, créez un fichier
-
Créez un fichier de configuration pour Prettier :
- À la racine de votre projet, créez un fichier
.prettierrcpouroudéfinir.prettierrc.json. - Configurez
règlesPrettierdeenstyle etutilisant les options deformatage.formatage souhaitées. Vous pouvez consulter la documentation de Prettier pour connaître toutes les options disponibles. - Voici un exemple de configuration de base :
{ "semi": true, "singleQuote": true, "trailingComma": "all" }
les - À la racine de votre projet, créez un fichier
-
Configurer ESLint avec Prettier :
- Ouvrez le fichier
.eslintrc.jsonet ajoutez les règles spécifiques à Prettier pour assurer une intégration harmonieuse. - Ajoutez
"plugin:prettier/recommended"dans la liste des règles étendues (extends).
- Ouvrez le fichier
FaitesuneExécutez
démonstrationle linting et le formatage :- Ajoutez des scripts dans votre fichier
package.jsonpour exécuter ESLint et Prettier. - Par exemple, vous pouvez ajouter les scripts suivants :
"scripts": { "lint": "eslint .", "lint:fix": "eslint . --fix", "format": "prettier --write ." }
- Ajoutez des scripts dans votre fichier
-
Exécutez les commandes de linting
en utilisant des règleset destyleformatageprédéfinies.:ModifiezPourleexécutercodeESLintpour introduire délibérément des erreurs ou des violations de style.Exécutez la commande de linting pouret afficher les erreurs et lesavertissements.avertissements :npm run lint.CorrigezPour exécuter ESLint et corriger automatiquement les erreurs :npm run lint:fix.- Pour exécuter Prettier et formater automatiquement
envotreutilisantcodela:commandenpm.derunformatage.format
-
- Ré
capitulezcapituler les points clés couverts dans le tutoriel. FournissezFournir des ressources supplémentaires pourque la personne puissecontinuer à apprendre Angular parelle-sois-même, notamment des tutoriels, des blogs et la documentation officielle d'Angular.
En utilisant NgRx, vous pouvez gérer efficacement l'état global de votre application Angular en séparant la logique de gestion de l'état du reste de votre code. NgRx facilite le suivi et la gestion des actions et des états de votre application, ce qui contribue à une architecture plus robuste et maintenable.
9. Intégration de ng-zorro
10. Linting avec ESLint et Prettier
11. Conclusion et ressources supplémentaires
-
NgRx
Dans
6. Services
Dans
En utilisant des services, vous pouvez séparer la logique métier de vos composants et favoriser la réutilisabilité du code. Les services sont un excellent moyen de centraliser la logique de données et de fournir des fonctionnalités cohérentes à travers votre application Angular.