Formation Angular2 5

[Tapez ici] [Tapez ici] [Tapez ici]
Support de cours
ANGULAR POUR DÉBUTANT

ANGULAR 4 Support V2.0
TABLE DES MATIERES
SUPPORT DE COURS .................................................................................................................................................. 0
1 ANGULAR JS .............................................................................................................................................................. 4
1.1 ANGULARJS, ANGULAR 2 ET ANGULAR 4..................................................................................................................... 4

Historique du framework .......................................................................................................................................... 4
Différence framework/librairie .................................................................................................................................. 4
Pourquoi un framework ? ......................................................................................................................................... 4
Angular 2 ? .............................................................................................................................................................. 4
1.2 FONCTIONNEMENT .................................................................................................................................................... 6
Pour approfondir ...................................................................................................................................................... 6
1.3 PHILOSOPHIE ........................................................................................................................................................... 6
1.4 POURQUOI UNE VERSION 4 ? ..................................................................................................................................... 7
2 MISE EN PLACE DE L’ENVIRONNEMENT ............................................................................................................... 8
2.1 DISCUSSION SUR NOTRE ENVIRONNEMENT ................................................................................................................... 8

2.2 NODE.JS ................................................................................................................................................................. 9
Historique des technologies Javascript.................................................................................................................... 9
Et Node.js dans tout ça ? ......................................................................................................................................... 9
2.3 INSTALLATION SUR WINDOWS, MAC ET LINUX............................................................................................................ 11
2.4 NPM POUR GERER LES DEPENDENCES DE L’ENVIRONNEMENT...................................................................................... 11
Definition ................................................................................................................................................................ 11
Commandes de bases ........................................................................................................................................... 12
Lister les packages avec npm ................................................................................................................................ 12
2.5 INSTALLATION D’ANGULAR CLI WINDOWS, MAC ET LINUX........................................................................................... 14
2.6 INSTALLATION DE GIT .............................................................................................................................................. 15
Mac ........................................................................................................................................................................ 15
Linux....................................................................................................................................................................... 15
Windows ................................................................................................................................................................ 16
3 TYPESCRIPT ............................................................................................................................................................ 17
3.1 HISTORIQUE ........................................................................................................................................................... 17

3.2 EN 5 MINUTES ........................................................................................................................................................ 17
Installation de Typescript et premier fichier .ts ....................................................................................................... 17
Transpilation du code............................................................................................................................................. 18
Typage ................................................................................................................................................................... 19
Interfaces................................................................................................................................................................ 20
Classes ................................................................................................................................................................... 21
4 PREMIERE APPLICATION ....................................................................................................................................... 23
JULIEN HEROGUELLE 1
4.1 CREATION DE L’APPLICATION ................................................................................................................................... 23

4.2 Structure du projet ........................................................................................................................................... 25
Le dossier src. ........................................................................................................................................................ 25
Le dossier root. ...................................................................................................................................................... 29
5 ARCHITECTURE ...................................................................................................................................................... 32
5.1 COMPARTIMENTER AVEC LES MODULES ..................................................................................................................... 32

Modules de Pages.................................................................................................................................................. 33
5.2 LES COMPOSANTS D’UNE APPLICATION ANGULAR....................................................................................................... 33
Templates, directives, and data binding................................................................................................................. 34
5.3 SERVICES ET INJECTION DE DEPENDANCES ................................................................................................................ 38
Routing................................................................................................................................................................... 38
5.4 RECAPITULATIF ....................................................................................................................................................... 39
6 RETOUR SUR NOTRE APPLICATION .................................................................................................................... 40
6.1 LE MODULE PRINCIPAL, APPMODULE ........................................................................................................................ 40

6.2 LE COMPOSANT PRINCIPAL ...................................................................................................................................... 43
6.3 LE TEMPLATE PRINCIPALE ........................................................................................................................................ 44
7 LES COMPONENTS ET LES DONNEES DYNAMIQUES....................................................................................... 45
7.1 TEMPLATING .......................................................................................................................................................... 48

Installation d’un framework css minimaliste ........................................................................................................... 48
L’interpolation ........................................................................................................................................................ 50
Property binding..................................................................................................................................................... 52
Le Property Binding sur un attribut directive .......................................................................................................... 53
Le Property Binding sur une propriété d'un component ........................................................................................ 54
Event Binding ......................................................................................................................................................... 55
Two-way Binding ................................................................................................................................................... 59
8 DIRECTIVES ............................................................................................................................................................. 60
8.1 LES DIRECTIVES STRUCTURELLES ............................................................................................................................. 61

NGif ................................................................................................................... Erreur ! Le signet n’est pas défini.
ngFor ................................................................................................................. Erreur ! Le signet n’est pas défini.
8.2 DIRECTIVES PAR ATTRIBUT ....................................................................................................................................... 64
ngStyle .............................................................................................................. Erreur ! Le signet n’est pas défini.
NGClass ............................................................................................................ Erreur ! Le signet n’est pas défini.
9 PIPES ........................................................................................................................................................................ 66
8 PARTAGEONS LES DONNEES ENTRE NOS COMPOSANTS AVEC LES SERVICES .......................................... 66
9 LE ROUTAGE ........................................................................................................................................................... 66
JULIEN HEROGUELLE 2
9.1 PRINCIPES ............................................................................................................................................................. 66

9.2 BASES ................................................................................................................................................................... 66
9.3 LAZY LOADING ........................................................................................................................................................ 66
10 HTTP ....................................................................................................................................................................... 66
10.2 INTERCEPTORS ..................................................................................................................................................... 66
11 RXJS ....................................................................................................................................................................... 66
11.1 INTRODUCTION A RXJS ......................................................................................................................................... 66

11.2 OBSERVABLES ET PROMISES.................................................................................................................................. 66
11.3 SUBJECTS, SUBSCRIBERS ET AUTRES ..................................................................................................................... 66
12 INTRODUCTION AU TESTS UNITAIRES ET FONCTIONNELS ........................................................................... 66
JULIEN HEROGUELLE 3
1 ANGULAR JS
1.1 ANGULARJS, ANGULAR 2 ET ANGULAR 4
HISTORIQUE DU FRAMEWORK
Apparu en 2009, Angular est développé par Google et par la communauté
Angular est un framework qui va nous permettre de créer des applications complètes en single page (type client
mail, gmail, youtube leanback) et cross-plateforme (web, mobile, desktop)
Un application Single page n’a pas besoin de recharger la page du site à chaque changement d’url. Cela permet
d’avoir des applications fluides tout en gardant une navigation simple.
DIFFERENCE FRAMEWORK/LIBRAIRIE
Une librairie est un fichier permettant d’inclure des objets, des interfaces, des fonctions préprogrammés (ex :
java.util, stdlib, math).
Alors qu’un Framework est un ensemble de plusieurs librairies, offrant un environnement de travail et ayant
comme socle commun des principes et des lignes directrices.
POURQUOI UN FRAMEWORK ?
Une application en Single page est particulièrement compliquée à développer et est d’autant plus compliquée à
lire et à maintenir. Un Framework aura préparé tout le terrain afin de rendre le développement plus simple et plus
rapide. Par principe, Angular veut rendre les développements impossibles : possibles, et les développements
possibles : évidents.
Un Framework n’étant qu’un regroupement de librairies et de fonctionnalités, il peut être développé afin de nous
laisser le choix de programmer en utilisant plusieurs langages. Angular nous offre ici la possibilité de développer
notre application en Javascript, en Dart, ou en TypeScript.
ANGULAR 2 ?
Pour sa version 2 Angular, change radicalement de point de vue de conception, et ajoute encore beaucoup de
fonctionnalités. Il est beaucoup plus performant, plus simple pour nous (et toujours conforme à l’ES6/ES2015) et
permet de faire du server-side rendering afin de pouvoir prendre en charge certaines fonctionnalités plus
facilement, comme le référencement par les moteurs de recherche par exemple.
JULIEN HEROGUELLE 4
JULIEN HEROGUELLE 5
1.2 FONCTIONNEMENT
La synchronisation automatique des données entre le modèle et la vue est permise par un mécanisme appelé
dirty-checking. AngularJS exécute en permanence une boucle qui consiste à surveiller et à détecter des
modifications sur un objet JavaScript.
POUR APPROFONDIR
• https://stackoverflow.com/questions/35469024/how-does-angular-2-change-detection-work
• https://angular.io/docs/ts/latest/api/core/index/ChangeDetectorRef-class.html
• https://angular.io/docs/ts/latest/api/core/NgZone-class.html
• What is the Angular2 equivalent to an AngularJS $watch?
AngularJS embarque un également sous-ensemble de la bibliothèque open source jQuery appelé jQLite, mais
peut aussi utiliser jQuery si elle est chargée
1.3 PHILOSOPHIE
Si nous consultons Wikipedia, nous apprenons que la conception de AngularJS est guidée par plusieurs objectifs
:
• Découpler les manipulations du DOM de la logique métier. Cela améliore la testabilité du code;
• Considérer le test d'une application aussi important que l'écriture de l'application elle-même. La
difficulté de la phase de test est considérablement impactée par la façon dont le code est structuré;
• Découpler les côtés client et serveur d'une application. Cela permet au développement logiciel des
côtés client et serveur de progresser en parallèle, et permet la réutilisabilité de chacun des côtés;
• Guider les développeurs pendant toute la durée de la construction d'une application : de la
conception de l'interface utilisateur, en passant par l'écriture de la logique métier, jusqu'au test de
l'application;
• Rendre les tâches faciles évidentes et les tâches difficiles possibles.
JULIEN HEROGUELLE 6
Pour faire cela, Google a mis en place une documentation très détaillée des lignes de conduites à suivre lors de
nos développements. Elle est accessible à cette adresse.
Elle est longue mais cependant quelques points méritent d’être soulevés.
• La documentation nous parle très vite du single responsibility principle (SRP), qui est le principe
d’encapsulation de classes. La documentation nous rappelle donc que chaque fonctionnalité de
l’application doit être encapsulée par une classe donnée afin de les compartimenter et de contrôler
au mieux chaque partie de notre application;
• La règle de l’UN. Définir UNE SEULE chose, comme UN composant, UNE classe ou UN service par
fichier. Cela rend le code plus facile à lire, plus facilement maintenable et testable. Un composant par
fichier empêche des bugs cachés, et évite de partager des variables, des closures, ou des problèmes
d’import de dépendance;
• Limiter les fichiers à 400 lignes de code maximum;
• Écrire de courtes fonctions. Cela augmente la réutilisabilité du code, elles sont plus faciles à lire et donc
à maintenir, elles évitent les bugs cachés.
Le reste de la documentation précise la plupart des conventions de nommage des fichiers et des variables.
Notez seulement que :
• Les noms des fichiers sont séparés par des «-» ou des «.» comme .module.ts;
• Les noms des fichiers doivent être explicites et standardisés. Comme fonction.type.ts.
Exemple : hero-list.module.ts.
Ceci n’est qu’une liste de conventions de typage et de nommage en tous genres. Mais nous verrons que le
fonctionnement même d’Angular, suit les lignes de conduite listées plus haut, en fonctionnant à base de
compartiments réutilisables et individuellement simple.
1.4 POURQUOI UNE VERSION 4 ?
Il n'y a pas eu d'Angular 3. Google a préféré passer directement à la version 4.0 pour diverses raisons. Cela
s'explique notamment par la volonté d’aligner tous les paquets Angular sur le même numéro de version.
Réduction du code généré de 60% en moyenne en production
JULIEN HEROGUELLE 7
2 MISE EN PLACE DE L’ENVIRONNEMENT
2.1 DISCUSSION SUR NOTRE ENVIRONNEMENT
Durant le cadre de cette formation sur le framework Angular, nous allons avoir besoin de plusieurs outils afin de
servir notre application et de pouvoir développer avec nos collaborateurs en toute tranquillité tout ça avec des
bonnes pratiques.
Pour cela nous avons besoin tout d’abord besoin d’un serveur web.
Par défaut l’équipe de Google nous propose de travailler avec Node.js qui est un serveur web codé en Javascript
et permettant de rendre des pages Javascript en HTML, pour lequel Angular est optimisé.
Par-dessus ça nous avons évidemment besoin d’Angular, l’équipe de Google nous propose un outil en ligne de
commande appelé Angular CLI qui va nous mâcher pas mal de travail. Il va nous permettre de rapidement mettre
en place une application avec tous les fichiers nécessaires agencés et les bonnes pratiques. Avec Git, un serveur
Node.js prêt à l’emploi, et un premier Component.
Vu que le développement des applications se déroule très souvent en collaboration avec d’autres développeurs,
Google met en place directement Git grâce à Angular CLI, nous allons donc l’installer pour pouvoir en reparler
beaucoup plus tard dans la formation.
Nous n’aborderons le fonctionnement de cet utilitaire seulement dans le chapitre annexe «Collaborer avec git»
néanmoins nous pouvons retenir certains points de cet utilitaire pour le moment.
• Il est très rapide.

