SlideShare une entreprise Scribd logo
05/02/2019
1
Angular
Introduction
AYMEN SELLAOUTI
1
Références
2
05/02/2019
2
Plan du Cours
1. Introduction
2. Les composants
3. Les directives
3 Bis. Les pipes
4. Service et injection de dépendances
5. Le routage
6. Form
7. HTTP
8. Les modules
9. Les tests unitaires
3
C’est quoi Angular?
4
05/02/2019
3
C’est quoi Angular?
Framework JS
SPA
Supporte plusieurs langages : ES5, EC6, TypeScript, Dart
Modulaire (organisé en composants et modules)
Rapide
Orienté Composant
5
Angular : Arbre de composants
6
05/02/2019
4
Architecture Angular
7
Principaux concepts et notions
Component Template DataBinding
Service Route
Injection de
dépendance
Méta données
8
05/02/2019
5
Module
Angular est modulaire
 Chaque application va définir Angular Modules or NgModules
 Chaque module Angular est une classe avec une annotation
@NgModule
 Chaque application a au moins un module, c’est le module principale.
9
AppModule : le module principal
 le module principal est le module qui permet de lancer l’application de la bootstraper.
Le nom par convention est AppModule.
L’annotation (decorator) @NgModule identifie
AppModule comme un module Angular.
L’annotation prend en paramètre un objet spécifiant à
Angular comment compiler et lancer l’application.
imports : tableau contenant les modules utilisés.
declarations : tableau contenant les composants, directives
et pipes de l’application.
bootstrap : indique le composant exécuter au lancement de l’application.
Il peut y avoir aussi d’autres attributs dans cet objet
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 { }
10
05/02/2019
6
Les librairies d’Angular
 Ensemble de modules JS
Des librairies qui contiennent un ensemble de fonctionnalités.
Toutes les librairies d’Angular sont préfixées par @angular
Récupérable à travers un import JavaScript.
Exemple pour récupérer l’annotation component : import { Component } from '@angular/core';
11
Les composants
 Le composant est la partie principale d’Angular.
Un composant s’occupe d’une partie de la vue.
L’interaction entre le composant et la vue se fait à travers une API.
12
05/02/2019
7
Template
Un Template est le complément du composant.
C’est la vue associée au composant.
Elle représente le code HTMl géré par le composant.
13
Les méta data
 Appelé aussi « decorator », ce sont des informations permettant de
décrire les classes.
 @Component permet d’identifier la classe comme étant un
composant angular.
14
05/02/2019
8
Le Data Binding
 Le data binding est le mécanisme qui permet de mapper
des éléments du DOM avec des propriétés et des méthodes
du composant.
Le Data Binding permettra aussi de faire communiquer
les composants.
15
Les directives
 Les directives Angular sont des classes avec la métadata @Directive. Elle
permettent de modifier le DOM et de rendre les Template dynamiques.
Apparaissent dans des éléments HTML comme les attributs.
Un composant est une directive à laquelle Angular a associé un Template.
Ils existe deux autres types de directives :
Directives structurelles
Directive d’attributs
16
05/02/2019
9
Les services
 Classes permettant d’encapsuler des traitements métiers.
Doivent être légers.
Associées aux composants et autres classes par injection de dépendances.
17
Installation d’Angular
Deux méthodes pour installer un projet Angular.
 Cloner ou télécharger le QuickStart seed proposé par Angular.
Utiliser le Angular-cli afin d’installer un nouveau projet (conseillé).
Remarque : L’installation de NodeJs est obligatoire afin de pouvoir
utiliser son npm (Node Package Manager).
18
05/02/2019
10
Installation d’Angular
QuickStart
Deux méthodes
 Télécharger directement le projet du dépôt Git
https://github.com/angular/quickstart
 Ou bien le cloner à l’aide de la commande suivante :
git clone https://github.com/angular/quickstart.git quickstart
 Se positionner sur le projet
Installer les dépendance à l’aide de npm : npm install
 lancer le projet à l’aide de npm : npm start
19
Installation d’Angular
Angular Cli
20
 Nous allons installer notre première application en utilisant angular Cli.
 Si vous avez Node c’est bon, sinon, installer NodeJs sur votre machine. Vous devez avoir
une version de node >= 8.3.0
 Une fois installé vous disposez de npm qui est le Node Package Manager. Afin de vérifier
si vous avez NodeJs installé, tapez npm –v.
 La version npm devra être >=3.0.0
 Installer ensuite TypeScript. Pour ce faire, tapez npm install -g typescript.
 Installer maintenant le Cli en tapant la : npm install -g @angular/cli
 npm install -g @angular/cli@6.0.0 installe la version 6.0.0
 npm view @angular/cli affiche la liste des versions de la cli
Installer un nouveau projet à l’aide de la commande ng new nomProjet
Afin d’avoir du help pour le cli tapez ng help
 Lancer le projet en utilisant la commande ng serve
05/02/2019
11
Installation d’Angular
Angular Cli
Positionnez vous maintenant dans le dossier
Tapez la commande suivante : ng new nomNewProject
 lancez le projet à l’aide de npm : ng serve
Naviguez vers l’adresse mentionnée.
 Vous pouvez configurer le Host ainsi que le port avec la commande
suivante : ng serve --host leHost --port lePort
Pour plus de détails sur le cli visitez https://cli.angular.io/
21
Quelques commandes du Cli
Commande Utilisation
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
Interface ng g interface my-new-interface
Module ng g module my-module
22
05/02/2019
12
Arborescence d’un projet Angular
E2e : end to end pour réaliser des tests d’intégration
Node_modules : les dépendences
Src : dossier contenant l’index le code source les styles, main.ts qui est
le bootstrap d’angular ainsi que d’autres fichiers
App : Les sources du projet par défaut ainsi que le module appModule,
le fichier app.component.ts ainsi que son template
(app.component.html), son style (app.component.css) et
app.component.spec.ts pour les tests unitaires.
23
Ajouter Bootstrap
On peut ajouter Bootstrap de plusieurs façons :
1- Via le CDN à ajouter dans le fichier index.html
2- En le téléchargeant du site officiel
3- Via npm
◦ Npm install bootstrap --save
24
05/02/2019
13
Ajouter Bootstrap
Pour ajouter les dossiers téléchargés on peut le faire de deux façons :
1- En l’ajoutant dans index.html
2- En ajoutant le chemin des dépendances dans les tableaux styles et scripts dans le fichier angular.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css",
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
25
Ajouter Bootstrap
Ajouter dans le fichier src/style.css un import de vos bibliothèques.
@import "~bootstrap/dist/css/bootstrap.css";
Essayer la même chose avec font-awesome.
26
05/02/2019
14
27
aymen.sellaouti@gmail.com

Contenu connexe

Tendances

Angular Avancé
Angular AvancéAngular Avancé
React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
Jaouad Assabbour
 
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
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Jean-Baptiste Vigneron
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
Cynapsys It Hotspot
 
Design Pattern introduction
Design Pattern introductionDesign Pattern introduction
Design Pattern introduction
neuros
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
Bruno Bonnin
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
Yacine Rezgui
 
Formation jpa-hibernate-spring-data
Formation jpa-hibernate-spring-dataFormation jpa-hibernate-spring-data
Formation jpa-hibernate-spring-data
Lhouceine OUHAMZA
 
Spring mvc
Spring mvcSpring mvc
Spring mvc
Lhouceine OUHAMZA
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
Abdoulaye Dieng
 
Spring ioc
Spring iocSpring ioc
Spring ioc
Lhouceine OUHAMZA
 
Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategy
ENSET, Université Hassan II Casablanca
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
Antoine Rey
 
Concevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootConcevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring Boot
DNG Consulting
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
Nizar MAATOUG -ISET Sidi Bouzid
 
Angular performance slides
Angular performance slidesAngular performance slides
Angular performance slides
David Barreto
 
introduction to Vue.js 3
introduction to Vue.js 3 introduction to Vue.js 3
introduction to Vue.js 3
ArezooKmn
 
Gestion de projet avec GitHub
Gestion de projet avec GitHubGestion de projet avec GitHub
Gestion de projet avec GitHub
Nicolas Bats
 

Tendances (20)

Angular Avancé
Angular AvancéAngular Avancé
Angular Avancé
 
React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
 
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
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
 
Design Pattern introduction
Design Pattern introductionDesign Pattern introduction
Design Pattern introduction
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
 
Formation jpa-hibernate-spring-data
Formation jpa-hibernate-spring-dataFormation jpa-hibernate-spring-data
Formation jpa-hibernate-spring-data
 
Spring mvc
Spring mvcSpring mvc
Spring mvc
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
 
Spring ioc
Spring iocSpring ioc
Spring ioc
 
Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategy
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
Concevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring BootConcevoir, développer et sécuriser des micro-services avec Spring Boot
Concevoir, développer et sécuriser des micro-services avec Spring Boot
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Angular performance slides
Angular performance slidesAngular performance slides
Angular performance slides
 
introduction to Vue.js 3
introduction to Vue.js 3 introduction to Vue.js 3
introduction to Vue.js 3
 
Gestion de projet avec GitHub
Gestion de projet avec GitHubGestion de projet avec GitHub
Gestion de projet avec GitHub
 

Similaire à Cours 1 introduction

Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
imenhamada17
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium Versusmind
Philippe Didiergeorges
 
Angular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebAngular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications Web
Dekeltv1
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
Laurent Duveau
 
Workshop angular2
Workshop angular2 Workshop angular2
Workshop angular2
sihemhcine
 
Angular 2
Angular 2Angular 2
Angular 2
Zoubir REMILA
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
RadhoueneRouached
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
Jaouad Assabbour
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
Habib Ayad
 
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
 
Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Comment créer une application Angular performante ?
Comment créer une application Angular performante ?
Sébastien Ollivier
 
Cours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrrCours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrr
inesrdissi60
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
marwa baich
 
spring-boot-fr.pdf
spring-boot-fr.pdfspring-boot-fr.pdf
spring-boot-fr.pdf
seydou4devops
 
20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven
Arnaud Héritier
 
Meetup Angular Paris - Feature Modules
Meetup Angular Paris - Feature ModulesMeetup Angular Paris - Feature Modules
Meetup Angular Paris - Feature Modules
Daniel Djordjevic
 
20100225 Ippon Osgi Are You Ready
20100225 Ippon Osgi Are You Ready20100225 Ippon Osgi Are You Ready
20100225 Ippon Osgi Are You Ready
Geoffray Gruel
 
#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
Atsé François-Xavier KOBON
 

Similaire à Cours 1 introduction (20)

Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .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 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium Versusmind
 
Angular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebAngular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications Web
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Workshop angular2
Workshop angular2 Workshop angular2
Workshop angular2
 
Angular 2
Angular 2Angular 2
Angular 2
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
 
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...
 
Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Comment créer une application Angular performante ?
Comment créer une application Angular performante ?
 
Cours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrrCours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrr
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
 
spring-boot-fr.pdf
spring-boot-fr.pdfspring-boot-fr.pdf
spring-boot-fr.pdf
 
20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven
 
Meetup Angular Paris - Feature Modules
Meetup Angular Paris - Feature ModulesMeetup Angular Paris - Feature Modules
Meetup Angular Paris - Feature Modules
 
20100225 Ippon Osgi Are You Ready
20100225 Ippon Osgi Are You Ready20100225 Ippon Osgi Are You Ready
20100225 Ippon Osgi Are You Ready
 
#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
 

