Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Angular 5 / 6 : introduction Achref El Mouelhi Docteur de l’universit´ e d’Aix-

Angular 5 / 6 : introduction Achref El Mouelhi Docteur de l’universit´ e d’Aix-Marseille Chercheur en Programmation par contrainte (IA) Ing´ enieur en G´ enie logiciel elmouelhi.achref@gmail.com 12-13 Avril 2018, POE m2i 1 / 28 Plan 1 Introduction 2 Installation 3 Cr´ eation et structure d’un projet 4 Afﬁchage d’attribut de type objet ou tableau 5 Directives Angular 12-13 Avril 2018, POE m2i 2 / 28 Introduction Angular Angular Framework JavaScript, open source, pr´ esent´ e par Google en 2009 Permettant de cr´ eer des applications Front-End mono-page utilisant les composants webs Bas´ e sur un concept connu en programmation orient´ ee objet Injection de d´ ependance : consistant ` a utiliser des classes sans faire de l’instanciation statique 12-13 Avril 2018, POE m2i 3 / 28 Introduction Angular Quels langages utilise Angular? HTML pour les vues CSS pour les styles TypeScript : pour les scripts depuis la version 2 12-13 Avril 2018, POE m2i 4 / 28 Introduction Angular TypeScript? langage de programmation orient´ e objet, open source inﬂuenc´ e par C# et JavaScript d´ evelopp´ e et pr´ esent´ e par MicroSoft en 2012 par rapport au JavaScript, il supporte l’ES6 et il permet de : typer les variables d´ eﬁnir des classes et des interfaces utiliser les annotations (les d´ ecorateurs) exporter et importer des modules 12-13 Avril 2018, POE m2i 5 / 28 Introduction Angular Les diff´ erentes versions d’Angular Angular 1 (ou AngularJS) pr´ esent´ e en 2009 : utilisant le JavaScript Angular 2 pr´ esent´ e en octobre 2014 : remplacement du JavaScript par TypeScript Angular 4 pr´ esent´ e en d´ ecembre 2016 Angular 5 pr´ esent´ e en novembre 2017 Angular 6 pr´ esent´ e en mai 2018 12-13 Avril 2018, POE m2i 6 / 28 Installation Angular ´ Etapes T´ el´ echarger et installer NodeJS D´ emarrer une console Lancer la commande npm install -g @angular/cli Red´ emarrer la console Pour v´ eriﬁer l’installation, ex´ ecuter la commande ng -v 12-13 Avril 2018, POE m2i 7 / 28 Cr´ eation et structure d’un projet Angular ´ Etapes Lancer la commande ng new ProjectName Se placer dans le projet cd ProjectName Lancer le projet ng serve --open 12-13 Avril 2018, POE m2i 8 / 28 Cr´ eation et structure d’un projet Angular Arborescence d’un projet Angular e2e : contenant les ﬁchiers permettant de tester l’application node modules : contenant les ﬁchiers n´ ecessaires de la librairie nodeJS src : contenant les ﬁchiers sources de l’application package.json : contenant l’ensemble de d´ ependance de l’application .angular-cli.json : contenant les donn´ ees concernant la conﬁguration du projet (les commandes raccourcies, l’emplacement des ﬁchiers de d´ emarrage...) tslint.json : contenant les donn´ ees sur les r` egles ` a respecter par le d´ eveloppeur (nombre de caract` eres max par ligne, l’emplacement des espaces...) 12-13 Avril 2018, POE m2i 9 / 28 Cr´ eation et structure d’un projet Angular Que contient src? assets : l’unique dossier accessible aux visiteurs et contenant les images, les sons... index.html : l’unique ﬁchier HTML d’une application Angular styles.css : la feuille de style commune de tous les composants web de l’application favicon.ico : le logo d’Angular app : contient initialement les 5 ﬁchiers du module principal app.module.ts : la classe correspondante au module principal app.component.ts : la classe associ´ e au composant web app.component.html : le ﬁchier contenant le code HTML associ´ e au composant web app.component.css : le ﬁchier contenant le code CSS associ´ e au composant web app.component.spec.ts : le ﬁchier de test du composant web 12-13 Avril 2018, POE m2i 10 / 28 Cr´ eation et structure d’un projet Angular Contenu d’index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Project</title>  <base href="/"> <meta name="viewport" content="width=device-width, initial- scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body>  <app-root></app-root> </body> </html> 12-13 Avril 2018, POE m2i 11 / 28 Cr´ eation et structure d’un projet Angular Contenu d’app.module.ts @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 12-13 Avril 2018, POE m2i 12 / 28 Cr´ eation et structure d’un projet Angular Contenu d’app.module.ts @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Explication @NgModule : pour d´ eclarer cette classe comme module declarations : dans cette section, on d´ eclare les composants de ce module imports : dans cette section, on d´ eclare les modules n´ ecessaires pour le module providers : dans cette section, on d´ eclare les services qui seront utilis´ es dans le module bootstrap : dans cette section, on d´ eclare le composant principal de ce module 12-13 Avril 2018, POE m2i 12 / 28 Cr´ eation et structure d’un projet Le ﬁchier app.component.ts @Component({ selector: ’app-root’, templateUrl: ’./app.component.html’, styleUrls: [’./app.component.css’] }) export class AppComponent { title = ’app’; } Le ﬁchier app.component.html <div style="text-align:center"> <h1> Welcome to {{ title }}! </h1> ... </div> 12-13 Avril 2018, POE m2i 13 / 28 Cr´ eation et structure d’un projet Le ﬁchier app.component.ts @Component({ selector: ’app-root’, templateUrl: ’./app.component.html’, styleUrls: [’./app.component.css’] }) export class AppComponent { title = ’app’; } Le ﬁchier app.component.html <div style="text-align:center"> <h1> Welcome to {{ title }}! </h1> ... </div> Explication @Component : pour d´ eclarer cette classe comme composant web selector : pour d´ eﬁnir le nom de balise correspondant ` a ce composant web templateUrl : pour indiquer le ﬁchier contenant le code HTML correspondant au composant web styleUrls : pour indiquer le(s) ﬁchier(s) contenant le code CSS correspondant au composant web 12-13 Avril 2018, POE m2i 13 / 28 Cr´ eation et structure d’un projet Le ﬁchier app.component.ts @Component({ selector: ’app-root’, templateUrl: ’./app.component.html’, styleUrls: [’./app.component.css’] }) export class AppComponent { title = ’app’; } Le ﬁchier app.component.html <div style="text-align:center"> <h1> Welcome to {{ title }}! </h1> ... </div> Explication @Component : pour d´ eclarer cette classe comme composant web selector : pour d´ eﬁnir le nom de balise correspondant ` a ce composant web templateUrl : pour indiquer le ﬁchier contenant le code HTML correspondant au composant web styleUrls : pour indiquer le(s) ﬁchier(s) contenant le code CSS correspondant au composant web {{ Interpolation }} Welcome to {{ title }}! : title sera remplac´ e par sa valeur dans app.component.ts 12-13 Avril 2018, POE m2i 13 / 28 Afﬁchage d’attribut de type objet ou tableau Angular Objectif : afﬁcher les attributs et les valeurs sous forme d’une liste HTML Cr´ eer un r´ epertoire classes dans app o` u on va placer toutes les classes Cr´ eer une premi` ere classe Personne ayant les attributs nom et pr´ enom Cr´ eer un objet de cette classe dans app.component.ts Afﬁcher les valeurs de cet objet sous forme de liste dans app.component.html 12-13 Avril 2018, POE m2i 14 / 28 Afﬁchage d’attribut de type objet ou tableau Angular Contenu de personne.ts export class Personne { constructor(private _nom: string, private _prenom: string) {} get nom(){ return this._nom; } set nom(nom: string){ this._nom = nom; } get prenom(){ return this._prenom; } set prenom(prenom: string){ this._prenom = prenom; } } 12-13 Avril 2018, POE m2i 15 / 28 Afﬁchage d’attribut de type objet ou tableau Angular Cr´ eer un objet de type Personne dans app.component.ts @Component({ selector: ’app-root’, templateUrl: ’./app.component.html’, styleUrls: [’./app.component.css’] }) export class AppComponent { title = ’app’; personne: Personne; constructor(){ this.personne = new Personne("Wick", "John"); } } 12-13 Avril 2018, POE m2i 16 / 28 Afﬁchage d’attribut de type objet ou tableau Angular Afﬁcher l’objet personne dans app.component.html <ul> <li> Nom : {{ personne.nom }} </li> <li> Prenom : {{ personne.prenom }} </li> </ul> 12-13 Avril 2018, POE m2i 17 / 28 Afﬁchage d’attribut de type objet ou tableau Angular Cr´ eer un tableau d’entiers tab dans app.component.ts @Component({ selector: ’app-root’, templateUrl: ’./app.component.html’, styleUrls: [’./app.component.css’] }) export class AppComponent { title = ’app’; personne: Personne; tab:number[]=[2,3,5,8]; constructor(){ this.personne = new Personne("Wick", "John"); } } 12-13 Avril 2018, POE m2i 18 / 28 Afﬁchage d’attribut de type objet ou tableau Afﬁcher le tableau tab dans app.component.html <ul> <li> {{ tab[0] }} </li> <li> {{ tab[1] }} </li> <li> {{ tab[2] }} </li> <li> {{ tab[3] }} </li> </ul> 12-13 Avril 2018, POE m2i 19 / 28 Afﬁchage d’attribut de type objet ou tableau Afﬁcher le tableau tab dans app.component.html <ul> <li> {{ tab[0] }} </li> <li> {{ tab[1] }} </li> <li> {{ tab[2] }} </li> <li> {{ tab[3] }} </li> </ul> Remarques Ce code est trop r´ ep´ etitif Et si on ne connaissait pas le nombre d’´ el´ ements Ou si on ne voulait pas afﬁcher tous les les ´ el´ ements 12-13 Avril 2018, POE m2i 19 / 28 Afﬁchage d’attribut de type objet ou tableau Afﬁcher le tableau tab dans app.component.html <ul> <li> {{ tab[0] }} </li> <li> {{ tab[1] }} </li> <li> {{ tab[2] }} </li> <li> {{ tab[3] }} </li> </ul> Remarques Ce code est trop r´ ep´ etitif Et si uploads/Ingenierie_Lourd/ coursangularpart1-pdf.pdf