Télécharger pour lire hors ligne
![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](https://image.slidesharecdn.com/chapitre1-composantsetmodules-230205190053-eafb8aa2/75/Chapitre-1-Composants-et-Modules-pdf-6-2048.jpg)
![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](https://image.slidesharecdn.com/chapitre1-composantsetmodules-230205190053-eafb8aa2/75/Chapitre-1-Composants-et-Modules-pdf-11-2048.jpg)
Chapitre 1-Composants et Modules.pdf
- 1. Chapitre 1 Composants etModules Ahlem ELHAJ Multimédia et Développement Web – 2ème année – Semestre 1 ISET de Sousse Développement Framework Coté Client - Angular
- 2. Introduction Angular : FrameworkJavaScript 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
- 3. Introduction (2) Grandfrè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
- 4. 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
- 5. Composant racine-AppComponent Uneapplication 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
- 6. 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
- 7. 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
- 8. 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
- 9. Interaction composant-Vue Lapartie 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
- 10. Modules Angular Applicationsweb 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
- 11. 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
- 12. 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
- 13. 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
- 14. Conclusion A lacré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