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 install pour 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.
• Créez un nouveau projet Angular en utilisant la commande ng new.
  • Utilisez la commande ng new nom-du-projet pour 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.

4. Structure d'un projet Angular

Explorez la

La structure de base d'un projet Angular généré par Angular CLI.CLI est organisée de manière logique et suit des conventions établies. Explorons les différents dossiers et fichiers importants :

• Expliquez

  node_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 de chaquel'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.

Mettez en

angular.json évidence: Ce fichier de configuration contient des informations sur le projet Angular, telles que les chemins des fichiers principauxsources, telsles queoptions app.component.ts,de app.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

Dans

ExpliquezAngular, le concept deles composants dansjouent Angular et leurun rôle central dans la construction de l'interface utilisateur.

Ils Unencapsulent composantla représentelogique et le rendu d'une partie de l'interfaceapplication. utilisateurLes etcomposants estsont composécomposés d'une classe TypeScript et d'un template HTML.HTML qui détermine la structure et l'apparence du composant. Voici comment créer et utiliser des composants dans Angular :

1. Créez un nouveau composant en utilisant la commande ng generate component. :

   • UtilisezOuvrez une invite de commande ou un terminal.
2. 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 nouveau composantcomposant, Angular.tels que la classe TypeScript, le template HTML et les styles CSS. Montrez comment

Utilisez 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>.

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 *ngFor et *ngIf pour afficher etdynamiquement manipulerdes leséléments donné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.

 

6. Services

Dans

IntroduisezAngular, les services et leur rôle dans la logique métier de l'application.

Les services sont utilisés pour encapsuler la logique métier et partager des données entre les composants. Les 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 :

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.

7. Routage

Expliquez l'utilité du

Le routage dansest un élément clé d'une application AngularAngular, et comment configurer les routes.

Le routage permetpermettant de naviguer entre les différentes vues (ou pages) de l'application. Angular fournit un système de routage intégré qui vous permet de configurer et de gérer facilement les routes. Voici comment configurer le routage dans votre application Angular :

Créez un module de routage :

Dans le dossier app, créez un nouveau fichier nom-du-module-routing.module.ts pour votre module de routage. CréezImportez quelquesles routesmodules basiquesnécessaires depuis Angular et montrezdéclarez commentun naviguernouveau entremodule elles.de

routage en utilisant @NgModule. Configurez les routes dans le tableau routes en définissant chaque route avec un chemin et un composant associé.

Importez le module de routage dans le module principal :

Dans le fichier app-routing.app.module.ts, importez le module de routage en utilisant import { NomDuModuleRoutingModule } from './chemin-vers-le-module-routing.module'. UtilisezAjoutez le composantmodule de routage à la liste des imports dans le décorateur @NgModule du module principal.

Configurez les liens de navigation dans les templates des composants :

Utilisez la directive routerLink pour 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>.

Affichez les composants de route dans le template principal :

Dans le template principal (généralement app.component.html), utilisez la directive router-outlet pour spécifier où afficher les composants correspondant aux routes. Lorsque vous naviguez vers une route, le contenucomposant deassocié chaquesera routeautomatiquement chargé et affiché dans lel'emplacement templatespécifié principal.par router-outlet.

Utilisez la navigation programmée :

Vous pouvez également effectuer une navigation programmée en utilisant le service Router fourni par Angular. Importez Router dans votre composant et injectez-le dans le constructeur. Utilisez les méthodes navigate ou navigateByUrl du service Router pour effectuer des navigations programmées vers des routes spécifiques.

8. Gestion de l'état avec NgRx

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 dans unvotre projet Angular et implémenter un exemple simple.simple

:

1. Installez les dépendances nécessaires via npm.npm :
2. Ouvrez une invite de commande ou un terminal à la racine de votre projet Angular.
3. CréezExécutez desla actions,commande des reducers et des selectorssuivante pour gérerinstaller unles étatdépendances simpleNgRx dans: l'application.npm install @ngrx/store @ngrx/effects @ngrx/entity.

Créez une action :

Dans le dossier app, créez un nouveau fichier nom-de-l-action.actions.ts. Définissez une classe pour représenter votre action et utilisez le décorateur @ngrx/store pour définir le type d'action. Par exemple, vous pouvez créer une action pour charger des données :

import { createAction } from '@ngrx/store';

export const loadDonnees = createAction('[Donnees] Charger les données');

Créez un reducer :

Dans le dossier app, créez un nouveau fichier nom-du-reducer.reducer.ts. Définissez une fonction reducer qui prend en paramètre l'état actuel et une action, et retourne le nouvel état. Par exemple, vous pouvez créer un reducer pour gérer les données chargées :

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 */ };
  })
);

Configurez le store :

Dans le dossier app, créez un nouveau fichier nom-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 {}

Utilisez le store dans un composant :

Importez Store depuis @ngrx/store dans le composant où vous souhaitez utiliser le store. Injectez Store dans 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());
  }
}

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

• 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-antd pour installer la bibliothèque ng-zorro.
• 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.

10. Linting avec ESLint et Prettier

Expliquez l'importance du

Le linting est une pratique importante pour maintenir un code proprepropre, cohérent et cohérent.exempt

d'erreurs Lede style. ESLint est un outil populaire de linting permetJavaScript, tandis que Prettier est un outil de détecterformatage de code. Combiner ESLint et dePrettier corrigervous automatiquementpermet lesd'automatiser la détection et la correction des erreurs et les violations de stylestyle. 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 Prettier via: npm.npm install eslint prettier eslint-plugin-prettier eslint-config-prettier --save-dev.

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

 

Créez un fichier de configuration pour Prettier :

À la racine de votre projet, créez un fichier .prettierrc pourou définir.prettierrc.json. lesConfigurez règlesPrettier deen style etutilisant les options de formatage.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"
}

Configurer ESLint avec Prettier :

Ouvrez le fichier .eslintrc.json et 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). Faites une

Exécutez démonstrationle linting et le formatage :

Ajoutez des scripts dans votre fichier package.json pour exécuter ESLint et Prettier. Par exemple, vous pouvez ajouter les scripts suivants :

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
  "format": "prettier --write ."
}

Exécutez les commandes de linting en utilisant des règleset de styleformatage prédéfinies.:

• ModifiezPour leexécuter codeESLint pour introduire délibérément des erreurs ou des violations de style.

Exécutez la commande de linting pouret afficher les erreurs et les avertissements.avertissements : npm run lint. CorrigezPour exécuter ESLint et corriger automatiquement les erreurs : npm run lint:fix. Pour exécuter Prettier et formater automatiquement envotre utilisantcode la: commandenpm derun formatage.format.

11. Conclusion et ressources supplémentaires

• RécapitulezRécapituler les points clés couverts dans le tutoriel.
• FournissezFournir des ressources supplémentaires pour que la personne puisse continuer à apprendre Angular par elle-sois-même, notamment des tutoriels, des blogs et la documentation officielle d'Angular.