ANGULAR
FRAMEWORK DE DEVELOPPEMENT WEB

Qu’est-ce qu’Angular ?
C’est un framework de développement front pour créer des applications monopages, web et mobile.
Crée en 2009 par Misko Hevery, employé chez Google.
Maintenu à la fois par Google et la communauté des développeurs.
Quel type d’applications ?
 Des petits widgets interactifs
 Des sites web complet
 Des applications mobiles
 Tout en fait…

Historique
• 2009 : Sortie d’AngularJS
• 2013 : Explosion de notoriété et d’adoption
• Septembre 2014 : Annonce de la sortie d’Angular 2
• Septembre 2016 : Sortie d’Angular 2
• Mars 2017 : Angular 4
• Octobre 2017 : Angular 5
• Mars 2018 : Angular 6
• Octobre 2018 : Angular 7

Pourquoi avoir recrée Angular ?
Angular ne reprend pas le code source de base d’AngularJS, mais reprend quelques concepts.
Google a cherche à faire table rase du passé, en remettant à plat de nombreux concepts présents
dans AngularJS.
Cette stratégie a été motivée par 4 principes fondateurs :
• Augmenter les performances
• Angular se repose davantage sur les briques natives du navigateur (ex: WebComponents)
• Améliorer la productivité :
• en se basant sur le langage Typescript (Plus strict et sécurisé que Javascript)
• S’adapter au mobile :
• La conception modulaire du framework permet de réduire l’empreinte mémoire sur les terminaux mobiles
• Embrasser les nouveaux standards du Web…
• en se basant sur des technologies et nouveautés apportées par ECMAScript 6.

D’ailleurs comment on dit ? Angular ? AngularJS ?…
ANGULARJS
Version 1.7.2
C’est le framework historique (crée en 2009)
https://angularjs.org
ANGULAR
Version 7
C’est le nouveau framework (recrée en 2014)
https://angular.io
Migrer une application AngularJS vers Angular est possible mais peut nécessiter une refonte complète de l’application.
Il est possible de faire un alliage des 2 en attendant de passer de l’un vers l’autre : https://angular.io/docs/ts/latest/guide/upgrade.html

Principales caractéristiques d’Angular
• Langage de développement : TypeScript
• Complet. Inclut toutes les briques nécessaires à la création d'une application : routage,
requêtage HTTP, gestion de formulaires, internationalisation etc.
• Modulaire. Le framework lui-même est découpé en sous-paquets correspondant aux grandes
aires fonctionnelles. Les applications sont organisées en composants et en modules.
• Tout est composant. Composant = brique de base de toute appli Angular.
• Rapide. D’après les benchmarks, Angular (version 2) est 5x plus rapide que AngularJS.
• Support : tous navigateurs y compris IE 9 avec l’utilisation de polyfills. (Pas de support pour les
versions d’IE < 9)

Différences
Entre AngularJS, Angular et React

L’architecture d’Angular
Module
◦ C’est la base d’une application Angular
◦ Un module peut représenter le tout ou une partie de votre application
◦ Un module peut contenir les éléments suivants :
◦ Component
◦ Service
◦ Directive
◦ Pipe
◦ Un module peut être dépendant d’un ou plusieurs autre(s) module(s)
◦ Un module peut être partagé à d’autres modules

L’architecture d’Angular
Component
◦ Dans Angular, tout est composant
◦ Un composant est une balise HTML personnalisée (ex: app-root, app-shop, app-login etc.)
◦ Définit par :
◦ 1 sélecteur (le nom de la balise)
◦ 1 template
◦ 1 ou plusieurs fichiers de style CSS (facultatif)
◦ Représenté par :
◦ 1 fichier Typescript (.ts)
◦ 1 fichier HTML (.html)
◦ 1 ou plusieurs fichiers de style CSS (facultatif)
◦ Un component peut utiliser d’autres components

ROOT
<my-app></my-app>
MY-HOMEPAGE
<my-list elements="items"></my-list>
MY-APP
<my-navigation></my-navigation>
<my-homepage></my-homepage>
<my-profile-creator-page></my-profile-creator-page>
MY-LIST
<ul>
<li *ngFor="let item of items">
<my-listitem item="item"></my-listitem>
</li>
</ul>
MY-LIST-ITEM
<span (click)="showItem(item)">
{{ item.name }}
</span>

Outillage
Typescript
Language de programmation libre et open-source développé par Microsoft
But initial : simplifier la production de code Javascript
Permet d’utiliser tous les concepts orienté objets
(classes, interfaces, héritages, public/private etc.)
Le code écrit en Typescript est transpilé en Javascript
Site officiel : https://www.typescriptlang.org
Qu’apporte TypeScript par rapport à Javascript : http://bit.ly/2rMQups
npm install –g typescript

Outillage
IDE
La plupart des IDE proposent des extensions pour supporter Typescript
• Visual Studio Code
• WebStorm / PhpStorm
• Sublime Text
• Notepad++
• Eclipse
• …

Outillage
Angular CLI
Outil en ligne de commande pour simplifier les tâches de développement
avec Angular.
Fonctionnalités :
création d’un projet, génération de composants, exécution des
tests, lancement du serveur, déploiement en production…
npm install –g @angular/cli

DEMO
Utilisation d’Angular CLI
- Créer un site
- Lancer un site
- Créer un composant
- Utiliser les directives ngIf et ngFor
- Databinding
- Utilisation des pipes
- Créer un service

Ressources
Site officiel : https://angular.io
Tutoriel officiel (Quickstart) : https://angular.io/docs/ts/latest/quickstart.html
Vidéos Angular en français : https://www.youtube.com/watch?v=mOD2sGp4V8o
Angular CLI : Outil en ligne de commande pour développer avec Angular https://cli.angular.io/
Angular Style Guide : concentré des bonnes pratiques pour développer avec Angular https://angular.io/styleguide
@ngx-translate : module pour internationaliser votre application https://github.com/ngx-translate/core
@angular/material : module d’intégration permettant d’utiliser le style ‘flat’ de Google https://material.angular.io/