Cours 1 introduction

  • 2. 05/02/2019 2 Plan du Cours 1. Introduction 2. Les composants 3. Les directives 3 Bis. Les pipes 4. Service et injection de dépendances 5. Le routage 6. Form 7. HTTP 8. Les modules 9. Les tests unitaires 3 C’est quoi Angular? 4
  • 3. 05/02/2019 3 C’est quoi Angular? Framework JS SPA Supporte plusieurs langages : ES5, EC6, TypeScript, Dart Modulaire (organisé en composants et modules) Rapide Orienté Composant 5 Angular : Arbre de composants 6
  • 4. 05/02/2019 4 Architecture Angular 7 Principaux concepts et notions Component Template DataBinding Service Route Injection de dépendance Méta données 8
  • 5. 05/02/2019 5 Module Angular est modulaire  Chaque application va définir Angular Modules or NgModules  Chaque module Angular est une classe avec une annotation @NgModule  Chaque application a au moins un module, c’est le module principale. 9 AppModule : le module principal  le module principal est le module qui permet de lancer l’application de la bootstraper. Le nom par convention est AppModule. L’annotation (decorator) @NgModule identifie AppModule comme un module Angular. L’annotation prend en paramètre un objet spécifiant à Angular comment compiler et lancer l’application. imports : tableau contenant les modules utilisés. declarations : tableau contenant les composants, directives et pipes de l’application. bootstrap : indique le composant exécuter au lancement de l’application. Il peut y avoir aussi d’autres attributs dans cet objet 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 { } 10
  • 6. 05/02/2019 6 Les librairies d’Angular  Ensemble de modules JS Des librairies qui contiennent un ensemble de fonctionnalités. Toutes les librairies d’Angular sont préfixées par @angular Récupérable à travers un import JavaScript. Exemple pour récupérer l’annotation component : import { Component } from '@angular/core'; 11 Les composants  Le composant est la partie principale d’Angular. Un composant s’occupe d’une partie de la vue. L’interaction entre le composant et la vue se fait à travers une API. 12
  • 7. 05/02/2019 7 Template Un Template est le complément du composant. C’est la vue associée au composant. Elle représente le code HTMl géré par le composant. 13 Les méta data  Appelé aussi « decorator », ce sont des informations permettant de décrire les classes.  @Component permet d’identifier la classe comme étant un composant angular. 14
  • 8. 05/02/2019 8 Le Data Binding  Le data binding est le mécanisme qui permet de mapper des éléments du DOM avec des propriétés et des méthodes du composant. Le Data Binding permettra aussi de faire communiquer les composants. 15 Les directives  Les directives Angular sont des classes avec la métadata @Directive. Elle permettent de modifier le DOM et de rendre les Template dynamiques. Apparaissent dans des éléments HTML comme les attributs. Un composant est une directive à laquelle Angular a associé un Template. Ils existe deux autres types de directives : Directives structurelles Directive d’attributs 16
  • 9. 05/02/2019 9 Les services  Classes permettant d’encapsuler des traitements métiers. Doivent être légers. Associées aux composants et autres classes par injection de dépendances. 17 Installation d’Angular Deux méthodes pour installer un projet Angular.  Cloner ou télécharger le QuickStart seed proposé par Angular. Utiliser le Angular-cli afin d’installer un nouveau projet (conseillé). Remarque : L’installation de NodeJs est obligatoire afin de pouvoir utiliser son npm (Node Package Manager). 18
  • 10. 05/02/2019 10 Installation d’Angular QuickStart Deux méthodes  Télécharger directement le projet du dépôt Git https://github.com/angular/quickstart  Ou bien le cloner à l’aide de la commande suivante : git clone https://github.com/angular/quickstart.git quickstart  Se positionner sur le projet Installer les dépendance à l’aide de npm : npm install  lancer le projet à l’aide de npm : npm start 19 Installation d’Angular Angular Cli 20  Nous allons installer notre première application en utilisant angular Cli.  Si vous avez Node c’est bon, sinon, installer NodeJs sur votre machine. Vous devez avoir une version de node >= 8.3.0  Une fois installé vous disposez de npm qui est le Node Package Manager. Afin de vérifier si vous avez NodeJs installé, tapez npm –v.  La version npm devra être >=3.0.0  Installer ensuite TypeScript. Pour ce faire, tapez npm install -g typescript.  Installer maintenant le Cli en tapant la : npm install -g @angular/cli  npm install -g @angular/cli@6.0.0 installe la version 6.0.0  npm view @angular/cli affiche la liste des versions de la cli Installer un nouveau projet à l’aide de la commande ng new nomProjet Afin d’avoir du help pour le cli tapez ng help  Lancer le projet en utilisant la commande ng serve
  • 11. 05/02/2019 11 Installation d’Angular Angular Cli Positionnez vous maintenant dans le dossier Tapez la commande suivante : ng new nomNewProject  lancez le projet à l’aide de npm : ng serve Naviguez vers l’adresse mentionnée.  Vous pouvez configurer le Host ainsi que le port avec la commande suivante : ng serve --host leHost --port lePort Pour plus de détails sur le cli visitez https://cli.angular.io/ 21 Quelques commandes du Cli Commande Utilisation 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 Interface ng g interface my-new-interface Module ng g module my-module 22
  • 12. 05/02/2019 12 Arborescence d’un projet Angular E2e : end to end pour réaliser des tests d’intégration Node_modules : les dépendences Src : dossier contenant l’index le code source les styles, main.ts qui est le bootstrap d’angular ainsi que d’autres fichiers App : Les sources du projet par défaut ainsi que le module appModule, le fichier app.component.ts ainsi que son template (app.component.html), son style (app.component.css) et app.component.spec.ts pour les tests unitaires. 23 Ajouter Bootstrap On peut ajouter Bootstrap de plusieurs façons : 1- Via le CDN à ajouter dans le fichier index.html 2- En le téléchargeant du site officiel 3- Via npm ◦ Npm install bootstrap --save 24
  • 13. 05/02/2019 13 Ajouter Bootstrap Pour ajouter les dossiers téléchargés on peut le faire de deux façons : 1- En l’ajoutant dans index.html 2- En ajoutant le chemin des dépendances dans les tableaux styles et scripts dans le fichier angular.json: "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css", ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/popper.js/dist/umd/popper.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ], 25 Ajouter Bootstrap Ajouter dans le fichier src/style.css un import de vos bibliothèques. @import "~bootstrap/dist/css/bootstrap.css"; Essayer la même chose avec font-awesome. 26