Chapitre 1-Composants et Modules.pdf

Chapitre 1-Composants et Modules.pdf
Chapitre 1 Composants et Modules Ahlem ELHAJ Multimédia et Développement Web – 2ème année – Semestre 1 ISET de Sousse Développement Framework Coté Client - Angular
Introduction Angular :  Framework JavaScript puissant et open source.  Permet de développer une application web monopage (en anglais single-page application ou SPA).  Utilise TypeScript, sur-ensemble de JavaScript (un transpilateur est donc nécessaire).  Apporte un aspect applicatif au front-office.  Créé et géré par Google, il sera disponible et utilisé pendant longtemps. 2
Introduction (2)  Grand frère : AngularJS, mais totalement différents (réécriture totale) !  AngularJS désigne la version 1.x d'Angular,  Les versions supérieures (2 et plus) sont appelées simplement Angular.  Cette appellation est recommandée par la documentation officielle : ◼ "Angular is the name for the Angular of today and tomorrow. AngularJS is the name for all v1.x versions of Angular."  AngularJS n’est plus maintenu depuis 2018. 3
Architecture en composants  Angular est un Framework orienté composants. ◼ Les composants sont les briques élémentaires qui constituent l’application. ◼ Un composant (component) contrôle une portion de l’affichage graphique de l’application ou vue (l'ensemble de la page web, une fenêtre de tchat, une barre de navigation, ...).  A chaque composant sont associés ◼ une classe qui définit sa logique (typescript) ◼ un template html.  Une application peut être vue comme un arbre de composants. 4
Composant racine-AppComponent  Une application Angular possède toujours un composant racine appelé conventionnellement AppComponent.  AppComponent est la racine de l’arbre des composants.  3 fichiers sont associés à AppComponent : ◼ Le fichier typescript app.component.ts contient la classe de AppComponent et ses métadonnées. ◼ Le fichier app.component.html est le template de AppComponent. ◼ Le fichier app.component.css est le fichier de styles local de AppComponent. 5
AppComponent-fichier app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'boutique1’; } ◼ templateUrl, styleUrls : chemins vers template et feuilles de style locales ◼ Selector : sélecteur css indiquant à Angular de créer une nouvelle instance de ce composant et de l’insérer à chaque fois qu’un tag html correspondant est rencontré  index.html contient <app-root></app-root> dans la partie <body>  Tout composant de l’application aura un fichier ts ayant cette même structure.  Le décorateur @Component ◼ Indique à Angular que la classe qui vient juste après est une classe de composant, ◼ Permet de spécifier les métadonnées sur le composant (Selector, ...). 6
Création d’un composant  Commande de création d’un composant : ◼ ng generate component <nom-composant> ◼ ng g c <nom-composant>  Spécifier un chemin relatif à src/app  Principales options : ◼ --flat : ne pas créer de dossier pour le composant ◼ --module=<nom-module> : pour déclarer le composant dans le module spécifié (par défaut, le composant est déclaré dans le module app).  Peut aussi s’écrire : --module <nom-module> ◼ --export : pour que le composant soit exporté par le module auquel il appartient 7
Création d’un composant (2)  Lors de la génération d’un composant comp1 (qui sera appelé dans le code Comp1Component), les fichiers créés sont : ◼ comp1.component.ts : fichier typescript contenant la logique du composant (similaire à app.component.ts décrit précédemment), ◼ comp1.component.html : template html du composant, ◼ comp1.component.css : fichier de styles local du composant, ◼ comp1.component.spec.ts : fichier de test du composant (l’option --skip-tests peut être utilisée lors de la génération du projet ou du composant pour ne pas générer un tel fichier).  La déclaration du composant est ajoutée dans le module auquel il appartient (par défaut AppModule), et, si --export est utilisée, il est exporté. 8
Interaction composant-Vue  La partie de l’écran contrôlée par le composant est appelée vue.  La logique du composant est définie dans sa classe. Elle spécifie comment le composant contrôle la vue.  La classe du composant interagit avec la vue à travers les propriétés et les méthodes. ◼ Exemple : la classe du composant HomeProductsComponent possède une propriété produits qui est un tableau d’objets de type Produit, ce tableau est utilisé dans le template de ce composant pour afficher la liste des produits dans la vue. 9
Modules Angular  Applications web modulaires pour ◼ mieux structurer le code, ◼ faciliter la maintenance, ◼ permettre la réutilisation et le partage.  Un module Angular (NgModule) est un mécanisme permettant de regrouper des composants, des services, directives, pipes etc..., définir leurs dépendances, et définir leur visibilité.  Un NgModule peut importer des fonctionnalités exportées depuis d'autres NgModules et exporter quelques fonctionnalités pour que d'autres NgModules puissent les utiliser. 10
Le module racine–AppModule  Chaque application Angular comprend au moins un module : le module racine ou root, appelé conventionnellement AppModule. ◼ Fichier : app.module.ts  La plupart des applications ont plusieurs modules. ◼ Les modules sont généralement imbriqués pour former un arbre dont le root module AppModule est la racine. ◼ Chaque module est défini par un fichier : nom-mod.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, AppRoutingModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { }  Fichier app.module.ts ◼ Décorateur pour module : @NgModule ◼ bootstrap : définit le composant racine de l’application 11
Création d’un module  Commande de création de module ◼ ng generate module <nom-module> ◼ ng g m <nom-module>  Spécifier un chemin relatif à src/app  Exemple d’options : ◼ --flat : ne pas créer de dossier pour le module ◼ --module=<nom-module> : pour spécifier le module parent du nouveau module (par défaut le module n’as pas de parent).  Peut aussi s’écrire : --module <nom-module> ◼ --routing : pour générer, en plus du module, un module de routage associé 12
Création d’un module (2)  Si on génère un module mod1 ◼ dans le code il aura pour nom : Mod1Module ◼ le fichier créé est mod1.module.ts  Si un parent est spécifié (à l’aide de l’option --module), la déclaration de Mod1Module est ajoutée dans le module père.  Si l’option --routing est utilisée ◼ un autre module est aussi généré : Mod1RoutingModule. ◼ ce dernier est importé dans Mod1Module. ◼ Mod1RoutingModule sera utilisé pour le routage. 13
Conclusion  A la création d’une nouvelle application (ng new …) ◼ AppComponent et AppModule seront générés automatiquement ◼ Si l’option --routing est utilisée avec ng new, AppRoutingModule sera aussi généré automatiquement  La création d’un nouveau module se fera en utilisant la commande ng generate module  La création d’un nouveau composant se fera en utilisant la commande ng generate component 14

Check these out next

Chapitre 1-Composants et Modules.pdf

Recomendados

Más contenido relacionado

Similar a Chapitre 1-Composants et Modules.pdf(20)

Más de BoubakerMedanas(7)

Último(20)

Chapitre 1-Composants et Modules.pdf