Structure et architecture d’un projet Angular

Structure et architecture d’un projet Angular

  1. Objectifs

    • Etre capable de créer un projet Angular
    • Connaitre la structure et l’architecture d’un projet Angular
  2. Présentation

    • Angular est un Framework pour créer la partie Front End des applications web en utilisant HTML et JavaScript ou TypeScript compilé en JavaScript.Une application Angular se compose de :
    • Un à plusieurs modules dont un est principal.
    • Chaque module peut inclure :
      • Des composant web : La partie visible de la ‘application Web (IHM)
      • Des services pour la logique applicative. Les composants peuvent utiliser les services via le principe de l’injection des dépendances.
      • Les directives : un composant peut utiliser des directives
      • Les pipes: utilisés pour formater l’affichage des données dans els composants.

      Structure et architecture d'un projet Angular




  3. Les modules

    • Le module est le bloc de code conçu pour effectuer une seule tâche. Nous pouvons exporter le module sous forme de classe. Les applications Angular ont un ou plusieurs modules.
    • Chaque application Angular possède un module racine et de nombreux autres modules en vedette.
    • Un module peut représenter le tout ou une partie de votre application
    • Ce bloc peut contenir les éléments suivants : Component, Service, Directive ou Pipe
    • Il peut être dépendant d’un ou plusieurs autre(s) module(s)
    • Chaque application Angular doit avoir au moins un module. Si l’application angulaire ne contient qu’un seul module, il s’agit du module racine.
    • Un module peut être partagé à d’autres modules
    • Angular possède son propre système de modularité appelé modules angulaires ou NgModules.
    • Chaque application Angular possède au moins une classe de module angulaire: le module racine, appelé classiquement AppModule.
    • Pour angulaire un module est une classe avec un décorateur @NgModule.
    • Les décorateurs sont des fonctions qui modifient les classes JavaScript.
    • Angular possède de nombreux décorateurs qui attachent des métadonnées aux classes pour configurer et donner le sens à ces classes.
    • Exemple: src/app/app.module.ts
    • import { 
      BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { AppRoutingModule } from './app-routing.module';
      import { AppComponent } from './app.component';
      @NgModule({
        declarations: [AppComponent],
          imports: [
          BrowserModule,AppRoutingModule],
          providers: [],
          bootstrap: [AppComponent]})
      export class AppModule { }
      • Les propriétés les plus importantes sont:
      • Les déclarations : la classe représentant le module. Angular a trois types de classes de modules: components, directives, et pipes.
      • exports – Pour exporter les classes utilisables dans d’autres modules.
      • Les imports – Pour importer d’autres modules.
      • Les providers – Pour déclarer les fabriques de services.
      • bootstrap – Pour declarer le corposant Racine du module. Seul le module racine doit définir cette propriété.
  4. Le Component

    • L’architecture d’Angular Component
    • Dans Angular, tout est composant: Un composant est une balise HTML personnalisée (ex: app-root, app-shop, app-login etc.)
    • Définit par : 1 sélecteur (le nom de la balise), 1 template , 1 ou plusieurs fichiers de style CSS (facultatif)
    • Représenté par : 1 fichier Typescript (.ts), 1 fichier HTML (.html), 1 ou plusieurs fichiers de style CSS (facultatif)
    • Un component peut utiliser d’autres components
  5. Le package.json

    • Le fichier package.json situé à la racine de l’application définit les bibliothèques qui seront installées node_modules lors de l’exécution npm install.

    Lorsque vous déployez votre application, vous distribuez uniquement la génération résultante, pas les fichiers source ou les outils de génération.



Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement