Initiation au framework Angular

Plan
 Introduction
 Architecture logicielle
 Installation
 Structure d’un projet
 Premier exemple
 Directives Angular
Introduction
 Angular est un framework qui utilise
TypeScript
 Open-source
 Présenté par Google en 2009
 Permet de créer des applications web
et mobiles
 Front-End
 Single page (SPA)
Différences avec AngularJS
 Angular n'a pas de notion de "portée" ou de contrôleurs, au
lieu de cela il utilise une hiérarchie de composants comme
principale caractéristique architecturale4.
 Angular a une syntaxe d'expression différente, en se
concentrant sur les "[ ]" pour la liaison des propriétés, et de
"( )" pour les liaisons des événements
 Modularité – beaucoup de fonctionnalités de base ont été
déplacées vers des modules
 Angular recommande l'utilisation du langage TypeScript, créé
par Microsoft, qui présente les caractéristiques suivantes:
◦ le principe de classe, à la base de la Programmation Orientée
Objet
◦ le typage statique
◦ les génériques
Différences avec AngularJS
 TypeScript est un sur-ensemble d'ECMAScript 6 (ES6), et est
rétro-compatible avec ECMAScript 5 (c'est-à-dire: JavaScript).
Angular comprend également les principes d'ES6 suivant :
 les fonctions anonymes
 les itérateurs
 boucles for-of
 générateurs dans le style du langage Python
 La réflexion
 Le chargement dynamique
 Compilation asynchrone des modèles
 Itératif rappels fournis par RxJS. RxJS limites de l'état de
visibilité et de débogage, mais ces problèmes peuvent être
résolus avec réactif add-ons comme ngReact ou ngrx.
Architecture Logicielle
 MVVM : Model-View-ViewModel
 Model : représenté en général par une classe référencée par
 la couche d’accés aux données (classe ou interface TypeScript).
 View
 contient la disposition et l’apparence de ce qu’un utilisateur peut
voir l’écran, recevant l’interaction avec l’utilisateur : clic, saisie,
survol...
 ViewModel
 remplace le contr ôleur
dans l’architecture MVC,
 connecté à la vue par
le data binding
,représentédans Angular
par un fichier *.component.ts.
Architecture Logicielle

 Langage utilisé
 HTML pour les vues.
 CSS pour les styles.
 TypeScript pour les scripts depuis la
version 2.
Architecture Logicielle
 Les composants web
◦ Consiste à utiliser des classes sans faire de
l’instanciation statique
 L’injection de dépendance
 Le DOM Virtuel
◦ Une représentation en mémoire du DOM
physique.
◦ Les modifications se font sur ce DOM virtuel
ensuite Angular
◦ s’occupe de les synchroniser vers le DOM
physique
Architecture Logicielle
 Le change detection
 Réalisé par la librairie zone.js (qu’on peut
trouver dans node modules).
 Utilisé pour synchroniser la vue avec le
composant.
 Chaque composant dispose d’un change
detector qui surveille en particulier les
expressions utilisées dans l’interpolation ou
le proprité et le binding.
 Un changement de la valeur retournée par
l’expression ) mise à jour de la vue.
Installation
 Pour développer des applications Angular
on doit installer et télécharger NodeJS
 Après avoir installer NodeJS, on installe
Angular en tapant la commande suivante:

 On peut préciser la version en tapant la

commande suivante:
Installation
 On peut vérifier la version installée à
travers la commande suivante:

 On peut visualiser la liste des commandes

relatives à Angular en tapant:

 On peut utiliser plusieurs IDE tq Eclipse,

Visual Studio Code…
Outils utilisé par Angular
 npm (node package manager) : le
gestionnaire de paquets par défaut pour
une application JavaScript.
 angular-cli command line interface : outil
proposé par Google pour faciliter la
création et la construction d’une
application Angular en exécutant
directement des commandes.
Outils utilisé par Angular
 webpack : bundler JavaScript construit le
graphe de dépendances.
Regroupe des ressources de même nature (.js
ou .css...) dans un ou plusieurs bundles.
Fonctionne avec un système de module : un
fichier JS est un module, un fichier CSS est un
module...
 Ivy : moteur de compilation et de rendu
