SlideShare une entreprise Scribd logo
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Veille technologique : 2018Préparer et élaborer par : Mahmoud Nbet
Version: 1.0
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Angular est le Framework qui nous fournira
beaucoup de flexibilité et de puissance lors de la
création de nos applications.
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
23/01/2018
Performance
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
L’utilisation de tous les nouveaux standards du
web, et plus encore
Custom
Elements
Templates HTML
Shadow DOM
Imports
HTML
Module JS
Export / Import
Promesses
Observables
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
23/01/2018
Demo1
webComponent
shadowDom
TemplatesHTML
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
LesconceptsdeAngular
Dans la suite de cette
présentation, on va découvrir
les différents composant et
fonctionnalités proposés par
Angular.
Les Modules
Les Composants
Les Services
Les Directives
Les Pipes
Les Routes
Les Modèles
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Vue
Contrôleur
Pipes
Services
Modèles
Interfaces
UnearchitectureMV*
Module
Composant
API
Serveur
Schéma d’une structure d’une application Angular
Directives
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
UnearchitectureMV*
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Lesmodules
Un module désigne un ensemble indépendant de
fonctionnalités d’une application.
Un module peut contenir des composants, services,
pipes, styles, templates et d’autres modules.
Attention : il ne faut pas
confondre Module et Module !
Un module se matérialise par une classe
portant le décorateur @NgModule
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Voici donc la version la plus simple de déclaration
du module principal Angular AppModule
Lesmodules
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Ledecorateur@NgModule
@NgModule prend en paramètre un unique objet possédant
diverses propriétés dont les principales sont :
• declarations: on déclare les classes de vue de notre module.
Par classes de vue, il faut comprendre components, directives et
pipes;
• exports: Cette propriété permet de déclarer le sous-ensemble de
déclaration qui sera visible par les autres modules;
• imports : Cette propriété permet de déclarer les modules dont
dépend notre module;
• providers : on déclarer les services que vous allez créer dans le
cadre de ce module. Ces services contribueront à alimenter la
collection globale des services accessibles par tous les composants
de l'application;
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Ledecorateur@NgModule
• bootstrap : Définit le root component qui contiendra l'ensemble
des autres components. Seul le root module peut déclarer cette
propriété;
• schemas : Les éléments et propriétés qui ne sont pas des
components ou directive Angular qui sont à déclarer dans le
schéma des Méta-Données. Les valeurs possibles sont
NO_ERRORS_SCHEMA et CUSTOM_ELEMENTS_SCHEMA;
• entryComponents – Cette propriété permet de déclarer tous les
components qui sont chargés impérativement, c'est-à-dire
dynamiquement sans être déclarés dans un template. C'est par
exemple le cas du component qui est chargé lors du bootstrap de
l'application (il est déclaré dans le fichier index.html qui n'est donc
pas un template) ou des components chargés par le router.
Heureusement, Angular fait le travail pour vous dans ces deux cas;
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Lescomposants
Un composant est un élément réutilisable
de l’application, constitué d’une vue, une
feuille de style et d’un ensemble de
traitements « logique » associés à cette vue.
Vue
Style
Logique
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Lescomposants
Voici donc un composant qui affiche “Hello
world” à l’écran.
import { Component } from '@angular/core';
@Component({
selector: ‘hello-world',
template: `
<p>{{ message }}.</p>
`
})
export class HelloWorldComponent {
public message:string;
constructor (){
this.message = ‘Hello world’;
}
}
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Lescomposants
Un composant se matérialise par une classe
portant le décorateur @Component qui prend en
paramètre les meta-data qui vont décorer notre
classe.
• selector: nom de balise HTML personnalisé
Dans notre cas <hello-world></hello-world>
• template: Code HTML du composant
qui sera présenté à l’utilisateur
• style: Code CSS privé au composant associé
• templateUrl / styleUrls : chemin du fichier HTML / CSS
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
LesDirectives
Les directives sont des éléments qui aident à
réaliser des pages HTML de manière
dynamique.
Il existe deux types
<li *ngFor="let story of stories"></li>
<story *ngIf="selectedStory"></story>
Structurelles
modifient la structure d’un template
HTML
Attributs
modifient l’apparence ou le comportement
d’éléments
<div [ngClass]="currentClasses">This div
is initially</div>
<div [ngClass]=“{ ‘active’ : curr
div is initially</div>
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Lesservices
Les composants ne doivent pas manipuler des
données directement et ils ne devraient certainement
pas présenter de fausses données. Ils devraient se
concentrer sur la présentation des données et
déléguer l'accès aux données à un service.
Factorisation de code métier
• Toute code présent et dupliqué entre deux composants doit être centralisé
dans un service.
• La taille des contrôleur doit être la plus petite possible.
Injectable
• une instance de service est utilisable par les composants et les autres
services.
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Lesservices
import { Injectable } from "@angular/core";
@Injectable ()
export class HelloService {
constructor (){
}
}
Voici une version la plus simple de la déclaration
d’un service.
On identifie un service injectable avec le
décorateur @Injectable()
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Lesmodèles/Lesinterfaces
• Les modèles permet de Structure des données
utilisées par l’application.
NB : ils ne continent
pas du code métierexport interface chapter {
title: string;
content: string;
}
import { Chapter } from "./chapter";
export interface Story {
title: string;
chapters: Array<Chapter>;
}
import { Injectable } from "@angular/core";
import { Story } from "./story";
@Injectable ()
export class HelloService {
stories:Array<Story> = [] ;
constructor (){}
}
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Lespipes
• Les pipes permettent de transformer
dynamiquement les valeurs affichées dans le
HTML.
{{ price | currency:'USD':true }}
import {Pipe, PipeTransform} from "@angular/core";
@Pipe({name: “truncate"})
export class truncatePipe implements PipeTransform {
transform(value:string, length:number): string {
return value.substring(0,length);
}
}
• Voici comment déclaration d’un pipe.
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
LetemplateHTML
Dans Angular, un template HTML décrit la
structure du DOM d’un composant.
• Il peut être composé des balises HTML
standards, de composants, directives et il
peut utiliser des pipes pour modifier
l’affichage de certaines données.
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
LetemplateHTML:Expressions/Attributs
Un template HTML Angular est lié de manière
dynamique à des variables et des fonctions
issues du contrôleur du composant auquel il est
associé.
<h1>{{title | uppercase }}</h1>
<span (click)="loadMore()" >Show more</span>
Il existe deux types de ce liaison:
• Liaison de données
• Liaison des propriétés
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
LetemplateHTML:Liaisonsde
données
Les 4 méthodes de liaison de données
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
LetemplateHTML:Liaisonde
propriété
Cette liaison s’applique sur les propriétés du
DOM comme : value, hidden, src, alt, …
<img [src]="vehicle.imageUrl« >
<span [ngClass]="{selected: isSelected}"></span>
<button
[attr.data-label]="ok">OK</button>
<button [disabled]="isUnchanged">Cancel</button>
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Structured’uneapplication
• Une application Angular 2 peut être vue
comme un arbre de composants imbriqués. A
la racine de cet arbre se trouve le composant
principal qui va être utilisé pour démarrer
l’application.
Composant
principale
Composant 1
Composant 3 Composant 4 Composant 5
Composant 2
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Liaisondepropriété
surunepropriétéd'uncomponent
• @Input / @Output est une syntaxe alternative
utiliser pour définir les propriétés d'entrée et les
événements de sortie dans un composant
Composant 1
Composant 2
propriétés d'entrée
@Input
événements de sortie
@Output
Attention : ne pas oublier d’importer le composant Input depuis
le noyau Angular
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Liaisondepropriété
surunepropriétéd'uncomponent
import { Component } from '@angular/core';
@Component({
selector: ‘my-size',
template: `
<div><button (click)="dec()" title="plus petit">-</button>
<button (click)="inc()" title="plus grand">+</button>
<em [style.font-size.px]="taille">FontSize: {{taille}}px</em></div>`
})
export class mySizeComponent {
@Input() size: number;
@Output() onSizeChange = new EventEmitter<number>();
dec() { this.resize(-1); }
inc() { this.resize(+1); }
resize(delta: number) {
this.size += delta;
this.onSizeChange.emit(this.size);
}
}
<my-size
(onSizeChange)="onSizeChange($event)"
[size]="sizeVal" ></my-size>
HTML
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Lesformulaires
• Angular Reactive Form
import {FormsModule, ReactiveFormsModule } from "@angular/forms";
import * as configs from "./shared/config";
@NgModule({
declarations: [],
providers: [],
imports: [
FormsModule,
ReactiveFormsModule
],
bootstrap: [AppComponent]
}) export class AppModule {}
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Lesformulaires
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
export class AddProductComponent implements OnInit {
rForm: FormGroup;
constructor(
private fb: FormBuilder,
private router: Router,
private productsService: ProductsService) {
this.rForm = fb.group({
'name': [null, Validators.required],
'price': [null, Validators.compose([
Validators.required,
Validators.pattern("[0-9]*")])],
'description': [null, Validators.compose([
Validators.required,
Validators.minLength(20)])],
});
}
}
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
LeRouting
• Sample code
import { RouterModule } from "@angular/router";
import * as configs from "./shared/config";
@NgModule({
declarations: [],
providers: [],
imports: [
RouterModule.forRoot(configs.routes)
],
bootstrap: [AppComponent]
}) export class AppModule {}
import {Routes} from "@angular/router";
export const routes: Routes = [
{ path: '', redirectTo: "home", pathMatch: 'full' },
{ path: ‘home', component: homeComponent},
{
path: 'map',
component: MapComponent,
children: [
{ path: ':stationId', component: StationComponent },
]
}
];
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
router-link/router-outlet
@View({
template: `
<div>
<nav>
<a>Navigation:</a>
<ul>
<li><a router-link="/home">Home</a></li>
<li><a router-link="/about">About</a></li>
<li><a router-link="/map">Map</a></li>
</ul>
</nav>
<router-outlet></router-outlet>
</div>
`
})
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
AngularPackages/angulardépendances
angular/quickstart
npm install
@angular/core
@angular/common
@angular/compiler
@angular/platform-browser
@angular/platform-browser-dynamic
@angular/forms
@angular/http
@angular/router --save
npm install
core-js
reflect-metadata
zone.js
rxjs
systemjs --save
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Pourcommencer
• Pour utiliser « Angular CLI » sur vos projets, vous
pouvez l’installer via NPM.
ng new ng-demo
cd ng-demo
ng serve
npm install -g @angular/cli@latest
• Cela va exécuter un serveur local, par défaut sur
« http://localhost:4200 »
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
AngularCLI:Commandes
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module
« ng generate » et la commande qui permet de
générer des chose utiles comme des composants, des
routes, des pipes, des services et des directives.
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
23/01/2018
Demo2
Miniapplicationavec«AngularCLI»
© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit

Contenu connexe

Tendances

Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Jean-Baptiste Vigneron
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
Aymen Sellaouti
 
Angular 2
Angular 2Angular 2
Angular 2
Zoubir REMILA
 
React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
Jaouad Assabbour
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
Vincent Caillierez
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
RadhoueneRouached
 
Cours design pattern m youssfi partie 6 proxy
Cours design pattern m youssfi partie 6 proxyCours design pattern m youssfi partie 6 proxy
Cours design pattern m youssfi partie 6 proxy
ENSET, Université Hassan II Casablanca
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
Aymen Sellaouti
 
Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)
Eric SIBER
 
Workshop spring session 2 - La persistance au sein des applications Java
Workshop spring   session 2 - La persistance au sein des applications JavaWorkshop spring   session 2 - La persistance au sein des applications Java
Workshop spring session 2 - La persistance au sein des applications Java
Antoine Rey
 
Cours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observerCours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observer
ENSET, Université Hassan II Casablanca
 
Ingénieur FullStack Java/Angular
Ingénieur FullStack Java/Angular  Ingénieur FullStack Java/Angular
Ingénieur FullStack Java/Angular
Maroua Haddad
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event Handling
WebStackAcademy
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
Antoine Rey
 
Spring ioc
Spring iocSpring ioc
Spring ioc
Lhouceine OUHAMZA
 
NestJS
NestJSNestJS
NestJS
Wilson Su
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Abdoulaye Dieng
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web services
Lilia Sfaxi
 
Introduction à ASP.NET
Introduction à ASP.NETIntroduction à ASP.NET
Introduction à ASP.NET
Abdelouahed Abdou
 

Tendances (20)

Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
 
Angular 2
Angular 2Angular 2
Angular 2
 
React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
Cours design pattern m youssfi partie 6 proxy
Cours design pattern m youssfi partie 6 proxyCours design pattern m youssfi partie 6 proxy
Cours design pattern m youssfi partie 6 proxy
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
 
Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)Spring Meetup Paris - Back to the basics of Spring (Boot)
Spring Meetup Paris - Back to the basics of Spring (Boot)
 
Workshop spring session 2 - La persistance au sein des applications Java
Workshop spring   session 2 - La persistance au sein des applications JavaWorkshop spring   session 2 - La persistance au sein des applications Java
Workshop spring session 2 - La persistance au sein des applications Java
 
Cours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observerCours design pattern m youssfi partie 2 observer
Cours design pattern m youssfi partie 2 observer
 
Ingénieur FullStack Java/Angular
Ingénieur FullStack Java/Angular  Ingénieur FullStack Java/Angular
Ingénieur FullStack Java/Angular
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event Handling
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
Spring ioc
Spring iocSpring ioc
Spring ioc
 
NestJS
NestJSNestJS
NestJS
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web services
 
Introduction à ASP.NET
Introduction à ASP.NETIntroduction à ASP.NET
Introduction à ASP.NET
 

Similaire à Angular

HTML 5
HTML 5HTML 5
HTML 5
Mahmoud Nbet
 
TypeScript
TypeScriptTypeScript
TypeScript
Mahmoud Nbet
 
Intégration graphique en XHTML / CSS
Intégration graphique en XHTML / CSSIntégration graphique en XHTML / CSS
Intégration graphique en XHTML / CSS
Mahmoud Nbet
 
Préprocesseurs css
Préprocesseurs cssPréprocesseurs css
Préprocesseurs css
Mahmoud Nbet
 
FR_2014_Case Study_Synerail_Final
FR_2014_Case Study_Synerail_FinalFR_2014_Case Study_Synerail_Final
FR_2014_Case Study_Synerail_Final
Olivier Frei
 
Wicket - JUG Lausanne
Wicket - JUG LausanneWicket - JUG Lausanne
Wicket - JUG Lausanne
Christian Blavier
 
I3M- Airbus Visite Virtuelle
I3M- Airbus Visite VirtuelleI3M- Airbus Visite Virtuelle
I3M- Airbus Visite Virtuelle
I3M Aérospace Multimédia
 
web application security
web application securityweb application security
web application security
Marcel TCHOULEGHEU
 
Titaa formation-titanium-appcelerator
Titaa formation-titanium-appceleratorTitaa formation-titanium-appcelerator
Titaa formation-titanium-appcelerator
CERTyou Formation
 
De l'espace du projet partagée Jumelage-Tunisie à l'Intranet des ODR
De l'espace du projet partagée Jumelage-Tunisie à l'Intranet des ODRDe l'espace du projet partagée Jumelage-Tunisie à l'Intranet des ODR
De l'espace du projet partagée Jumelage-Tunisie à l'Intranet des ODR
Mario Marcello Verona
 
i3M- La Poste- CDRom Formation 2
i3M- La Poste- CDRom Formation 2i3M- La Poste- CDRom Formation 2
i3M- La Poste- CDRom Formation 2
I3M Aérospace Multimédia
 
Gab17 lyon-rex build dev ops sur une infra iaas-paas multisite-by-matthieupetite
Gab17 lyon-rex build dev ops sur une infra iaas-paas multisite-by-matthieupetiteGab17 lyon-rex build dev ops sur une infra iaas-paas multisite-by-matthieupetite
Gab17 lyon-rex build dev ops sur une infra iaas-paas multisite-by-matthieupetite
AZUG FR
 
Occox by Demtech - le M2M en action
Occox by Demtech - le M2M en actionOccox by Demtech - le M2M en action
Occox by Demtech - le M2M en action
Pascale Demartini
 
Présentation de la plateforme Cloud Simplicité
Présentation de la plateforme Cloud SimplicitéPrésentation de la plateforme Cloud Simplicité
Présentation de la plateforme Cloud Simplicité
Simplicité Software
 
I3M- Airbus- Etraining Composants Aéronautiques
I3M- Airbus- Etraining Composants AéronautiquesI3M- Airbus- Etraining Composants Aéronautiques
I3M- Airbus- Etraining Composants Aéronautiques
I3M Aérospace Multimédia
 
Rapport version finale kouakou aboua pokou alexis
Rapport version finale kouakou aboua pokou alexis Rapport version finale kouakou aboua pokou alexis
Rapport version finale kouakou aboua pokou alexis
abouaalexis
 
I3M- Airbus: Migration Cours Design
I3M- Airbus: Migration Cours DesignI3M- Airbus: Migration Cours Design
I3M- Airbus: Migration Cours Design
I3M Aérospace Multimédia
 
Projet Airbus A380-800: Visite Virtuelle
Projet Airbus A380-800: Visite VirtuelleProjet Airbus A380-800: Visite Virtuelle
Projet Airbus A380-800: Visite Virtuelle
I3M Aérospace Multimédia
 
Implémentation d’un gestionnaire de parc automobile
 Implémentation d’un gestionnaire de parc automobile Implémentation d’un gestionnaire de parc automobile
Implémentation d’un gestionnaire de parc automobile
Afaf MATOUG
 
Stage GFC Atlantic
Stage GFC AtlanticStage GFC Atlantic
Stage GFC Atlantic
Arthur Backouche
 

Similaire à Angular (20)

HTML 5
HTML 5HTML 5
HTML 5
 
TypeScript
TypeScriptTypeScript
TypeScript
 
Intégration graphique en XHTML / CSS
Intégration graphique en XHTML / CSSIntégration graphique en XHTML / CSS
Intégration graphique en XHTML / CSS
 
Préprocesseurs css
Préprocesseurs cssPréprocesseurs css
Préprocesseurs css
 
FR_2014_Case Study_Synerail_Final
FR_2014_Case Study_Synerail_FinalFR_2014_Case Study_Synerail_Final
FR_2014_Case Study_Synerail_Final
 
Wicket - JUG Lausanne
Wicket - JUG LausanneWicket - JUG Lausanne
Wicket - JUG Lausanne
 
I3M- Airbus Visite Virtuelle
I3M- Airbus Visite VirtuelleI3M- Airbus Visite Virtuelle
I3M- Airbus Visite Virtuelle
 
web application security
web application securityweb application security
web application security
 
Titaa formation-titanium-appcelerator
Titaa formation-titanium-appceleratorTitaa formation-titanium-appcelerator
Titaa formation-titanium-appcelerator
 
De l'espace du projet partagée Jumelage-Tunisie à l'Intranet des ODR
De l'espace du projet partagée Jumelage-Tunisie à l'Intranet des ODRDe l'espace du projet partagée Jumelage-Tunisie à l'Intranet des ODR
De l'espace du projet partagée Jumelage-Tunisie à l'Intranet des ODR
 
i3M- La Poste- CDRom Formation 2
i3M- La Poste- CDRom Formation 2i3M- La Poste- CDRom Formation 2
i3M- La Poste- CDRom Formation 2
 
Gab17 lyon-rex build dev ops sur une infra iaas-paas multisite-by-matthieupetite
Gab17 lyon-rex build dev ops sur une infra iaas-paas multisite-by-matthieupetiteGab17 lyon-rex build dev ops sur une infra iaas-paas multisite-by-matthieupetite
Gab17 lyon-rex build dev ops sur une infra iaas-paas multisite-by-matthieupetite
 
Occox by Demtech - le M2M en action
Occox by Demtech - le M2M en actionOccox by Demtech - le M2M en action
Occox by Demtech - le M2M en action
 
Présentation de la plateforme Cloud Simplicité
Présentation de la plateforme Cloud SimplicitéPrésentation de la plateforme Cloud Simplicité
Présentation de la plateforme Cloud Simplicité
 
I3M- Airbus- Etraining Composants Aéronautiques
I3M- Airbus- Etraining Composants AéronautiquesI3M- Airbus- Etraining Composants Aéronautiques
I3M- Airbus- Etraining Composants Aéronautiques
 
Rapport version finale kouakou aboua pokou alexis
Rapport version finale kouakou aboua pokou alexis Rapport version finale kouakou aboua pokou alexis
Rapport version finale kouakou aboua pokou alexis
 
I3M- Airbus: Migration Cours Design
I3M- Airbus: Migration Cours DesignI3M- Airbus: Migration Cours Design
I3M- Airbus: Migration Cours Design
 
Projet Airbus A380-800: Visite Virtuelle
Projet Airbus A380-800: Visite VirtuelleProjet Airbus A380-800: Visite Virtuelle
Projet Airbus A380-800: Visite Virtuelle
 
Implémentation d’un gestionnaire de parc automobile
 Implémentation d’un gestionnaire de parc automobile Implémentation d’un gestionnaire de parc automobile
Implémentation d’un gestionnaire de parc automobile
 
Stage GFC Atlantic
Stage GFC AtlanticStage GFC Atlantic
Stage GFC Atlantic
 

Angular

  • 1. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Veille technologique : 2018Préparer et élaborer par : Mahmoud Nbet Version: 1.0
  • 2. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Angular est le Framework qui nous fournira beaucoup de flexibilité et de puissance lors de la création de nos applications.
  • 3. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit 23/01/2018 Performance
  • 4. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit L’utilisation de tous les nouveaux standards du web, et plus encore Custom Elements Templates HTML Shadow DOM Imports HTML Module JS Export / Import Promesses Observables
  • 5. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit 23/01/2018 Demo1 webComponent shadowDom TemplatesHTML
  • 6. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit LesconceptsdeAngular Dans la suite de cette présentation, on va découvrir les différents composant et fonctionnalités proposés par Angular. Les Modules Les Composants Les Services Les Directives Les Pipes Les Routes Les Modèles
  • 7. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Vue Contrôleur Pipes Services Modèles Interfaces UnearchitectureMV* Module Composant API Serveur Schéma d’une structure d’une application Angular Directives
  • 8. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit UnearchitectureMV*
  • 9. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Lesmodules Un module désigne un ensemble indépendant de fonctionnalités d’une application. Un module peut contenir des composants, services, pipes, styles, templates et d’autres modules. Attention : il ne faut pas confondre Module et Module ! Un module se matérialise par une classe portant le décorateur @NgModule
  • 10. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Voici donc la version la plus simple de déclaration du module principal Angular AppModule Lesmodules import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
  • 11. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Ledecorateur@NgModule @NgModule prend en paramètre un unique objet possédant diverses propriétés dont les principales sont : • declarations: on déclare les classes de vue de notre module. Par classes de vue, il faut comprendre components, directives et pipes; • exports: Cette propriété permet de déclarer le sous-ensemble de déclaration qui sera visible par les autres modules; • imports : Cette propriété permet de déclarer les modules dont dépend notre module; • providers : on déclarer les services que vous allez créer dans le cadre de ce module. Ces services contribueront à alimenter la collection globale des services accessibles par tous les composants de l'application;
  • 12. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Ledecorateur@NgModule • bootstrap : Définit le root component qui contiendra l'ensemble des autres components. Seul le root module peut déclarer cette propriété; • schemas : Les éléments et propriétés qui ne sont pas des components ou directive Angular qui sont à déclarer dans le schéma des Méta-Données. Les valeurs possibles sont NO_ERRORS_SCHEMA et CUSTOM_ELEMENTS_SCHEMA; • entryComponents – Cette propriété permet de déclarer tous les components qui sont chargés impérativement, c'est-à-dire dynamiquement sans être déclarés dans un template. C'est par exemple le cas du component qui est chargé lors du bootstrap de l'application (il est déclaré dans le fichier index.html qui n'est donc pas un template) ou des components chargés par le router. Heureusement, Angular fait le travail pour vous dans ces deux cas;
  • 13. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Lescomposants Un composant est un élément réutilisable de l’application, constitué d’une vue, une feuille de style et d’un ensemble de traitements « logique » associés à cette vue. Vue Style Logique
  • 14. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Lescomposants Voici donc un composant qui affiche “Hello world” à l’écran. import { Component } from '@angular/core'; @Component({ selector: ‘hello-world', template: ` <p>{{ message }}.</p> ` }) export class HelloWorldComponent { public message:string; constructor (){ this.message = ‘Hello world’; } }
  • 15. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Lescomposants Un composant se matérialise par une classe portant le décorateur @Component qui prend en paramètre les meta-data qui vont décorer notre classe. • selector: nom de balise HTML personnalisé Dans notre cas <hello-world></hello-world> • template: Code HTML du composant qui sera présenté à l’utilisateur • style: Code CSS privé au composant associé • templateUrl / styleUrls : chemin du fichier HTML / CSS
  • 16. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit LesDirectives Les directives sont des éléments qui aident à réaliser des pages HTML de manière dynamique. Il existe deux types <li *ngFor="let story of stories"></li> <story *ngIf="selectedStory"></story> Structurelles modifient la structure d’un template HTML Attributs modifient l’apparence ou le comportement d’éléments <div [ngClass]="currentClasses">This div is initially</div> <div [ngClass]=“{ ‘active’ : curr div is initially</div>
  • 17. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Lesservices Les composants ne doivent pas manipuler des données directement et ils ne devraient certainement pas présenter de fausses données. Ils devraient se concentrer sur la présentation des données et déléguer l'accès aux données à un service. Factorisation de code métier • Toute code présent et dupliqué entre deux composants doit être centralisé dans un service. • La taille des contrôleur doit être la plus petite possible. Injectable • une instance de service est utilisable par les composants et les autres services.
  • 18. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Lesservices import { Injectable } from "@angular/core"; @Injectable () export class HelloService { constructor (){ } } Voici une version la plus simple de la déclaration d’un service. On identifie un service injectable avec le décorateur @Injectable()
  • 19. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Lesmodèles/Lesinterfaces • Les modèles permet de Structure des données utilisées par l’application. NB : ils ne continent pas du code métierexport interface chapter { title: string; content: string; } import { Chapter } from "./chapter"; export interface Story { title: string; chapters: Array<Chapter>; } import { Injectable } from "@angular/core"; import { Story } from "./story"; @Injectable () export class HelloService { stories:Array<Story> = [] ; constructor (){} }
  • 20. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Lespipes • Les pipes permettent de transformer dynamiquement les valeurs affichées dans le HTML. {{ price | currency:'USD':true }} import {Pipe, PipeTransform} from "@angular/core"; @Pipe({name: “truncate"}) export class truncatePipe implements PipeTransform { transform(value:string, length:number): string { return value.substring(0,length); } } • Voici comment déclaration d’un pipe.
  • 21. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit LetemplateHTML Dans Angular, un template HTML décrit la structure du DOM d’un composant. • Il peut être composé des balises HTML standards, de composants, directives et il peut utiliser des pipes pour modifier l’affichage de certaines données.
  • 22. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit LetemplateHTML:Expressions/Attributs Un template HTML Angular est lié de manière dynamique à des variables et des fonctions issues du contrôleur du composant auquel il est associé. <h1>{{title | uppercase }}</h1> <span (click)="loadMore()" >Show more</span> Il existe deux types de ce liaison: • Liaison de données • Liaison des propriétés
  • 23. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit LetemplateHTML:Liaisonsde données Les 4 méthodes de liaison de données
  • 24. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit LetemplateHTML:Liaisonde propriété Cette liaison s’applique sur les propriétés du DOM comme : value, hidden, src, alt, … <img [src]="vehicle.imageUrl« > <span [ngClass]="{selected: isSelected}"></span> <button [attr.data-label]="ok">OK</button> <button [disabled]="isUnchanged">Cancel</button>
  • 25. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Structured’uneapplication • Une application Angular 2 peut être vue comme un arbre de composants imbriqués. A la racine de cet arbre se trouve le composant principal qui va être utilisé pour démarrer l’application. Composant principale Composant 1 Composant 3 Composant 4 Composant 5 Composant 2
  • 26. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Liaisondepropriété surunepropriétéd'uncomponent • @Input / @Output est une syntaxe alternative utiliser pour définir les propriétés d'entrée et les événements de sortie dans un composant Composant 1 Composant 2 propriétés d'entrée @Input événements de sortie @Output Attention : ne pas oublier d’importer le composant Input depuis le noyau Angular
  • 27. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Liaisondepropriété surunepropriétéd'uncomponent import { Component } from '@angular/core'; @Component({ selector: ‘my-size', template: ` <div><button (click)="dec()" title="plus petit">-</button> <button (click)="inc()" title="plus grand">+</button> <em [style.font-size.px]="taille">FontSize: {{taille}}px</em></div>` }) export class mySizeComponent { @Input() size: number; @Output() onSizeChange = new EventEmitter<number>(); dec() { this.resize(-1); } inc() { this.resize(+1); } resize(delta: number) { this.size += delta; this.onSizeChange.emit(this.size); } } <my-size (onSizeChange)="onSizeChange($event)" [size]="sizeVal" ></my-size> HTML
  • 28. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Lesformulaires • Angular Reactive Form import {FormsModule, ReactiveFormsModule } from "@angular/forms"; import * as configs from "./shared/config"; @NgModule({ declarations: [], providers: [], imports: [ FormsModule, ReactiveFormsModule ], bootstrap: [AppComponent] }) export class AppModule {}
  • 29. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Lesformulaires import { FormBuilder, FormGroup, Validators } from "@angular/forms"; export class AddProductComponent implements OnInit { rForm: FormGroup; constructor( private fb: FormBuilder, private router: Router, private productsService: ProductsService) { this.rForm = fb.group({ 'name': [null, Validators.required], 'price': [null, Validators.compose([ Validators.required, Validators.pattern("[0-9]*")])], 'description': [null, Validators.compose([ Validators.required, Validators.minLength(20)])], }); } }
  • 30. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit LeRouting • Sample code import { RouterModule } from "@angular/router"; import * as configs from "./shared/config"; @NgModule({ declarations: [], providers: [], imports: [ RouterModule.forRoot(configs.routes) ], bootstrap: [AppComponent] }) export class AppModule {} import {Routes} from "@angular/router"; export const routes: Routes = [ { path: '', redirectTo: "home", pathMatch: 'full' }, { path: ‘home', component: homeComponent}, { path: 'map', component: MapComponent, children: [ { path: ':stationId', component: StationComponent }, ] } ];
  • 31. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit router-link/router-outlet @View({ template: ` <div> <nav> <a>Navigation:</a> <ul> <li><a router-link="/home">Home</a></li> <li><a router-link="/about">About</a></li> <li><a router-link="/map">Map</a></li> </ul> </nav> <router-outlet></router-outlet> </div> ` })
  • 32. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit AngularPackages/angulardépendances angular/quickstart npm install @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser-dynamic @angular/forms @angular/http @angular/router --save npm install core-js reflect-metadata zone.js rxjs systemjs --save
  • 33. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit
  • 34. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit Pourcommencer • Pour utiliser « Angular CLI » sur vos projets, vous pouvez l’installer via NPM. ng new ng-demo cd ng-demo ng serve npm install -g @angular/cli@latest • Cela va exécuter un serveur local, par défaut sur « http://localhost:4200 »
  • 35. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit AngularCLI:Commandes Component ng g component my-new-component Directive ng g directive my-new-directive Pipe ng g pipe my-new-pipe Service ng g service my-new-service Class ng g class my-new-class Guard ng g guard my-new-guard Interface ng g interface my-new-interface Enum ng g enum my-new-enum Module ng g module my-module « ng generate » et la commande qui permet de générer des chose utiles comme des composants, des routes, des pipes, des services et des directives.
  • 36. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit 23/01/2018 Demo2 Miniapplicationavec«AngularCLI»
  • 37. © Proxym-IT Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com http://twitter.com/proxymit

Notes de l'éditeur

  1. https://github.com/scotch-io/angular2-starter-basic
  2. ## Web Components : HTML5 les Custom Elements : pour créer et enregistrer de nouveaux éléments HTML et les faire reconnaître par le navigateur, les templates HTML : qui sont des squelettes pour des éléments HTML instanciables, le shadow DOM : qui permet d’encapsuler le javascript, le CSS et le template en dehors du DOM principal. Permettant notamment d’éviter les fuites de CSS d’un élément à un autre. les imports HTML : pour packager ses composants (HTML, CSS, JavaScript, etc.) ## Style : CSS ## nouveaux standards pour le Javascript du futur : ES6, 7, 8 …
  3. Une application Angular possède au moins un module, le root module, nommé par convention « AppModule ».
  4. Ce que ce code nous dit : - que AppModule importe le module BrowserModule comme dépendance. Cet import est nécessaire pour exécuter une application Angular sur un Browser; - que AppModule déclare le component AppComponent qui sera donc le Component root de l'application; - qu'au démarrage de l'application, le (unique) component AppComponent sera lancé. Pour le root module, il est clair que le component déclaré sera celui qui sera lancé.
  5. De nombreux changements ont été apportés à partir de la version 2 du « Angular ». mais l’innovation majeure est le nouveau modèle orienté composants. il s’agit d’une classe qui expose une vue et définit la manière dont l’utilisateur peut interagir avec elle.
  6. Nous avons donc la classe HelloWorldComponent qui possède un attribut message de type string et dont la valeur est initialisée à “Hello world”. Pour que Angular 2 considère notre classe comme un composant et puisse construire la vue associée, nous devons lui ajouter des metadata.
  7. Une directive est définie par le décorateur @Directive
  8. D’après Angular, un service est un composant tiers contenant du code métier. Cette définition floue laisse libre au développeur l’interprétation du terme service.
  9. Interpolation de chaîne (String Interpolation) Liaison de propriété (Property Binding) Liaison d’événement (Event Binding) Liaison bilatérale (Two-Way Binding)
  10. Interpolation de chaîne (String Interpolation) Liaison de propriété (Property Binding) Liaison d’événement (Event Binding) Liaison bilatérale (Two-Way Binding)
  11. core-js client/shim: Adds es6 features to browsers that don't have them zone.js: An execution context. Helps with change detection and showing errors. Anyone from angular 1 will know that seeing console errors and trying to debug was near impossible. Provides stack traces. Helps Angular run change detection throughout our app. reflect-metadata: Polyfill for decorator metadata. Used to apply decorators to our code (Component is a decorator). A clean way of adding metadata to our classes. rxjs: Libraries that help create asynchronous data streams. Gives us Observables. The Angular 2 http library uses these heavily and is the preferred way of handling async events in Angular 2. https://github.com/angular/quickstart
  12. Angular CLI (iframe : https://cli.angular.io/) est un outil développé par l’équipe Angular de Google afin d’initialiser, de développer et de maintenir des applications Angular.