SlideShare una empresa de Scribd logo
1 de 14
Descargar para leer sin conexión
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

Más contenido relacionado

Similar a Chapitre 1-Composants et Modules.pdf

Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?Maxime Bernard
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Tarik Zakaria Benmerar
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2Laurent Duveau
 
cours-gratuit.com--id-12477.pdf
cours-gratuit.com--id-12477.pdfcours-gratuit.com--id-12477.pdf
cours-gratuit.com--id-12477.pdfssuser192642
 
Angluars js
Angluars jsAngluars js
Angluars jsRYMAA
 
Workshop angular2
Workshop angular2 Workshop angular2
Workshop angular2 sihemhcine
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJsRadhoueneRouached
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuPublicis Sapient Engineering
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniterAtsé François-Xavier KOBON
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Martin Latrille
 
Introduction à Symfony2
Introduction à Symfony2Introduction à Symfony2
Introduction à Symfony2Hugo Hamon
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...MOHAMMED MOURADI
 

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

Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
 
Backbonejs presentation
Backbonejs presentationBackbonejs presentation
Backbonejs presentation
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
cours-gratuit.com--id-12477.pdf
cours-gratuit.com--id-12477.pdfcours-gratuit.com--id-12477.pdf
cours-gratuit.com--id-12477.pdf
 
Angluars js
Angluars jsAngluars js
Angluars js
 
Workshop angular2
Workshop angular2 Workshop angular2
Workshop angular2
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
 
Introduction aspnet
Introduction aspnetIntroduction aspnet
Introduction aspnet
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
 
Gwt final
Gwt finalGwt final
Gwt final
 
Introduction à Symfony2
Introduction à Symfony2Introduction à Symfony2
Introduction à Symfony2
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
 
Chapitre-3-Routage.pdf
Chapitre-3-Routage.pdfChapitre-3-Routage.pdf
Chapitre-3-Routage.pdf
 
Chapitre-3-Routage.pdf
Chapitre-3-Routage.pdfChapitre-3-Routage.pdf
Chapitre-3-Routage.pdf
 

Más de BoubakerMedanas

Chap1Concepts-FondamentauxBD.pdf
Chap1Concepts-FondamentauxBD.pdfChap1Concepts-FondamentauxBD.pdf
Chap1Concepts-FondamentauxBD.pdfBoubakerMedanas
 
course1-Intrduction-to-the-game-industry.pdf
course1-Intrduction-to-the-game-industry.pdfcourse1-Intrduction-to-the-game-industry.pdf
course1-Intrduction-to-the-game-industry.pdfBoubakerMedanas
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfBoubakerMedanas
 
Chapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdfChapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdfBoubakerMedanas
 
Chapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdfChapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdfBoubakerMedanas
 

Más de BoubakerMedanas (7)

POO-Cours.pdf
POO-Cours.pdfPOO-Cours.pdf
POO-Cours.pdf
 
Chap-SQL-LID-P1.pdf
Chap-SQL-LID-P1.pdfChap-SQL-LID-P1.pdf
Chap-SQL-LID-P1.pdf
 
Chap1Concepts-FondamentauxBD.pdf
Chap1Concepts-FondamentauxBD.pdfChap1Concepts-FondamentauxBD.pdf
Chap1Concepts-FondamentauxBD.pdf
 
course1-Intrduction-to-the-game-industry.pdf
course1-Intrduction-to-the-game-industry.pdfcourse1-Intrduction-to-the-game-industry.pdf
course1-Intrduction-to-the-game-industry.pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Chapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdfChapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdf
 
Chapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdfChapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdf
 

Chapitre 1-Composants et Modules.pdf

  • 1. 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
  • 2. 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
  • 3. 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
  • 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  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
  • 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  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
  • 10. 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
  • 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 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