utilisé partiellement dans Angular 8,
intégralement depuis la version 9. Il permet
d’accélérer la compilation et d’avoir une
meilleure lisibilité des messages d’erreur.
Structure d’un projet
 La création d’un nouveau projet se fait à
l’aide de la commande suivante:

 Depuis la version 7 il faut répondre au

question suivante:
Structure d’un projet
 Un projet est créer contenant les éléments suivants selon une structure
arborescente:
 e2e : contenant les fichiers permettant de tester l’application
 node modules : contenant les fichiers nécessaires de la librairie nodeJS
pour
 un projet Angular
 src : contenant les fichiers sources de l’application
 package.json : contenant l’ensemble de dépendance de l’application
 .angular-cli.json (ou angular.json depuis la version 6) : contenant les
 données concernant la configuration du projet (l’emplacement des fichiers
de
 démarrage...)
 tslint.json : contenant les données sur les r égles à respecter par le
 développeur (nombre de caractéres max par ligne, l’emplacement des
espaces...)
 tsconfig.json : contenant les données de configuration de TypeScript
Structure d’un projet
 Contenu du dossier SRC:
 assets : l’unique dossier accessible aux visiteurs et contenant les images, les sons...
 index.html : l’unique fichier HTML d’une application Angular
 styles.css : la feuille de style commune de tous les composants web de l’application
 favicon.ico : le logo d’Angular
 app : contient initialement les 5 fichiers du module principal
 app.module.ts : la classe correspondante au module principal
 app.component.ts : la classe associé au composant web
 app.component.html : le fichier contenant le code HTML
 associé au composant web
 app.component.css : le fichier contenant le code CSS associ´e
 au composant web
 app.component.spec.ts : le fichier de test du composant web
 Rq: Pour créer un projet sans les fichiers de test (.spec.ts), utiliser la commande ng new
ProjectName --skip-tests=true
Structure d’un projet
 Contenu du fichier index.html:
Structure d’un projet
 Contenu de app.module.ts
Structure d’un projet
Structure d’un projet
Structure d’un projet
 Pour compiler le projet, exécuter la commande (depuis
la racine du projet):

 Pour lancer le projet et ouvrir une nouvelle fenêtre

dans le navigateur, exécuter la commande:

 On peut aussi lancer un projet Angular comme tout

projet NodeJS, exécuter la commande
Un premier exemple
 Contenu du fichier index.html
 <!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>HelloWorld</title>
 <base href="/">
 <meta name="viewport" content="width=device-width, initial-
scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
 <app-root></app-root>
 </body>
 </html>
Un premier exemple
 Contenu du fichier Main.ts
 import { enableProdMode } from '@angular/core';

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

 import { AppModule } from './app/app.module';

 import { environment } from './environments/environment';

 if (environment.production) {

 enableProdMode();

 }

 platformBrowserDynamic().bootstrapModule(AppModule)

 .catch(err => console.error(err));

Un premier exemple
 Contenu du fichier app.module.ts

 import { BrowserModule } from '@angular/platform-browser';

 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 @NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
 })
 export class AppModule { }
Un premier exemple
 Fichier app.component.ts
 import { Component } from '@angular/core';

 @Component({

 selector: 'app-root',

 templateUrl: './app.component.html',

 styleUrls: ['./app.component.css']

 })

 export class AppComponent {

 title = 'hello-world';

 }
Directives Angular
 *ngFor
 *ngIf
 *ngSwitch
 ngStyle
 ngClass
 Ces directives s’utilisent conjointement
avec les composants web suivant
 ng-container
 ng-template
Directives Angular
 *ngFor
 permet de répéter un traitement
(affichage d’un élément HTML) s’utilise
comme un attribut de balise et sa valeur
est une instruction itérative TypeScript
 Exemple: Afficher le tableau tab en
utilisant *ngFor
Directives Angular
 La directive ngIf
Directives Angular
 Affichage des éléments pair et impair d’un
tableau
Directives Angular
Directives Angular
 ngStyle
 permet de modifier le style d’un élément
HTML.
 s’utilise conjointement avec le property
binding pour récupérer des valeurs
définies dans la classe.
Directives Angular
 ngClass
 permet d’attribuer de nouvelles classes
d’un élément HTML.
 s’utilise conjointement avec le property
binding pour récupérer
 des valeurs définies dans la classe ou dans
la feuille de style.