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