• Il travaille par branches (versions parallèles d’un même projet) de façon très flexible.
• Il est assez complexe, il faut un certain temps d’adaptation pour bien le comprendre et savoir le manipuler.
• Il est à l’origine prévu pour Linux. Il existe des versions pour Windows mais pas vraiment d’interface
graphique simplifiée. Il est donc à réserver aux développeurs ayant un minimum d’expérience et…
travaillant de préférence sous Linux.
Donc finalement nous avons trois softwares à installer :
Node.js
Git
Angular CLI
JULIEN HEROGUELLE 8
2.2 NODE.JS
Commençons tout de suite avec notre serveur web
HISTORIQUE DES TECHNOLOGIES JAVASCRIPT
Javascript a longtemps été considéré comme «un truc cool pour faire des effets sur sa page web»
Javascript est avant tout un langage de programmation au même titre que le RUBY, le C, le PHP etc.
Et un langage à part qui s'utilise vraiment différemment de Java, du C et d'un tas d'autres langages.
Oui, JavaScript peut être compliqué à utiliser, mais recèle derrière ça une vraie puissance.
Dans les années 90, on parlait de DHTML
Dans les années 2000, jQuery ou Moontool sont apparus et jusqu’à aujourd’hui, on a pris l'habitude de manipuler
le DOM (Document Object Model) pour affecter ses balises HTML en JavaScript et leur faire subir toutes sortes
de traitements.
Puis en 2010 Google a commencé à rendre le langage beaucoup plus rapide avec l'apparition du navigateur
Google Chrome avec le moteur d’exécution V8, puis les bibliothèques dont le nom finit par .js se sont multipliées
: Backbone.js, Ember.js, Meteor.js.
ET NODE.JS DANS TOUT ÇA ?
Apparu en 2009, développé par Ryan Lienhart Dahl
Node.js nous permet d'utiliser le langage JavaScript sur le serveur... -> JavaScript en dehors du navigateur !
Node.js bénéficie de la puissance de JavaScript = toute nouvelle façon de développer des sites web dynamiques.
On peut toujours utiliser du JavaScript côté client pour manipuler la page HTML. Cela ne change pas.
Par contre, Node.js offre un environnement côté serveur qui nous permet aussi d'utiliser le langage JavaScript
pour générer des pages web. En gros, il vient de remplacer des langages serveur comme PHP, Java EE,
etc.
Pourquoi Node.js semble-t-il si différent ? Parce qu'il utilise JavaScript ?
Oui, et parce que JavaScript est un langage basé sur les évènements, donc Node.js est lui-même basé sur les
évènements. Du coup, c'est toute la façon d'écrire des applications web qui change ! Et c'est de là que Node.js
tire toute sa puissance et sa rapidité.
JULIEN HEROGUELLE 9
JULIEN HEROGUELLE 10
2.3 INSTALLATION SUR WINDOWS, MAC ET LINUX
Installer Node.js : http://nodejs.org/en/download/
Lorsque nous installons Node.js, nous installons également NPM : https://www.npmjs.org/.
Il s'agit d'un gestionnaire de paquets. Grâce à cela, lorsque nous aurons besoin d'installer un module Node.js,
une seule commande nous permettra d'installer le module ainsi que TOUTES ses dépendances.
2.4 NPM POUR GERER LES DEPENDENCES DE L’ENVIRONNEMENT
DEFINITION
NPM = Gestionnaire de package pour Node.js.
Comme Homebrew(OSX), aptitude ou Yum (linux)
Différences : NPM a 1 environnement global et des environnement locaux pour nos projets respectifs
Un environnement global avec une liste de package qui se trouve dans le dossier :
Pour Windows
C:\Users\nomutilisateur\npm-packages\lib\node_modules\npm\package.json
Pour OSX
/Users/julienheroguelle/.npm-packages/lib/package.json
Pour Linux
/usr/local/lib/package.json
Un environnement local avec un fichier package.json par projet
Schéma
COMMANDES DE BASES
• list ou ls, pour lister la liste des packages

