Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
COURS DE PROGRAMMATION

Angular

Un cours complet pour maîtriser Angular. Découvrez tous les chapitres ci-dessous.

19 chapitres
Accès gratuit
Angular

Contenu du cours

  1. Présentation de l'environnement de développement Node.js
  2. Installation d'Angular
  3. Présentation de la CLI Angular et ses commandes essentielles
  4. Utiliser Angular avec Visual Studio Code
  5. Erreur exécution de script sur Visual Studio Code

  1. Créer un nouveau projet Angular
  2. La structure et l'architecture d'un projet Angular
  3. Configurer un projet Angular (angular.json, tsconfig.json, environnements)
  4. Versionner un projet Angular avec Git et GitHub

Travaux pratiques

  1. TP 1 : Création d'une première application Angular

  1. Intégrer Bootstrap avec Angular
  2. Intégrer Font Awesome avec Angular
  3. Intégrer la librairie Angular Material
  4. Intégrer la librairie Materialize

  1. Rappel des normes ECMAScript (ES6 et suivantes)
  2. let, const et portée des variables
  3. Les fonctions fléchées
  4. Destructuration, opérateurs spread et rest
  5. Les classes et les modules ES6 (import / export)

  1. Présentation de TypeScript
  2. Les types de variables de TypeScript
  3. Le typage fort en TypeScript
  4. Les classes en TypeScript
  5. Les interfaces de classe en TypeScript
  6. Présentation des décorateurs

Travaux pratiques

  1. Exercices et TP TypeScript Série 01

  1. La syntaxe de base d'Angular
  2. Introduction au component Angular
  3. Créer un composant avec Angular
  4. Introduction au module Angular (NgModule et composants standalone)
  5. Les décorateurs Angular (@Component, @Injectable, @Input, @Output…)
  6. Le cycle de vie d'un composant Angular
  7. Le modèle MVVM / MVW dans Angular

  1. Le Data Binding dans Angular
  2. L'opérateur « moustache » (interpolation {{ }})
  3. Le Property Binding (One Way)
  4. Le Two Way Data Binding et NgModel
  5. Les signals dans Angular

  1. La gestion des événements (Event Binding) et l'objet $event
  2. Les variables de template (#ref)

Travaux pratiques

  1. TP 2 : Conception d'un compteur interactif avec Angular

  1. Communication entre composants Angular
  2. Transmettre des données du parent vers l'enfant avec @Input
  3. Émettre des événements vers le parent avec @Output et EventEmitter
  4. Accéder à un composant enfant avec @ViewChild

Travaux pratiques

  1. TP 3 : Réaliser une TodoList avec Angular

  1. Principes de l'injection de dépendances (DI)
  2. Les services Angular
  3. Injecter un service Angular (constructeur et inject())
  4. Configurer l'injecteur et enregistrer des services dans un composant
  5. Définir un provider : classe, valeur, fabrique (useClass, useValue, useFactory)

Travaux pratiques

  1. TP 4 : Architecturer l'application sous forme d'une organisation de services

  1. Directives d'attributs et directives structurelles
  2. Les directives ngIf, ngFor, ngSwitch et le control flow @if, @for, @switch
  3. Les directives ngClass et ngStyle
  4. Utilisation des attributs ARIA (directive attr.*)
  5. Création d'une directive personnalisée (@Input, @HostListener)
  6. Utilisation des « pipes » natifs et personnalisés

Travaux pratiques

  1. TP 5 : Créer une directive personnalisée avec Angular

  1. Présentation des formulaires : Template Driven Form et Reactive Form
  2. Formulaire d'authentification 1 avec Angular
  3. Formulaire d'authentification 2 avec Angular
  4. Les états d'un formulaire (ngControl) et la soumission (ngSubmit)
  5. Les Reactive Forms : FormControl, FormGroup et FormBuilder
  6. Validation de formulaires en Angular
  7. Création des validateurs personnalisés

Travaux pratiques

  1. TP 6 : Gestion des entrées utilisateurs (formulaire réactif)

  1. Routage et navigation avec Angular
  2. Le routage avec Angular : routes, route par défaut et redirections
  3. Récupération des paramètres d'URL et des query strings
  4. Limitation d'accès à une route : les « Guards »
  5. Les routes imbriquées et le lazy loading

Travaux pratiques

  1. TP 7 : Mettre en place une application multi-vues

  1. Communication asynchrone : promesses et async/await
  2. Présentation des Observables RxJS
  3. Le client HTTP Angular (HttpClientModule et provideHttpClient)
  4. Communiquer avec une API REST dans un service (get, post, put, delete)
  5. Typage des données retournées et gestion des erreurs

Travaux pratiques

  1. TP 8 : Mettre en place un client d'API REST avec Angular

  1. Récupérer des données avec PHP MySQL dans Angular
  2. Angular DataTable avec des données PHP MySQL

  1. Introduction au DataTable
  2. Utilisation du DataTable avec Angular
  3. Traduire mat-paginator en Angular

  1. Compiler un projet Angular pour la publication (ng build)
  2. Déployer une application Angular sur un hébergement web ou un serveur dédié
  3. Déployer une application Angular sur GitHub Pages

  1. TP 1 : Création d'une première application Angular
  2. TP 2 : Conception d'un compteur interactif avec Angular
  3. TP 3 : Réaliser une TodoList avec Angular
  4. TP 4 : Architecturer l'application sous forme d'une organisation de services
  5. TP 5 : Créer une directive personnalisée avec Angular
  6. TP 6 : Gestion des entrées utilisateurs (formulaire réactif)
  7. TP 7 : Mettre en place une application multi-vues
  8. TP 8 : Mettre en place un client d'API REST avec Angular

Informations

  • Chapitres 19
  • Mise à jour Récente