Angular est un framework de développement web front-end conçu pour créer des applications monopages, web et mobiles, maintenu par Google et la communauté des développeurs depuis sa création en 2009. Il repose sur TypeScript et offre des performances améliorées ainsi qu'une architecture modulaire. La migration d'AngularJS vers Angular est envisageable, bien que potentiellement complexe, et Angular inclut diverses fonctionnalités nécessaires au développement d'applications complètes.

1. ANGULAR
FRAMEWORK DE DEVELOPPEMENT WEB

2. 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…

3. 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

4. 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.

5. 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

6. 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)

7. Différences
Entre AngularJS, Angular et React

8. 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

9. 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

10. 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>

11. 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

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

13. 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

14. 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

15. 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/