• install ou i, installe toute la table des package avec les bonnes versions
• remove ou r, qui supprime un package dans la liste
• update ou u, (met à jour toute la table des packages avec leur version courante respectives
• upgrade (alias à update)
À chacune de ces commandes nous pouvons rajouter le nom d’un package et/ou le paramètre -g qui travaille
directement sur la table des packages globale
Nous allons justement utiliser ce paramètre pour installer l’utilitaire en ligne de commande d’Angular.
LISTER LES PACKAGES AVEC NPM
Tout d’abord vérifions que notre liste de package global est bien vide, par défaut seulement le package NPM lui-
même est requis.
Pour ça exécutons la commande :
npm list -g –depth=0
Quelques explications :
• NPM est l’utilitaire que nous avons installé avec Node.js, il est commun d’exécuter une commande par
le nom de l’utilitaire associé
• list est l’instruction NPM qui permet de «lister les packages»
• Le fameux paramètre -g qui indique à NPM que nous travaillons sur la liste des packages globale
• Et pour finir le paramètre –depth=0 de l’instruction list qui indique que nous voulons le niveau 0 des
packages, c’est-à-dire seulement les packages principaux
/usr/src/app # npm list -g --depth=0

/usr/local/lib
`-- npm@6.1.0
Si nous voulons voir les dépendances que demande NPM nous n’avons qu’à remonter dans les niveaux de
profondeur avec le paramètre –depth
Exemple, pour afficher les dépendances les plus hautes, tapons :
npm list -g –depth=1
Résultat :

/usr/local/lib
`-- npm@6.1.0
+-- abbrev@1.1.1
+-- ansi-regex@3.0.0
+-- ansicolors@0.3.2
+-- ansistyles@0.1.3
+-- aproba@1.2.0
+-- archy@1.0.0
+-- bin-links@1.1.2
+-- bluebird@3.5.1
...
Nous voyons que NPM à besoin des packages abbrev, ansi-regex, archy etc… pour fonctionner
2.5 INSTALLATION D’ANGULAR CLI WINDOWS, MAC ET LINUX
Tapons maintenant :
npm install @angular/cli@latest -g
• Install est la commande NPM qui permet d’installer un nouveau package

• @angular/cli est le nom du package suivie de @latest qui est le nom de la branche git qui nous
intéresse
NPM va alors installer Angular cli et toutes ses dépendances tout en le rendant directement accessible dans
notre invite de commande
/usr/src/app # npm install @angular/cli@latest -g

/usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng
> @angular/cli@6.0.8 postinstall /usr/local/lib/node_modules/@angular/cli

> node ./bin/ng-update-message.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4

(node_modules/@angular/cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current:
{"os":"linux","arch":"x64"})
+ @angular/cli@6.0.8
added 248 packages from 191 contributors in 61.829s
/usr/src/app #
Nous avons dès lors accès à l’utilitaire Angular qui s’appelle en exécutant la command NG :
/usr/src/app # ng -v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 6.0.8

Node: 10.5.0
OS: linux x64
Angular:
...
/usr/src/app #
├─┬ @angular/cli@6.0.8
│ ├─┬ @angular-devkit/architect@0.6.8
Si maintenant nous relançons la commande npm list -g –depth=0 nous verrons ce résultat apparaitre :

/usr/local/lib
+-- @angular/cli@6.0.8
`-- npm@6.1.0
Comme nous pouvons le constater, le package @angular/cli à correctement été ajouté à la liste des packages
globale à la version 6.0.8 qui est la version courante stable d’Angular
2.6 INSTALLATION DE GIT
MAC
Télécharger la dernière version de Git sur : http://git-scm.com/downloads
Ouvrir le fichier ainsi téléchargé et suivre les instructions en laissant toutes les valeurs par défaut.
Exécuter la commande suivante dans la console pour définir notre nom et l’email que nous utiliserons ensuite
pour créer notre compte gratuit sur GitHub:
git config --global user.name "Votre nom ou pseudo"

git config --global user.email "Votre@email.com"
Pour vérifier que tout va bien, relançons la console et tapons simplement git. Si l’installation a fonctionné, nous
devrions voir du texte en anglais expliquant l’utilisation de Git.
LINUX
Télécharger la dernière version de Git sur : http://git-scm.com/downloads
Ouvrir le fichier ainsi téléchargé et suivre les instructions en laissant toutes les valeurs par défaut.
Ouvrir la console. (Si nous ne savons pas utiliser cette console, allons jeter un œil au rappel au début de ce
chapitre).
Exécuter la commande suivante pour définir notre nom et l’email que nous utiliserons ensuite pour créer notre
compte gratuit sur GitHub:

git config --global user.email "Votre@email.com"
Pour vérifier que tout va bien, relancer la console et taper simplement git. Si l’installation a fonctionné, nous
WINDOWS
Rendons-nous sur http://msysgit.github.io et télécharger la dernière version disponible. Une fois le fichier
récupéré, nous pouvons l'exécuter suivre les instructions. (nous pouvons laisser toutes les configurations par
défaut.). Cela va nous donner accès à Git ainsi qu’à une console émulant le comportement de Bash, la console
sous Linux.
Exécuter la commande suivante pour définir notre nom et l’email que nous utiliserons ensuite pour créer un
compte gratuit sur Github:

git config --global user.email "votre@email.com"
Pour vérifier que tout va bien, relançons la console et tapons simplement 'git'. Si l’installation a fonctionné, nous
Petite astuce : utiliser la touche "Insert" de notre clavier pour coller du texte dans git bash (ctrl + v ne fonctionnera
sur Windows)
Nous avons enfin fini de mettre en place notre environnement, créons maintenant notre première application !
3 TYPESCRIPT
3.1 HISTORIQUE
TypeScript est un langage de programmation libre et open-source développé par Microsoft qui a pour but
d'améliorer et de sécuriser la production de code JavaScript.
C'est un sur-ensemble de JavaScript : C'est-à-dire que tout code JavaScript correct peut être utilisé avec
TypeScript.
Le code TypeScript est transpilé en JavaScript, pouvant ainsi être interprété par n'importe quel navigateur web
ou moteur JavaScript. Il a été co-créé par Anders Hejlsberg, principal inventeur de C#.
Il supporte la spécification ECMAScript 6 et permet un typage statique optionnel des variables et des
fonctions, la création de classes et d'interfaces, l'import de modules, tout en conservant l'approche non-
contraignante de JavaScript.
Pour plus d’informations voici le document émit par ECMA-Internationnal concernant les spécifications et le
fonctionnement de Javascript.
3.2 EN 5 MINUTES
INSTALLATION DE TYPESCRIPT ET PREMIER FICHIER .TS
Il n’est pas obligatoire d’installer TypeScript pour utiliser Angular, l’utilitaire CLI à une version du transpiler
TypeScript préinstallé. Mais nous allons quand même le faire pour pouvoir l’utiliser en dehors du Framework
Angular.
Pour cela exécutons la commande :
npm install -g typescript
Puis, dans notre éditeur préféré, écrivons une fonction qui nous permettra de dire bonjour à une personne en
rentrant son nom dans une variable.
#greeter.ts
function greeter(person) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);
Maintenant enregistrons ce fichier avec notre fameuse extension .ts par exemple greeter.ts
TRANSPILATION DU CODE
Nous avons utilisé une extension .ts mais ce que nous avons écrit n’est que du Javascript, nous pourrions
l’exécuter directement dans un navigateur à l’aide d’un fichier .js.
Nous voulons maintenant transpiler ce morceau de code TypeScript vers du JavaScript. Notez bien que je
n’ai pas parler de compilation. Le code en TypeScript que nous venons d’écrire ne passera jamais par l’étape
du binaire. Notre navigateur a besoin de JavaScript afin qu’il puisse l’interpréter correctement. C’est pour ça
que j’ai parlé de transpilation. Ce code TypeScript va tout simplement être traduit en langage Javascript afin
d’être compréhensible par le navigateur.
Essayons de suite pour voir.
Ouvrons notre invite de commande, et tapons :
tsc greeter.ts
Un nouveau fichier apparait alors dans notre répertoire : greeter.js
#greeter.js
}
var user = "Jane User";
Si nous regardons à l’intérieur nous voyons que rien n’a changé. Ce fichier est une simple copie de notre
code TypeScript. Et c’est normal, notre code n’était ni plus ni moins que du Javascript, il n’y a pas de
conversion à faire.
TYPAGE
Maintenant nous pouvons commencer à profiter de la puissance de TypeScript.
Ajoutons par exemple un type au paramètre que nous attendons dans cette fonction, nous voulons être sûr
que nous affichons bien une chaine de caractère. Sinon, nous voulons que TypeScript nous renvoie une
erreur.
#greeter.ts
function greeter(person : string) {

}
let user = "Jane User";
Les annotations de typage de TypeScript sont des manières simples de stipuler le type de retour d’une fonction,
d’une variable ou d’un paramètre. Dans notre cas, nous appelons la fonction avec un seul paramètre person de
type string.
Nous pouvons essayer de changer l’appel à la fonction afin de lui envoyer un entier.
#greeter.ts
function greeter(person : string) {

}
let user = 1;
Essayons alors de transpiler notre fichier, une erreur apparait :
/usr/src/tsc # tsc greeter.ts

greeter.ts:5:35 - error TS2345: Argument of type 'number' is not assignable to
parameter of type 'string'.
5 document.body.innerHTML = greeter(user);
De manière similaire, si nous essayons de ne pas envoyer le paramètre à la fonction greeter, TypeScript vous
informera que la fonction est appelée avec un nombre inattendu de paramètre.
Dans les deux cas, TypeScript nous offre une analyse statique basée sur la structure du code, et le type de
l’annotation que nous fournissons
Notons que même s’il y a des erreurs, le fichier greeter.js est tout de même créé. Nous pouvons utiliser
TypeScript même s’il y a des erreurs dans notre code. Mais dans ce cas, TypeScript nous informe que notre
code ne va peut-être pas s‘exécuter de la manière attendue.
#greeter.js
}
var user = 1;
INTERFACES
Développons notre échantillon de code :
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {

return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
Ici nous avons une interface qui décrit un objet qui a deux attributs, firstName et lastName. Dans TypeScript,
deux types sont comparables si leur structure interne est compatible. Ceci nous permet d’implémenter une
interface juste en renseignant la structure de l’interface requit, sans faire appel à Implements
Si nous transpilons à nouveau notre fichier, voici le résultat obtenu :

}
var user = { firstName: "Jane", lastName: "User" };
Nous voyons que l’interface est bien implicite dans la transpilation vers Javascript. Il n’y a aucune trace de
l’interface que nous avons écrite plus haut. Elle sert seulement à TypeScript pour contrôler la logique de notre
code.
CLASSES
Pour finir, créons une classe Student avec un constructeur et quelques attributs publics.
Notons que les Classes et les Interfaces fonctionnent bien ensembles, laissant le programmeur décider du
bon niveau d’abstraction.
Également, nous pouvons utiliser public afin de spécifier les arguments du constructeur.
C’est un raccourci qui nous permet d’automatiquement ajouter des attributs à notre class.
Ainsi notre classe Student aura ce prototype :
Student {
firstName : String
middleInitial : String
lastName : String
Fullname : String
}
class Student {
fullName: string;
constructor(public firstName: string,

public middleInitial: string,
public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {

}
let user = new Student("Jane", "M.", "User");
Exécutons à nouveau notre commande favorite tsc greeter.ts et voyons le résultat en JavaScript :
var Student = /** @class */ (function () {

function Student(firstName, middleInitial, lastName) {
this.firstName = firstName;
this.middleInitial = middleInitial;
this.lastName = lastName;
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
return Student;
}());
}
var user = new Student("Jane", "M.", "User");
Ce code parait quelques peu barbare, seulement, c’est un code particulièrement utilisé. Les classes dans
TypeScript sont juste des raccourcis pour de la POO basé sur les prototypes, fréquemment utilisé en Javascript.
Nous pouvons alors facilement constater que l’utilisation de TypeScript permet une approche beaucoup plus
claire, dans la lecture du code comme dans l’architecture de notre programme.
4 PREMIERE APPLICATION
Maintenant que nous avons vu quelques spécifications de TypeScript, nous pouvons d’ores et déjà commencer
à développer notre toute première application Angular.
4.1 CREATION DE L’APPLICATION
Plaçons-nous dans notre répertoire de travail préféré puis exécutons la commande :
ng new first-app
• ng est le nom de la commande qui appelle Angular CLI

• new est l’instruction que l’on donne à la commande ng, ici “créer un nouvelle application”
• first-app est le nom de notre application
/home/user # ng new first-app

CREATE angular4/README.md (1025 bytes)
CREATE angular4/angular.json (3566 bytes)
CREATE angular4/package.json (1312 bytes)
CREATE angular4/tsconfig.json (384 bytes)
CREATE angular4/tslint.json (2805 bytes)
CREATE angular4/.editorconfig (245 bytes)
CREATE angular4/.gitignore (503 bytes)
CREATE angular4/src/environments/environment.prod.ts (51 bytes)
CREATE angular4/src/environments/environment.ts (631 bytes)
CREATE angular4/src/favicon.ico (5430 bytes)
CREATE angular4/src/index.html (295 bytes)
...
added 1112 packages from 1283 contributors and audited 21833 packages in 43.358s
...
Successfully initialized git.
/home/user #
Nous voyons que la commande a créé un certain nombre de fichiers, parmi eux se trouvent :
• Le package.json qui initialise un nouvel environnement NPM.

• Un fichier .gitignore qui fait partie de l’utilitaire git puis à la toute fin un commentaire nous indiquant
que git à correctement été initialisé dans notre environnement.
Exécutons maintenant la commande qui va nous permettre de lancer notre application : ng serve –-open
• serve veut précisément dire “serveur”

• --open (ou juste -o) va automatiquement ouvrir votre navigateur à l’adresse http://localhost:4200/.
/home/user/angular4 # ng serve --open

** Angular Live Development Server is listening on localhost:4200, open your
browser on http://localhost:4200/ **
Date: 2018-06-28T12:50:10.686Z
Hash: e8e3505bb172de5054c9
Time: 8917ms
chunk {main} main.js, main.js.map (main) 10.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial]
[rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.07 MB [initial] [rendered]
i ｢wdm｣: Compiled successfully
Notre navigateur s’ouvre alors !
4.2 STRUCTURE DU PROJET
LE DOSSIER SRC.
Notre application se trouve dans le dossier src/. Tous les components, templates, styles, images, et tout ce que
notre application a besoin va dans ce dossier. Tous les fichiers en dehors de ce répertoire vont aider à builder
notre application.
src
├── app
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ └── app.module.ts
├── assets
│ └── .gitkeep
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── browserslist
├── favicon.ico
├── index.html
├── karma.conf.js
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
├── tsconfig.app.json
├── tsconfig.spec.json
└── tslint.json
Fichier Fonction
app/app.component.{ts,html,css,spec.ts} Définition de l’AppComponent avec un modèle

HTML, des feuilles de styles et des tests
unitaires. C’est le composant root de ce qui
deviendra notre arbre de composants à mesure
que notre application évolue
app/app.module.ts Définition de l’AppModule, le module principal

qui explique à Angular comment assembler
l’application. Tout de suite il ne déclare que
AppComponent mais bientôt nous aurons plus
de composants à déclarer.
assets/* Le répertoire où nous pouvons mettre nos images

ou tout autre chose à copier en gros au moment
de builder notre application.
environments/* Ce répertoire contient 1 fichier pour chacun de

nos environnements, chacun export de simple
variables de configuration à utiliser dans notre
application. Les fichiers sont remplacés «à la
volée» quand nous buildons notre application.
Nous pourrions utiliser différents points d’API

pour développer et pour notre serveur en
production ou bien peut être que nous avons des
clés Analytics différentes. Nous pouvons
également utiliser des services Mocks. Dans tous
ces cas nous rangerons nos variables dans ce
fichier
browserslist Un fichier de configuration qui partage les target

browsers entre les différents outils front-end
favicon.ico Tous les sites veulent avoir l’air soignés dans la

barre des favoris.
index.html C’est la principale page HTML qui est envoyée

quand quelqu’un va visiter notre site. La plupart
du temps nous n’aurons jamais besoin de l’éditer.
Angular CLI ajoute automatiquement tous les
fichiers js et css quand l’application build, donc
nous n’aurons pas à ajouter de balise <script>
ou <link> manuellement
karma.conf.js La configuration de Karma test runner, utilisée

lorsque l’on exécute ng test
main.ts La principale entrée de notre Application.

Compile l’application avec JIT compiler et envoie
le module root de l’application (AppModule) au
navigateur afin de l’exécuter. Nous pouvons
également utiliser AOT compiler sans changer de
code, seulement en ajoutant le paramètre –aot
quand nous exécutons les commandes ng
build et ng serve.
polyfills.ts Différents navigateurs ont différents niveaux de

support pour les standards web. Polyfills nous
aide à normaliser ces différences. Nous devrions
être plutôt sûr avec core-js et zone.js mais nous
pouvons toujours regarder le Browser Support
guide pour plus d’informations.
styles.css Les styles globaux vont ici. La plupart de

temps nous allons vouloir avoir des styles
locaux dans nos composants pour une

meilleure maintenance, mais les styles
affectant toute l’application devront être à un
endroit central.
test.ts C’est le point d’entré principal pour les tests

unitaires. Il a quelques fichiers de configuration
qui pourront nous paraître peu familiers, mais
ce n’est pas quelque chose que nous devrons
éditer.
tsconfig.{app|spec}.json Fichier de configuration du compiler

TypeScript pour l’App Angular
(tsconfig.app.json) et pour les tests
unitaires (ts.config.spec.json)
tslint.json Configuration additionnelle de TSLint avec

Codelyzer, utilisés quand nous éxecutons ng
lint. Le linting permet de garder une syntaxe
de code cohérente.
LE DOSSIER ROOT.
Le dossier src/ est juste un des éléments à l’intérieur du dossier root du projet.
Les autres fichiers nous aident à maintenir, documenter et déployer l’application.
Ces fichiers vont dans le dossier root juxtaposé au dossier src/
first-app/
├── e2e
│ ├── src
│ │ ├── app.e2e-spec.ts
│ │ └── app.po.ts
│ ├── protractor.conf.js
│ └── tsconfig.e2e.json
├── node_modules/...
├── src/...
│ └── karma.conf.js
├── .editorconfig
├── .gitignore
├── .git
├── README.md
├── angular.json
├── package-lock.json
├── package.json
├── tsconfig.json
└── tslint.json
Fichier
Fonction
e2e/ À l’intérieur de e2e/ se trouvent les tests end-to-end. Ils ne doivent pas
être à l’intérieur du dossier src/ car les tests e2e doivent être séparés
des tests de l’application principale. C’est aussi pour cette raison qu’ils
ont leur propre fichier tsconfig.e2e.json.
node_modules/ Node.js créé ce dossier et range tous les modules tiers, listés dans
package.json à l’intérieur
.editorconfig Une configuration simple de notre éditeur, afin d’être sûr que tous le
monde utilise notre projet avec les mêmes configurations basiques.
Beaucoup d’éditeurs supportent le fichier .editorconfig. Voir
http://editorconfig.org pour plus d’informations.
.gitignore La configuration de Git pour être sûr que les fichiers auto-générés ne sont
pas commit vers la source.
angular.json Configuration pour Angular CLI. Dans ces fichiers nous pouvons mettre
différentes valeurs par default et aussi configurer quels fichiers sont inclus
quand notre projet quand il est builder. Voir la documentation officielle
pour en savoir plus.
package.json La configuration npm qui liste tous les packages tiers que notre projet
utilise. Nous pouvons aussi ajouter nos propres custom scripts ici.
protractor.conf.js Configuration end-to-end pour Protractor, utilisée quand nous exécutons ng

e2e
README.md Documentation basique pour notre projet, pré-rempli avec les informations du
CLI.
Il faut mettre à jour ce fichier afin que n’importe qui puisse builder notre app !
tsconfig.json Configuration du compiler Typescript pour que notre IDE prenne et nous
mette à disposition des outils utiles
tslint.json Configuration additionnelle de TSLint avec Codelyzer, utilisé quand nous

exécutons ng lint. Le linting permet de garder une syntaxe de code
cohérente.
5 ARCHITECTURE
5.1 COMPARTIMENTER AVEC LES MODULES
Nous savons déjà construire un module (notre application Angular est un module en soi).
Reprenons l’arborescence de notre projet, et plus particulièrement le dossier app.
...
app
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ └── app.module.ts
...
Nous avons là un fichier app.module.ts et plusieurs fichiers app.component.*
Ceci illustre le but d’un NgModule qui est simplement celui de regrouper les composants et/ou services qui
vont ensemble. Rien de plus, rien de moins.
Nous pouvons donc les comparer à un package Java ou à un namespace en PHP ou C#.
La seule question est : comment choisir ce qui va ensemble ?
Nous pouvons différencier 3 principaux types implicite de modules :
• Des modules de pages;

• Des modules de services globaux;
• Des modules de composants UI réutilisables.
Au minimum, nous créerons des modules de pages (sinon notre application sera vide). Les 2 autres types de
modules sont optionnels, mais nous allons vite en avoir besoin si nous voulons réutiliser et optimiser notre code.
MODULES DE PAGES
Les modules de pages sont les seuls types de modules qui nous intéresserons pour l’instant.
Ce sont des modules avec routing (c.à.d. qu’ils sont connectés par un chemin que l’utilisateur devra emprunter
pour avoir accès au module, ses composants et services). Ils servent à séparer et compartimenter les
composants de notre application.
Par exemple pour nos pages d’inscription, de connexion et de déconnexion, nous pourrions avoir un seul
AccountModule. Puis pour d’autres pages telles qu’une liste d’article, un article seul ou l’ajout et la suppression
d’un article, nous pourrions avoir un seul ArticleModule.
N’importe quel NgModule peut inclure un nombre infini de composants additionnels, ils peuvent être chargé par
le router ou bien appelé depuis le template. Les composants qui appartiennent au même NgModule partagent le
même contexte (c.à.d. qu’ils ont accès les uns aux autres).
5.2 LES COMPOSANTS D’UNE APPLICATION ANGULAR
Un composant contrôle une partie de l’écran appelé une vue (view), cette vue peut appeler d’autres
composants et leurs vues respectives et former ce que l’on appelle une hiérarchie de vues. Par exemple :
• Une page entière peut être un seul composant MAIS;

• Une barre de navigation aussi;
• Un champ de recherche;
• Un simple bouton de connexion aussi.
Ce système nous permet de définir arbitrairement des parties plus ou moins complexes de l’écran qui peuvent
être créés, modifiées ou bien détruites en tant qu’entité distincte du reste de l’application.
Ces successions de vues définies en composants appartiennent à différents NgModules.
C’est le cas tout particulièrement dans une librairie UI (d’interfaces utilisateurs).
Quand nous créons un composant, il est directement associé à une seule vue, appelé la vue hôte (host view).
La vue hôte peut être la racine d’une autre succession de vue, qui elles-mêmes peuvent contenir d’autres vues
qui seront à leur tour la vue hôte d’autres composants. Ces composants peuvent être dans le même NgModule
ou bien importés depuis d’autres NgModules et emboités jusqu’à n’importe quelle profondeur.
TEMPLATES, DIRECTIVES, AND DATA BINDING
Un Template ça peut ressembler à ça :
<div class="auth-page">
<div>
<h1>{{ title }}</h1>
<p>
<a [routerLink]="['/login']" *ngIf="authType == 'register'">Have an account?</a>
<a [routerLink]="['/register']" *ngIf="authType == 'login'">Need an account?</a>
</p>
<app-list-errors [errors]="errors"></app-list-errors>
<form [formGroup]="authForm" (ngSubmit)="submitForm()">
<fieldset [disabled]="isSubmitting">
<fieldset>
<input
formControlName="username"
placeholder="Username"
type="text"
*ngIf="authType == 'register'" />
</fieldset>
<fieldset>
<input
formControlName="email"
placeholder="Email"
type="text" />
</fieldset>
<fieldset>
<input
formControlName="password"
placeholder="Password"
type="password" />
</fieldset>
<button [disabled]="!authForm.valid" type="submit">
{{ title }}
</button>
</fieldset>
</form>
</div>
</div>
Un template combine HTML et balises Angular qui peuvent modifier les éléments du HTML avant même qu’ils
soient affichés.
Grace à ces nouvelles notations, Angular nous offre tout un florilège de fonctionnalités qui nous permettrons de
synchroniser le template avec le component qui lui ai associé.
Il est ainsi possible de propager une donnée du component vers le DOM, du DOM vers le component et les deux
à la fois. Angular nomme ces fonctionnalités ainsi :
• Les Directives, apportes la logique de programmation à nos template, comme des structures
conditionnelles, des boucles, des changements dans le DOM sur les propriétés des éléments et encore
bien des choses ;
*ngIf="authType == 'register'"
• L’Interpolation connectent les données de notre application avec le DOM ;
<h1>{{ title }}</h1>
• Le Data Binding permet de modifier le DOM en fonction d’un modèle, si un changement est intervenu
sur ce dernier ;
• Le Property binding permet de mettre à jour le DOM à partir d’un modèle, si un changement est apporter
à une valeur de ce dernier ;
• L’Event binding est le fait que les actions de l’utilisateur permettent d’exécuter une fonction du
component associé suite à un évènement émis par un des éléments du DOM.
Avant qu’une vue ne soit affichée, Angular évalue les Directives et résout les Binding Markups (les annotations
qui nous permettent d’utiliser ces fonctionnalités) dans le template afin de modifier le HTML et le DOM selon la
logique de notre programme.
En résumé : Angular lit d’abord le template et remplace toutes les valeurs de nos interpolations ensuite il résout
les directives et envois une première version du html à notre utilisateur. Il va ensuite faire en sorte que les données
du DOM restent synchroniser avec les components tout en suivant la logique de notre programme. Traquant le
moindre évènement que l’utilisateur pourra envoyer à notre application.
Notre template pourra également utiliser des Pipes, qui améliorent l’expérience utilisateur par la transformation
de l’affichage des valeurs. Nous pourrons par exemple les utiliser afin d’afficher la date ou bien les valeurs
monétaires d’une manière appropriée à langue de l’utilisateur. Angular a déjà des fonctions pipes prédéfinies
mais nous pourront en créer de nouvelles.
Grace à tout ça, le template que nous avons plus haut peut être interprété en HTML et ressembler au final à ceci
:
<div>
<h1>Connexion</h1>
<p>
<a href="register" >Need an account?</a>
</p>
<ul>
Des erreurs sont survenues lors de la soumission du formulaire
<li>Mot de passe ou nom d'utilisateur incorrect</li>
</ul>
<form action="/">
<fieldset disabled="disabled">
<fieldset>
<input
placeholder="Email"
type="text" />
</fieldset>
<fieldset>
<input
type="password" />
</fieldset>
<button disabled type="submit">
Connexion
</button>
</fieldset>
</form>
</div>
</div>
Ou bien à cela :
<div>
<h1>Inscription</h1>
<p>
<a [routerLink]="['/login']" *ngIf="authType == 'register'">Have an account?</a>
</p>
<ul>
Des erreurs sont survenues lors de la soumission du formulaire
<li>Veuillez renseigner un nom d'utilisateur visible par tous</li>
</ul>
<form action="/">
<fieldset disabled>
<fieldset>
<input
formControlName="username"
placeholder="Username"
type="text" />
</fieldset>
<fieldset>
<input
placeholder="Email"
type="text" />
</fieldset>
<fieldset>
<input
type="password" />
</fieldset>
<button disabled type="submit">
Inscription
</button>
</fieldset>
</form>
</div>
</div>
5.3 SERVICES ET INJECTION DE DEPENDANCES
En ce qui concerne les données et la logique qui ne sont pas associés avec une vue spécifique, et que nous
voulons partager entre nos composants, nous pouvons créer un Service.
Un service est une classe qui peut directement être injectée à l’intérieur d’un composant client en tant que
dépendance.
Les services et l’injection de dépendances nous permet de garder des composant qui ne réclament pas de
données au serveur, ne valident pas d’entrée d’utilisateur ou n’écrivent pas directement dans la console.
Ils délèguent toutes ces taches aux services.
ROUTING
Le Module Router d’Angular nous donne accès à un service qui nous permet de définir un chemin de navigation
à travers les différents états de notre application et la hiérarchie des vues.
Elle est construite autour des principes de base de la navigation sur le Web :
• Entrer une URL dans la barre d’adresse et le navigateur nous présente la page correspondante;
• Cliquer sur un lien dans la page et le navigateur nous dirige vers une nouvelle page;
• Cliquer sur la flèche de retour de notre navigateur va lire l’historique pour nous renvoyer à la dernière
page visitée.
Bien entendu, notre Router va renvoyer l’utilisateur vers des vues et non des pages.
Lorsqu’un utilisateur clique sur un lien ou bien entre l’url de votre site, Angular intercepte le comportement de
son navigateur et nous affiche la bonne hiérarchie de vue.
Nous parlons de lien cliquable ou bien d’url mais nous pouvons demander au Router d’attendre n’importe
quel stimulus venant de l’utilisateur comme cliquer sur un bouton, insérer un fichier ou copier un texte. Le
router inscrit toute l’activité dans l’historique du navigateur et donc navigation peut fonctionner correctement.
Pour définir ces chemins nous allons associer des routes à des composants en utilisant une syntaxe «URL
like» qui intègre les données de notre programme. Nous pouvons alors appliquer la logique de notre
programme afin de décider quelle vue peut être affiché ou non avec nos propres règles d’accès.
5.4 RECAPITULATIF
Les modules sont comparables à des namespaces, ils ne servent qu’à regrouper les services et les composants
dans le même contexte afin qu’ils aient accès les uns aux autres.
Un composant contrôle une partie de l’écran appelé une vue, il y en a une seule par composant. Forgée à
partir d’un template, cette vue peut appeler d’autres composants et leurs vues respectives et former ce que l’on
appelle une hiérarchie de vues. Un composant peut être créé, modifié ou supprimé dans la hiérarchie des vues
à la volée et de manière distincte du reste de l’application.
Les services regroupent la logique et les données communes à plusieurs composants. Ils permettent de
séparer la logique métier de l’interface utilisateur. Ils sont injectés en tant que dépendances dans chaque
composant qui en a besoin.
Le routeur est un module qui nous fournit un service qui va nous permettre de connecter plusieurs
hiérarchies de vues à l’aide d’URL. Nous pouvons ainsi faire naviguer l’utilisateur à travers notre
application, avec tous les avantage d’Angular, sans pour autant que l’utilisateur ne soit déstabilisé par rapport
à l’utilisation normale qu’il a de son navigateur (gestion de l’historique, retour en arrière ou en avant).
Mettons maintenant tout ça en pratique. Nous allons enrichir notre application test avec notre premier
composant.
6 RETOUR SUR NOTRE APPLICATION
6.1 LE MODULE PRINCIPAL, APPMODULE
Nous avons déjà créé plus haut notre premier module.
L'application entière est rangée dans un module appelé AppModule et il en sera de même pour toutes nos futures
applications.
Le module principal est défini dans un fichier appelé app.module.ts à la racine du dossier app/.
Ouvrons ce fichier ensemble et analysons-le de plus prêt :
import { AppComponent } from './app.component';

import {HomeModule} from "./home/home.module";
// 1 Initialisation du module
@NgModule({
/* 2 Déclarations des components qui composent le module */
declarations: [
AppComponent
],
/* 3 Import des différents modules dont nous allons avoir besoin dans toute notre
application */
imports: [
BrowserModule
],
/* 4 Définition des services que nous allons utiliser. Ici nous ne déclarons pas
encore de service */
providers: [],
/* 5 Le module AppModule à besoin d'un composant à bootstraper, c.à.d qu'il a besoin
d'un composant autour duquel il va fonctionner et qu’il va afficher en premier, par
défaut Angular CLI en créé un, l’appelle AppComponent et l’assigne automatiquement */
bootstrap: [AppComponent]
})
export class AppModule { } //5 La class AppModule et son export
Ce fichier effectue plusieurs choses (6 en tout).
• (1) Il définit le module principal de notre application, appelé AppModule par convention.
• (2) Il déclare le component principal de notre application.
• (3) Il importe les différents modules dont nous allons avoir besoin dans toute notre application. (Ici
BrowserModule)
• (4) Il fournit les services communs à tous les modules de notre application.
• (5) Il indique à l’application qu’elle peut bootstraper sur notre AppComponent déclaré plus haut.
• Finalement JavaScript exporte notre class AppModule afin qu’elle soit accessible de l’extérieur.
Attention ! : Il faut bien noter que chacun de ces mots ont leur importance.
Dans notre fichier est écrit la définition du notre module principal. C’est une Classe nommée AppModule sur
laquelle est ajouté le décorateur @NgModule. Ce décorateur est un gros objet qui va se construire autour d’un
plus petit objet que nous allons lui fournir en premier argument. C’est ce dernier qui va définir le cœur de notre
component.
Dans cet objet nous indiquons que nous voulons que le module déclare les components qu’il veut regrouper.
Nous lui demandons d’importer une liste d’autre modules qui nous fourniront des services et des components
déjà développés pour nous et dont nous aurons besoin. Ensuite nous lui indiquons qu’il doit fournir une liste de
service aux components déclarés plus haut.
Le dernier attribut de cet objet est un cas particulier du module principal de n’importe quelle application Angular.
Lorsque nous définissons un module sur lequel l’application entière va se baser, nous avons besoin d’indiquer à
cette application un composant parent de tous les autres composants. Ce composant sera accompagné
d’une vue qui sera la première vue de notre hiérarchie de vue. Pour faire simple ce composant sera notre page
entière.
6.2 LE COMPOSANT PRINCIPAL
Passons maintenant à notre composant principal, AppComponent.
Rendons-nous une fois de plus à la racine du dossier app/ et ouvrons le fichier app.component.ts.
// Imports
import { Component } from '@angular/core';
/*1 Déclaration du component à l'aide du décorateur @Component */

@Component({
// 2 Nom donné au component afin de pouvoir l'appeler autre part dans notre
programme
selector: 'app-root',
// 3 Chemin relatif vers le template que le component va devoir rendre à
l'utilisateur
templateUrl: './app.component.html',
// Chemin relatif vers le fichier de style de notre template
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app'; // 5 Une variable définie en tant qu'attribut de notre class
Component
}
Ici rien de très compliqué. Ce fichier fait 4 choses intéressantes :
• (1) Il indique que la classe AppComponent est un composant;

• (2) Le sélecteur de ce composant sera alors app-root;
• (3) Il indique le chemin vers son template et son fichier de style associés.
• (4) Il déclare un attribut title à l’intérieur de la classe AppComponent et l’initialise avec la chaine de
caractère «app »
Donc nous avons une Classe AppComponent sur laquelle est ajouté le décorateur @Component, même principe
que pour @NgModule ce décorateur attends un objet en seul argument. Dans cet objet nous indiquons que le
sélecteur de ce composant sera «app-root». C’est le nom que nous allons utiliser pour appeler ce component.
Dans le cas du component principal, son sélecteur est par convention «app-root». Il est appelé dans le fichier
index.html par ce nom.
Ensuite il est indiqué les URI relatifs jusqu’au template, qui est un fichier .html et jusqu’à la feuille de style qui
sera joint au template de manière totalement transparente pour nous.
Puis, nouvelle chose pour nous, un attribut est déclaré dans notre Class AppComponent. Notez juste sa
présence, nous verrons son utilité dans un instant.
6.3 LE TEMPLATE PRINCIPALE
Jetons maintenant un léger coup d’œil au template associé à ce composant. Il est situé dans le même répertoire
que notre fichier app.component.ts et se nomme app.component.html.


<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZ
pZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2M
y4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSI
jQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+C
iAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJ
oNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogI
Dwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of
Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-
cli/wiki">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular
blog</a></h2>
</li>
</ul>
Voici donc le template associé à notre composant principal, c’est lui qui s’est affiché tout à l’heure lorsque notre
navigateur s’est ouvert.
Ce fichier est composé à 99% de HTML standard, donc rien de particulier mis à part l’annotation {{ title }}.
C’est en fait une référence à l’attribut title du component AppComponent. Lorsque notre composant va
interpréter le template, il va simplement remplacer ce qui se trouve entre {{}} par la valeur d’un attribut dont
nous aurons renseigné le nom et qui est disponible dans AppComponent.
Tous ce que nous avons vu jusqu’à présent ne nous a servi qu’à afficher un titre dont le dernier mot est la valeur
de l’attribut title de notre Class AppComponent.
7 LES COMPONENTS ET LES DONNEES DYNAMIQUES
Pour ce chapitre, imaginons que notre entreprise ait un client qui a décidé de développé une application qui
servira à lister les vinyles qui sont dans ses étagères.
Nous sommes en charge de créer le socle de l’application et de développé le composant de l’application qui
affichera un aperçu de la fiche d’un seul vinyle. Ce composant sera un élément d’une liste le plus souvent, ou
bien simplement un aperçu d’un vinyle.
Pour les besoins du développement, l’équipe s’est concerter à propos de la nomenclature et de l’architecture de
l’application et a décidé que le composant SingleVinylPreviewComponent devra se trouver dans le module
de page VinylModule. Dans ce module seront rangés tous les composants et services relatifs à l’affichage des
pages en rapport avec les vinyles.
Nous avons déjà mis en place le socle de notre application, ajoutons-y tous de suite le module VinylModule
puis un composant SingleVinylPreviewComponent.
Angular CLI fait ça très bien pour nous, nous n’aurons que deux commandes à taper.
La commande generate module qui prend cette forme :
ng generate module chemin/depuis/app/nom-du-module –options.
Pas besoin d’options dans notre cas nous voulons simplement ajouter un nouveau module à notre application.
Tapons tout de suite cette commande dans la console à la racine de notre projet et voyons le résultat.
> ng generate module vinyl

CREATE src/app/vinyl/vinyl.module.spec.ts (267 bytes)
CREATE src/app/vinyl/vinyl.module.ts (189 bytes)
Angular nous a créé un dossier vinyl/ et deux fichiers contenant déjà quelque chose.
Le premier pèse 267 octets et est un fichier qui accompagne chaque module, service ou component et dont la
nomenclature terminera systématiquement par .spec.ts. C’est une base permettant d’écrire les tests
unitaires relatifs aux fichiers nouvellement créés. Nous nous y attarderons beaucoup plus loin dans la
formation, notez simplement qu’ils existent pour l’instant et qu’ils seront créés automatiquement à chaque
nouveau module, composant ou service.
Ce fichier est précédé donc logiquement par un deuxième fichier, qui lui est bien le fichier contenant le module
que nous voulions créer. Il s’appelle donc vinyl.module.ts.
Sans plus attendre ajoutons un composant à notre module. Pour des raisons de clarté, je vous propose d’installer
ce component dans un dossier components/ à l’intérieur du dossier vinyl/, car il y sera rangé avec tous les
autres éléments qui serviront à construire nos pages vinyles.
La commande de création de composant est tout à fait similaire à celle de création de module, elle se présente
sous la même forme : ng generate component chemin/depuis/app/nom-du-component –options
Notre composant sera donc rangé dans le dossier vinyl/ relatif à VinylModule, dans un dossier components/
et se nommera singleVinylPreview. Son chemin par rapport au dossier app/ sera donc /vinyl/pages/
singleVinylPreview.
Nous avons tous les éléments pour taper la commande. Voyez plutôt.
> ng generate component vinyl/components/single-vinyl-preview

CREATE src/app/vinyl/components/vinyl-list/single-vinyl-preview.component.css (0
bytes)
CREATE src/app/vinyl/components/vinyl-list/single-vinyl-preview.component.html (29
bytes)
CREATE src/app/vinyl/components/vinyl-list/single-vinyl-preview.component.spec.ts
(650 bytes)
CREATE src/app/vinyl/components/vinyl-list/single-vinyl-preview.component.ts (284
bytes)
UPDATE src/app/vinyl/vinyl.module.ts (285 bytes)
La commande nous retourne alors l’information qu’elle a bien créé un nouveau composant réparti en 4 fichiers
puis a mis à jour le fichier principal de notre VinylModule. Dans l’ordre l’utilitaire a créé :
• Une feuille de style vide relative au composant, nommée logiquement single-vinyl-

preview.component ;
• Un fichier html servant de template à notre composant, contenant pour l’instant quelques
caractères : single-vinyl-preview.component.html ;
• Un fichier relatif au tests unitaires du composant : single-vinyl-preview.component.spec.ts ;
• Et pour finir le fichier principal de notre composant : single-vinyl-preview.component.ts.
Angular CLI à d’ailleurs déjà ajouté notre composant à la liste des composants déclarés dans notre module
VinylModule voyez plutôt le fichier vinyl.module.ts :
@NgModule({
imports: [
CommonModule
],
declarations: [SingleVinylPreviewComponent]
})
export class VinylModule { }
Il a importé la Classe de notre composant dans le fichier, puis l’a ajouté au tableau des déclarations. Notre
composant est alors accessible partout à l’intérieur de ce module.
Pour l’instant le module de routage n’est pas encore mis en place, nous nous en occuperons plus tard, ce n’est
pas notre travail actuellement. Cependant nous voulons quand même pouvoir interagir avec notre composant
afin de pouvoir tester le résultat de notre code.
Pour ce faire nous avons besoin que notre SingleVinylPreviewComponent soit accessible depuis le
composant principal de notre application qu’est AppComponent. Les modules ont la capacité de déclaré
des composants, d’importer des modules, mais également d’exporter des composants afin qu’ils deviennent
accessibles à travers le module qui les exportes. Dans le fichier vinyl.module.ts, ajoutons une ligne qui
indiquera à notre module qu’il faut qu’il export le composant SingleVinylPreviewComponent. Puis importons
le module VinylModule dans le module principal de notre application AppModule.
#vinyl.module.ts
...
@NgModule({
imports: [
CommonModule
],
declarations:[SingleVinylPreviewComponent],
exports:[SingleVinylPreviewComponent]
})
Puis :
#app.module.ts
...
import {VinylModule} from "./vinyl/vinyl.module";
...
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
VinylModule
],
...
Cette petite manipulation a rendu notre composant SingleVinylPreviewComponent accessible partout depuis
l’application.
Nous n’avons plus qu’à l’appeler dans notre template principal afin qu’il soit affiché.
Pour ce faire, une nouvelle balise nous a été rendu accessible par Angular lors de la déclaration du composant,
elle porte le nom du sélecteur de notre composant. Par défaut la nomenclature appliquée est alors app-nom-
du-composant, ici logiquement, ce serait app-single-vinyl-preview mais allons tous de même vérifier dans le
fichier single-vinyl-preview.component.ts à la ligne de la déclaration du sélecteur.
...
@Component({
selector: 'app-single-vinyl-preview',
templateUrl: './single-vinyl-preview.component.html',
styleUrls: ['./single-vinyl-preview.component.css']
})
...
La théorie étant bonne, nous n’avons plus qu’à supprimer le code du template par défaut en trop et ajouter
simplement notre balise <app-single-vinyl-preview>.
#app.component.html
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<app-single-vinyl-preview></app-single-vinyl-preview>
Recharger l’application dans votre navigateur et admirez le travail !
Notre composant est bien affiché sur notre page d’accueil, nous allons maintenant pouvoir commencer à le
tester.
7.1 TEMPLATING
INSTALLATION D’UN FRAMEWORK CSS MINIMALISTE
Tout d’abord ajoutons le minimum de css dont nous aurons besoin tout au long de cette application.
Nous allons faire ça très simplement grâce à Angular, NPM et toute la communauté qui entoure ces outils.
Pour faire simple et ne pas prendre de place dans notre projet minimaliste, nous allons utiliser un framework
css des plus simple, qui porte très bien son nom, j’ai nommé Mini.css. Peut-être avez-vous déjà entendu parler
de Bootstrap et bien Mini.css par du même principe. Il met en place un css et une grille déjà construite. La
différence est que Mini.css utilise au maximum les balises et attributs de base de HTML et CSS afin que
nous n’ayons pas à apprendre à l’utiliser.
Premièrement, ouvrons notre terminal à la racine notre application comme toujours. Puis nous allons taper une
commande que nous connaissons déjà, elle permet d’ajouter un module à la liste des packages NPM :
npm install --save mini.css
Resultat :
> npm install --save mini.css

+ mini.css@3.0.0
added 1 package from 1 contributor and audited 21758 packages in 10.054s
NPM nous retourne que le package s’est correctement installé, passons à l’étape suivante.
Il faut maintenant intégrer le nouveau css à notre application Angular. Pour ce faire, la démarche est très
simple. Nous devons ouvrir le fichier angular.json qui se trouve à la racine de notre projet puis nous rendre vers
les environs de la ligne 25 et ajouter le chemin vers la feuille de style du package nouvellement installer à la liste
des styles.
Mais quel chemin renseigner à Angular ?
Comme nous le voyions tout à l’heure, NPM range tous les modules qu’il installe dans le répertoire
node_modules/. Ce répertoire est conjoint au fichier angular.json.
Notre package se trouve dans un dossier qui porte son nom. Et selon la documentation de Mini.css, le fichier
CSS à importer, se trouve dans le dossier dist/ et porte le nom de mini-default.css.
milligram/
├── examples/
│ └── index.html
├── dist/
│ ├── milligram.css
│ └── milligram.min.css
├── license
└── readme.md
Le chemin sera donc finalement node_modules/mini.css/dist/mini-default.css.
Ajoutons ce chemin à la liste des fichiers style que notre application Angular va compiler avant d’envoyer le
template à nos utilisateurs.
#angular.json
...
"styles": [
"src/styles.css",
"node_modules/mini.css/dist/mini.default.css"
],
...
Relancer notre application avec ng serve. Le résultat devrait d’ores et déjà être visible.
L’INTERPOLATION
Nous l’avons vu plus haut nous pouvons faire pleins de choses très puissantes de manière très simple avec des
templates. Nous allons tout de suite passer en revue toutes les fonctionnalités qu’Angular nous offre et les
différentes façons de les appliqués.
L’interpolation est le premier outil mis à notre disposition pour que l’on puisse dynamiser nos templates. Grace
à l’interpolation nous pouvons afficher la valeur d’un attribut de la classe de notre component, directement dans
le template, toujours en gardant scrupuleusement cette valeur à jour dans le DOM en prenant en compte les
changements qui pourraient lui être apportés.
L’interpolation s’effectue en ajoutant les caractères {{ et }} autour du nom de l’attribut que l’on vise dans le
template.
Pour reprendre l’exemple que nous avions vue plus haut, reprenons notre SingleVinylPreviewComponent et
essayons d’afficher ce que pourrait être un vinyle à notre utilisateur.
Tout d’abord retournons dans notre component puis ajoutons notre objet vinyle et ses attributs.
Pour l’instant notre objet Vinyl prendra cette forme :
Vinyl {
title : String
imageUrl : String
artiste : String
releaseYear : Number
}
Cet objet contient le titre du vinyle, l’url d’une photo de la pochette, le nom de l’artiste compositeur et l’année de
sortie du disque. Tous les attributs de cet objet seront des Strings pour l’instant, excepté l’attribut releaseYear
qui sera un Number.
Ajoutons un objet exemple à notre component.
#vinyl-list.component.ts
...
export class SingleVinylPreviewComponent implements OnInit {
public vinyl: object = {

title: 'Bad',
artiste: 'Michael Jackson',
imageUrl: 'https://img-4.linternaute.com/PI-
AYLwdrSAlAsBVE53jZasrWYM=/350x/smart/4184ae2fdda74cb5b2e150bc98efebe8/ccmcms-
linternaute/19006.jpg'
releaseYear: 1987,
};
constructor() { }
ngOnInit() {
}
Puis à l’intérieur de notre template faisons simplement référence à notre objet et ses attributs de cette manière :
{{ nomObjet.NomAttribut }}
Pour le reste nous allons tout simplement enrichir notre template avec du pur html ainsi que les classes de
Milligram, afin de mettre en forme l’affichage de notre vinyle.
#vinyl-list.component.html
<div class="card">
<div class="section media">
<img height="150" src="{{vinyl.imageUrl}}" alt="Album photo of {{vinyl.title}}" >
</div>
<div class="section">
<h3>{{vinyl.title}} <br><small>par {{vinyl.artiste}}</small></h3>
</div>
<div class="section" style="text-align: center">
<h5 class="bold">{{vinyl.releaseYear}}</h5>
</div>
</div>
Si vous enregistrez les modifications apportées aux fichiers et ouvrez votre navigateur, vous verrez
immédiatement le résultat.
Nous remarquons que toutes les valeurs que nous avions renseignés au component ont correctement été
interpolés à l’intérieur du template. Les attributs de type String s’affichent de la manière attendue, ainsi que
l’année de sortie, bien qu’étant un attribut de type Number, il a été Caster en String afin d’être convenablement
affichée.
L’interpolation est donc un très bon moyen pour synchroniser les données du component dans un template.
Angular va prendre les valeurs dans le composant et essaye de les interprété au mieux et même de les convertir
dans le bon type afin de les afficher. Et bien sûr tout ça en gardant toutes les valeurs à jour.
PROPERTY BINDING
Nous allons maintenant voire comment modifier les propriétés des éléments du DOM.
Grâce au property Binding, nous pouvons affecter la valeur d’une propriété d’un élément du DOM à la valeur
d’un attribut contenu dans le component. Cette technique est toujours du data binding one-way. Le component
va modifier la vue et non l’inverse.
Ce data-binding peut s’écrire de différentes façons, voyons plutôt :
<div property="{{value}}"> </div> // 1 Interpolation
<div [property]="value"> </div> // 2 Vrai property binding
<div bind-property="value"> </div> // 3 Seconde méthode
Dans le premier cas, nous affectons la valeur de la propriété avec une interpolation. Souvenez-vous que
l’interpolation ne renvoie que des Strings au final, nous ne pouvons donc pas affecter de propriété avec
un Number ou un Boolean avec cette méthode.
La seconde méthode a été développée afin de pouvoir régler ce problème. Grâce à cette méthode nous pouvons
affecter n’importe quel type de variable primitif aux propriétés de nos éléments (String, Number, Boolean etc…).
Et même plus que ça, nous pouvons maintenant affecter une condition plutôt qu’un simple attribut. Notre balise
ressemblera donc à ça :
<div [property]="value == true"></div>
La propriété pourra alors prendre deux valeurs, True ou False, en fonction du résultat de la condition que nous
lui aurons donné. Vous ne voyez peut être pas l’intérêt tout de suite, mais imaginez que nous avons un formulaire
que nous ne voulons soumettre seulement si un champ est correctement rempli. Nous pourrions alors jouer sur
le property binding du bouton de soumission de formulaire, pour qu’il n’ait l’état « Enable » que lorsque nous
l’aurons décidé, tenez par exemple.
<button [disabled]="value == null" >Envoyer</button>
Dans ce cas, le bouton aura la propriété disabled, tant que la variable value sera null.
La méthode numéro 3 est une seconde façon de noter le Property Binding, plus en phase avec les normes
W3C, elle sera utilisée de manière préférentielle si l’accessibilité et le référencement fond partie des
problématiques de votre projet.
Le property Binding peut être effectué :
• Sur un élément du DOM. Par exemple

<img [src]="..." />
• Sur un attribute directive. Par exemple
<div [ngClass]="...">
• Sur la propriété d’un component. Par exemple
<page [color]="...">
Nous avons déjà vue comment se passait le property binding sur un élément du DOM juste au-dessus.
LE PROPERTY BINDING SUR UN ATTRIBUT DIRECTIVE
Le Property Binding sur un attribute directive fonctionne de la même manière. Pour rappel, un attribute
directive est une directive modifiant le comportement ou l'apparence d'un élément. Angular propose déjà une
série d'attribute directives tels que ngClass ou ngStyle. Imaginons que l'on veuille changer la couleur du texte
de notre div à l'aide des styles CSS. Angular propose d'utiliser la directive ngStyle afin d'appliquer
dynamiquement un attribut de style CSS sur l'élément courant. Pour réaliser cette prouesse, la
directive ngStyle utilise le Property Binding. Nous pouvons donc nous créer une propriété couleur dans notre
component et appliquer cette couleur en tant que style CSS. Voilà comment nous l’écririons dans notre template :
<div [ngStyle]="{color:couleur}">Contenu de la div</div>
Le Data Binding va remplacer la variable couleur dans le template par sa valeur définie dans le Component.
Modifions le template de notre vinyle afin d’utiliser correctement le Property Binding.
Nous n’avons qu’à modifier la notation de la propriété src de la balise image de notre vinyle.
<img height="200" src="{{vinyl.imageUrl}}" alt="Album photo of {{vinyl.title}}">
Par cette ligne :
<img height="200" [src]="vinyl.imageUrl" alt="Album photo of {{vinyl.title}}">
Ceci parait un peu plus lisible. Voyons coté navigateur si notre solution fonctionne.
Rien n’a changé à première vue, c’est la preuve que cela fonctionne. Nous avons bien affecté l’attribue src de
l’image avec la bonne variable.
LE PROPERTY BINDING SUR UNE PROPRIETE D'UN COMPONENT
Nous allons maintenant voire ensemble comment fonctionne le Property Binding d’Angular grâce au décorateur
@Input.
Pour illustrer le property binding, je vous propose de passer l’objet vinyl à notre composant
SingleVinylPreviewComponent directement depuis notre component principal. Il s’agit d’un property binding
classique.
Tout d’abord, rendez-vous dans le component SingleVinylPreviewComponent afin de modifier notre attribut
vinyl.
#single-vinyl-preview.component.ts
...
@Input()
public vinyl: object;
Nous avons simplement effacé l’assignation à la variable vinyl pour enfin lui ajouter le décorateur @Input. Grâce
à ce dernier la variable vinyl de notre composant devient initialisable depuis l’exterieur. Plus précisément, au
moment d’appeler notre composant, je vais spécifier la variable que je veux qu’il utilise et ainsi au moment de
l’initialisation de notre composant, il aura accès à cette variable et pourra travailler dessus.
Regardez plutôt :
Dans notre composant principal ajouter un attribut mjVinyl à la classe de type objet, rigoureusement le même
que celui que nous venons d’effacer dans le composant SingleVinylPreview.
#app.component.ts
...
export class AppComponent {
title = 'Welcome to app!';
public mjVinyl: object = {

title: 'Bad',
linternaute/19006.jpg',
releaseYear: 1987,
};
}
Puis dans le template du même component. Nous avons maintenant accès à la variable vinyl du composant
SingleVinylPreview. De la même manière que les autres Property binding, la référence à cette variable se fait
entre [] puis à droite se trouve notre nouvelle variable mjVinyl.
<h1 style="text-align:center">{{title}}</h1>
<div class="container">
<app-single-vinyl-preview [vinyl]="mjVinyl"></app-single-vinyl-preview>
</div>
Regardons le résultat.
Cela fonctionne. Grace au décorateur @Input, notre SingleVinylPreviewComponent affiche notre objet mjVinyl
sans problème.
EVENT BINDING
Avec le property binding nous avons appris à interagir sur le DOM avec notre component. Nous allons maintenant
voire comment interagir avec nos components à partir d’un élément du DOM. Par exemple, si nous prenons un
bouton, nous pouvons lui assigner une fonction à exécuter. Angular gère ce Data binding à partir
d’évènement, d’où le terme d’Event binding. Grace à ce mécanisme, nous allons pouvoir assigner des
fonctions à des évènements utilisateur. Comme le clique, la frappe sur le clavier etc… La syntaxe reste proche
du property binding :
<button (event)="myFunction()"></button>
<button on-event="myFunction()"></button>
À gauche de l’égalité nous retrouvons le nom de l’évènement entre parenthèses () ou bien précédé de -on
puis à droite, on trouve l’appelle à la fonction qui sera exécutée. Le component interceptera l’évènement sur
le bouton et exécutera immédiatement la fonction attendue.
Par exemple, disons que nous voulons ajouter un bouton à la fiche de notre vinyle, qui modifiera le nom de
l’artiste.
Ajoutons d’abord une fonction à notre component, qui modifiera l’attribut artiste de notre model.
#vinyl-list.component.ts
...
changeArtiste() {
this.vinyl.artiste = 'King of pop';
}
Ajoutons un bouton à notre template
#vinyl-list.component.html
...
</ul>
<button (click)="changeArtiste()">Changer de nom</button>
</div>
Enregistrons le tout et admirons le résultat.
Dans ce cas, nous avons bien un element du DOM qui modifie notre model.
Nous pouvons également créer nos prores Events Binding très simplement afin d’envoyer un évènement d’un
component vers son component parent. Pour illustrer, nous prendrons l’exemple d’un nouveau Component,
qui se chargera d’incrémenter ou de décrémenter une valeur à l’aide de deux boutons et d’envoyer le résultat
via un évènement. Son composant parent se chargera de récupérer cet évènement afin de changer le model
avec la sa valeur.
Pour cette exemple nous allons ajouter un nouveau module, afin d’y rangé les composant d’UI pouvant être
utilisé dans plusieurs Component. Puis nous ajouterons un nouveau component CountingButtonsComponent à
ce module.
> ng generate module shared

CREATE src/app/shared/shared.module.spec.ts (275 bytes)
CREATE src/app/shared/shared.module.ts (190 bytes)
> ng generate component shared/UI/couting-buttons

CREATE src/app/shared/UI/couting-buttons/couting-buttons.component.css (0 bytes)
CREATE src/app/shared/UI/couting-buttons/couting-buttons.component.html (34 bytes)
CREATE src/app/shared/UI/couting-buttons/couting-buttons.component.spec.ts (685
bytes)
CREATE src/app/shared/UI/couting-buttons/couting-buttons.component.ts (304 bytes)
UPDATE src/app/shared/shared.module.ts (303 bytes)
On exporte la classe CountingButtonsComponent à l’extérieur du module Shared.
#shared.module.ts
...
@NgModule({
imports: [
CommonModule
],
declarations: [CoutingButtonsComponent],
exports: [CoutingButtonsComponent]
})
export class SharedModule { }
On importe le module Shared dans le module où nous voulons utiliser notre component. Ici VinylModule.
#vinyl.module.ts
...
@NgModule({
imports: [
CommonModule,
SharedModule,
],
declarations: [SingleVinylPreviewComponent],
exports: [SingleVinylPreviewComponent]
})
Puis nous déclarons notre component dans le template où nous voulons l’afficher.
#single-vinyl-preview.html
...
<app-couting-buttons></app-couting-buttons>
</div>
Nous n’avons plus qu’à modifier la classe CoutingButtonsComponent.
#couting-buttons.component.ts
...
export class CoutingButtonsComponent implements OnInit {
// Voici notre objet émetteur d’évènements.

@Output()
valueChange = new EventEmitter();
// Nous avons besoin d’initialiser la valeur de ce compteur depuis l’extérieur.

@Input()
value = 0;
constructor() { }
ngOnInit() {
}
// Une fonction permet d’émettre la valeur de notre compteur grâce à notre

EventEmitter.
emitValue() {
this.valueChange.emit(this.value);
}
// Une fonction incrémente la valeur puis l’émet

incValue() {
this.value += 1;
this.emitValue();
}
// Une fonction décrémente la valeur puis l’émet.

decValue() {
this.value -= 1;
if (this.value < 0) { this.value = 0; }
this.emitValue();
}
}
Ici nous avons un nouvel élément, le décorateur @Output.
Lorsque @Input se charge de recevoir une valeur. @Output se chargera d’en émettre une. Ainsi, valueChange
est une instance de la classe EventEmitter. Cette classe nous offre un support afin d’émettre un évènement et
une valeur associé. Nous n’avons plus qu’à déclarer notre Event Binding dans le composant où nous voulons
nos boutons.
Écrivons une fonction afin de prendre en charge ce nouvel évènement dans notre composant
SingleVinylPreview. Je vous propose que l’on change l’année de sortie de notre vinyle, à l’aide de notre nouveau
composant. Nous initialiserons alors la valeur de notre compteur à l’année de sortie du disque et nous prendrons
la valeur que retourne l’évènement afin de l’assigner à notre model. Ça fait beaucoup d’explication mais cela se
fait en peu de lignes de code.
#single-vinyl-preview.ts
...
changeReleaseYear(value) {
this.vinyl.releaseYear = value;
}
Puis ajoutons le Property binding et l’Event binding a l’appelle de notre component.
#single-vinyl-preview.component.html
...
<app-couting-buttons
(valueChange)="changeReleaseYear($event)"
[value]="vinyl.releaseYear" >
</app-couting-buttons>
</div>
Ouvrons à nouveau notre navigateur, afin de voir le résultat.
TWO-WAY BINDING
Nous avons, avec cet exemple, déjà créé un Two-way binding. Et oui, notre composant modifie le model à l’aide
d’un évènement envoyé par le DOM ( c’est les boutons + et - ), puis le DOM est impacté en fonction de la
modification de notre model. ( c’est l’année qui change sur la fiche ). Le Two way binding c’est précisément ça,
notre composant travail en Input ET en Output. Angular a simplement confondu ces notations, afin de réduire
la taille du code que nous aurons à écrire. Pour ce faire, ils ont utilisé une combinaison des notations de Property
et d’Event Binding. L’appelle à notre composant binder va simplement changer.
De cette double notation :
(valueChange)="changeReleaseYear($event)"
[value]="vinyl.releaseYear" >
Nous allons passer à cet simple combinaison des deux :
[(value)]="vinyl.releaseYear" >
Nous remarquons que nous avons évincé l’appelle à la fonction du component parent ChangeReleaseYear().
Elle ne nous est plus utile dès l’instant où nous avons choisi d’utiliser cette notation. Elle est totalement prise en
charge par Angular et se déroule maintenant en arrière-plan. Nous pouvons même l’effacée de notre Component.
...
ngOnInit() {
}
changeArtiste() {
this.vinyl.artiste = 'King of pop';
}
Retournons sur notre navigateur. Nous remarquons que le comportement de notre composant n’a pas changé.
Le Two-way binding nous à éviter d’écrire une nouvelle fonction générique, en rendant la déclaration au
component plus simple, sans avoir a changé un seul brin de code coté composant fils. Simple et efficace !
8 DIRECTIVES
Les directives sont des instructions intégrées dans le DOM que nous utiliserons presque systématiquement
lorsque nous créerons des applications. Lorsqu’Angular lit le template et voit une directive, il suit les instructions
qui correspondent à cette directive.
Nous pouvons créer nos propres directives, mais nous n’aborderons pas ce sujet dans ce cours, celui-ci relève
de techniques plus avancées. Néanmoins voici quelques liens si vous voulez vous renseigner sur le sujet :
http://www.learn-angular.fr/les-directives/
https://angular.io/guide/attribute-directives
https://www.tutorialspoint.com/angular4/angular4_directives.htm
Nous allons voir deux types de directives. Ce sont les principales. Les directives structurelles et celles par attribut.
Il existe un autre type de directive, les directives de composant. Ce sont elles qui sont en charge de l’instanciation
et de leur exécution durant le programme.
8.1 LES DIRECTIVES STRUCTURELLES
Les directives structurelles sont en charge (comme leur nom l’indique) de la structure du DOM, leurs rôles sont
de manipulé les éléments du DOM. Elles sont reconnaissables par un * les précédents. Nous allons en voir deux
pour l’instant même s’il en existe pas mal d’autres :
• *ngIf sert à afficher des éléments du DOM de manière conditionnel

• *ngFor sert à itérer les données contenues dans un Array
NGIF
Un élément du DOM auquel nous ajoutons la directe *ngIf=”condition” ne s’affichera que si la condition
renvoi un résultat Truthy (la valeur est égale à true ou bien la variable est définie et non nul). Comme une
structure conditionnel classique en somme.
Imaginons que nous voulons créer une fonction édition sur notre component SingleVinylPreview. Alors les
boutons que nous avons créés sur le template devraient s’afficher seulement si nous sommes en train d’’éditer
la fiche de notre vinyle. Développons tous de suite cette fonctionnalité.
Nous avons besoin d’une nouvelle variable isEditing à l’intérieur de notre component. Et d’une fonction qui va
faire passer sa valeur de true à false et inversement.
...
isEditing = false;
constructor() { }
ngOnInit() {
}
switchEditMode() {
this.isEditing = this.isEditing ? false : true;
}
...
Puis ajoutons la directive *ngIf à la div de nos boutons + et - et utilisons le bouton Modifier dans le but de
quitter le mode et de passer en mode edition.

<button (click)="switchEditMode()">Modifier</button>
</div>
<div class="section" *ngIf="isEditing">
[(value)]="vinyl.releaseYear" >
</div>
Voyons si cela fonctionne :
Tout se déroule comme nous l’avions prévu, nous voyons ici tout de suite l’intérêt de cette directive.
Passons tout de suite à l’exemple suivant afin d’illustrer la deuxième directive que nous allons étudier.
NGFOR
Nous n’allons pas garder notre application avec un seul vinyle indéfiniment, rajoutons quelques nouveaux
exemples à notre liste du vinyle. Pour ça, rangeons les dans un tableau à l’intérieur du component
AppComponent.
#app.component.ts
...
public vinyls: Array<object> = [{
title: 'Bad',
linternaute/19006.jpg',
releaseYear: 1987,
}, {
title: 'Uprising',
artiste: 'Bob marley and the Wailers',
imageUrl: 'https://img.cdandlp.com/2017/06/imgL/118865816.jpg',
releaseYear: 1980,
}, {
title: 'Hendrix in the west',
artiste: 'Jimi Hendrix',
imageUrl: 'https://upload.wikimedia.org/wikipedia/en/9/9f/Hendrix_in_the_west.jpg',
releaseYear: 1972,
}, {
title: 'Porgy and Bess',
artiste: 'Louis Armstrong et Ella Fitzgerald',
imageUrl: 'https://media1.jpc.de/image/w600/front/0/8436542011464.jpg',
releaseYear: 1958,
}];
Ici vous notez l’utilisation du type Array<object>. Array est le type générique qui annonce que notre variable
sera un tableau. Quant aux notations <object> elles indiquent que ce tableau contiendra des variables de type
object. À droite de l’égalité nous instançons un tableau grâce aux [], puis à l’intérieur nos objets un par un
séparés par une virgule.
Revenons-en au template de ce même component et déclarons notre directive *ngFor sur notre component
SingleVinylPreviewComponent. Modifions légèrement notre template puis ajoutons notre
#app.component.html
...
<h1 style="text-align:center">{{title}}</h1>
<div class="container">
<div class="row">
<app-single-vinyl-preview *ngFor="let vinyl of vinyls" [vinyl]="vinyl"></app-
single-vinyl-preview>
</div>
</div>
Nous avons rajouté une div avec la class row, juste pour une question de mise en forme. Puis nous avons
déclaré la directive structurelle *ngFor=”let vinyl of vinyls”. Cette directive veut simplement dire :
« Nous instancons tous les objets vinyl du tableau vinyls et les nous les envoyons
dans le DOM. »
Le property binding suivant, [vinyl]=“vinyl”, envoie la variable nouvellement instancée vers notre
component SingleVinylPreview comme nous faisions avant.
Voyons le résultat :
Notre component se répète autant de fois qu’il y a d’objet dans notre tableau, et chaque objet est correctement
envoyé à son component. Nous pouvons également remarquer que chaque component est indépendant des
autres. Nous pouvons modifier la date sur chacun d’entre eux sans impacter le model voisin.
8.2 DIRECTIVES PAR ATTRIBUT
À la différence des directives structurelles, les directives par attribut se charge de modifier le comportement d’un
élément déjà existant dans le DOM. Comme pour les directives structurelles, il y a plusieurs directives par attribut.
Mais nous n’allons-nous intéresser seulement à deux exemples très utiles : ngStyle et ngClass, qui
permettent respectivement d’attribuer des styles ou bien des classes à nos éléments, toujours de manière
dynamique.
NGSTYLE
Cette directive permet d’ajouter ou d’enlever des styles à un element du DOM de manière dynamique. Elle attend
comme contenu un objet JS type clef-valeur. À gauche de sa déclaration se trouvera la clef du style à modifier
et à droite la valeur à laquelle nous voudrons mettre ce style.
Par exemple, imaginons que nous voulons qu’afin que l’utilisateur se repère un peu mieux sur notre application,
il ait un retour visuel du fait qu’il soit en train d’éditer la fiche d’un vinyle. Nous pourrions simplement ajouter une
directive ngStyle sur la couleur de notre date qui regardera la valeur de notre attribut isEditing, pour changer
de valeur en fonction du fait que nous soyons en train de l’éditer ou pas.

<h5 class="bold" [ngStyle]="{color: getDateColor()}">{{vinyl.releaseYear}}</h5>
</div>
Au niveau du template, ajoutons simplement la directive ngStyle comme nous en avons parler juste plus haut.
À gauche de l’égalité nous avons le nom de la directive, puis à droite, un objet JS avec comme attribut la clef
color qui fait référence au style du même nom et qui sera égale à la valeur de retour de notre fonction
getDateColor
getDateColor() {
return this.isEditing ? 'green' : 'black';
}
Dans notre component, nous avons juste à ajouter cette fonction getDateColor qui renverra la bonne couleur
en fonction de la variable isEditing. Cette fonction retourne la valeur green si nous somme en cours d’édition,
black si ce n’est pas le cas.
Essayons tout de suite :
NGCLASS
ngClass ne va pas seulement nous servir à modifier le style d’un élément, mais directement à lui appliquer
une ou plusieurs classes de style en fonction d’une condition.
Pour ce qui est de la notation elle fonctionne de la même manière que ngStyle. Elle attend un objet qui en clef
d’attribut attendra le nom de la classe qui nous intéresse puis comme valeur à cette clef la condition sous laquelle
cette classe doit être appliqué ou pas.
Exemple :
<div [ngClass]="{
'myClass': true,
'mySecondClass': variable == 'value'
}" />
Angular appliquera systématiquement la classe myClass à notre div, par contre il appliquera la classe
mySecondClass seulement si la variable variable est strictement égale à value.
9 PIPES
8 PARTAGEONS LES DONNEES ENTRE NOS COMPOSANTS AVEC LES SERVICES
9 LE ROUTAGE
9.1 PRINCIPES
9.2 BASES
9.3 LAZY LOADING
10 HTTP
10.2 INTERCEPTORS
11 RXJS
11.1 INTRODUCTION A RXJS
11.2 OBSERVABLES ET PROMISES
11.3 SUBJECTS, SUBSCRIBERS ET AUTRES
12 INTRODUCTION AU TESTS UNITAIRES ET FONCTIONNELS

Formation Angular2 5

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Formation Angular2 5

Transféré par

Droits d'auteur :

Formats disponibles

[Tapez ici] [Tapez ici] [Tapez ici]

ANGULAR POUR DÉBUTANT

TABLE DES MATIERES

SUPPORT DE COURS .................................................................................................................................................. 0

1.1 ANGULARJS, ANGULAR 2 ET ANGULAR 4..................................................................................................................... 4

2 MISE EN PLACE DE L’ENVIRONNEMENT ............................................................................................................... 8

2.1 DISCUSSION SUR NOTRE ENVIRONNEMENT ................................................................................................................... 8

3.1 HISTORIQUE ........................................................................................................................................................... 17

4 PREMIERE APPLICATION ....................................................................................................................................... 23

4.1 CREATION DE L’APPLICATION ................................................................................................................................... 23

5.1 COMPARTIMENTER AVEC LES MODULES ..................................................................................................................... 32

6 RETOUR SUR NOTRE APPLICATION .................................................................................................................... 40

6.1 LE MODULE PRINCIPAL, APPMODULE ........................................................................................................................ 40

7 LES COMPONENTS ET LES DONNEES DYNAMIQUES....................................................................................... 45

7.1 TEMPLATING .......................................................................................................................................................... 48

8.1 LES DIRECTIVES STRUCTURELLES ............................................................................................................................. 61

9.1 PRINCIPES ............................................................................................................................................................. 66

10.2 INTERCEPTORS ..................................................................................................................................................... 66

11.1 INTRODUCTION A RXJS ......................................................................................................................................... 66

12 INTRODUCTION AU TESTS UNITAIRES ET FONCTIONNELS ........................................................................... 66

1.1 ANGULARJS, ANGULAR 2 ET ANGULAR 4

Apparu en 2009, Angular est développé par Google et par la communauté

Notez seulement que :

1.4 POURQUOI UNE VERSION 4 ?

Réduction du code généré de 60% en moyenne en production

2 MISE EN PLACE DE L’ENVIRONNEMENT

2.1 DISCUSSION SUR NOTRE ENVIRONNEMENT

• Il est très rapide.

Commençons tout de suite avec notre serveur web

HISTORIQUE DES TECHNOLOGIES JAVASCRIPT

Dans les années 90, on parlait de DHTML

ET NODE.JS DANS TOUT ÇA ?

Apparu en 2009, développé par Ryan Lienhart Dahl

Pourquoi Node.js semble-t-il si différent ? Parce qu'il utilise JavaScript ?

2.3 INSTALLATION SUR WINDOWS, MAC ET LINUX

Installer Node.js : http://nodejs.org/en/download/

Lorsque nous installons Node.js, nous installons également NPM : https://www.npmjs.org/.

2.4 NPM POUR GERER LES DEPENDENCES DE L’ENVIRONNEMENT

NPM = Gestionnaire de package pour Node.js.

Comme Homebrew(OSX), aptitude ou Yum (linux)

Un environnement local avec un fichier package.json par projet

• list ou ls, pour lister la liste des packages

LISTER LES PACKAGES AVEC NPM

Pour ça exécutons la commande :

npm list -g –depth=0

/usr/src/app # npm list -g --depth=0

Exemple, pour afficher les dépendances les plus hautes, tapons :

npm list -g –depth=1

/usr/src/app # npm list -g --depth=1

2.5 INSTALLATION D’ANGULAR CLI WINDOWS, MAC ET LINUX

npm install @angular/cli@latest -g

• Install est la commande NPM qui permet d’installer un nouveau package

/usr/src/app # npm install @angular/cli@latest -g

> @angular/cli@6.0.8 postinstall /usr/local/lib/node_modules/@angular/cli

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4

Angular CLI: 6.0.8

/usr/src/app # npm list -g --depth=0

2.6 INSTALLATION DE GIT

Télécharger la dernière version de Git sur : http://git-scm.com/downloads

git config --global user.name "Votre nom ou pseudo"

Télécharger la dernière version de Git sur : http://git-scm.com/downloads

git config --global user.name "Votre nom ou pseudo"

git config --global user.name "Votre nom ou pseudo"

INSTALLATION DE TYPESCRIPT ET PREMIER FICHIER .TS