Le document présente Angular 2, un framework permettant de créer des applications web, mobile ou desktop, basé sur TypeScript. Il aborde l'historique, les modules principaux, la programmation réactive, et les meilleures pratiques de développement. Angular 2 facilite le développement grâce à des fonctionnalités comme l'injection de dépendance, des composants, et un routage efficace.

1. Angular 2
Présentation du Framework Angular 2
Présenter par :
Zoubir REMILA

2. Plan
1. Historique Angular 2
2. C’est quoi Angular 2
3. TypeScript
4. Principaux modules d’Angular 2
5. Architecture et interaction
6. Composant
7. Binding de propriétés
8. Evènements
9. Template (directives de structure / templating)
10. Services
11. Pipes
12. Programmation réactive
13. router
14. Best practices

3. Historique
 2009. Création de la version originale du Framework par Misko Hevery.
 2010. Misko Hevery rejoint Google, qui soutient alors officiellement Angular js.
 2013. Explosion de notoriété et d’adoption.
 Sept 2014. Annonce de la sortie d’Angular 2 (un peu prématurée).
 Mai 2016. Sortie de la première Release Candidate d’Angular 2.

4. C’est quoi Angular 2 ?
Angular est une plate-forme qui facilite la
création d'applications avec le Web.
Angular combine des modèles déclaratifs,
injection de dépendance, des outils de bout en
bout et des meilleures pratiques intégrées pour
résoudre les défis de développement.
Angular permet aux développeurs de créer des
applications Web, mobile ou desktop et il est
basé sur TypeScript.

5. TypeScript
 La force de TypeScript est qu’il permet de typer
les variables et les fonctions.
 Structurer son code comme la plupart des
langages orientés objet.
 Il est 100% ECMAScript 6.
 On a la possibilité de créer des classes, des
interfaces ou des énumérations de la même
manière que si on les avait créées en C++/ jAVA.
 Le code TypeScript sera compilé pour donner du
code JavaScript qui pourra être interprété par
n’importe quel navigateur.

6. C’est quoi le rapport entre Angular et
TypeScript ?
Angular 2 est basé sur TypeScript (on peut en
faire avec du JS basique) mais il est vivement conseillé
de démarrer ses projets avec TypeScript. Il a été choisi
par l’équipe AngularJS pour plusieurs raisons, entre
autres parce que le typage permet d’éviter les erreurs
lors de l’exécution du script (runtime errors).

7. Principaux modules d’Angular 2

8. Interactions des différents modules Angular js 2

9. Composant
La hiérarchie d’un composant A quoi ressemble un composant

10. Binding de propriété
 Interpolation
 Modification des propriétés du DOM

11. Evènement

12. Directive de structure
 ngIf
 ngFor
 ngSwitch

13. Directive de templating
 ngStyle
 ngClass

14. Services
Injection de dépendances

15. pipes
 Json
 Slice
 Uppercase
 lowercase

16. pipes
 number
 Percent
 Currency
 date

17. Programmation réactive
 Dans la programmation réactive tout est un flux,
ce flux est une séquence ordonnée
d’évènements ces évènements représentes des
valeur (soit, erreurs, terminaison …). On doit alors
mettre en place un système qui fait le subscribe
a ces flux, un listener capable de gérer ces
évents.
 Un tel listener est appelé observer.
 Un tel Flux est appelé Observable.
 RxJS.

18. Router
 Le routeur d’Angular 2 a un objectif simple : permettre d’avoir des URLs
compréhensibles qui reflètent l’état de notre application, et déterminer pour
chaque URL quels composants initialiser et insérer dans la page. Tout cela sans
rafraîchir la page et sans lancer de requête auprès de notre serveur : c’est tout
l’intérêt d’avoir une Single Page Application.
 ngRoute, ui-router, RouterModule.

20. Best Practices
*ngIf / [hidden]

21. Best Practices
 Template
 Astreisk (*)

22. Best Practices
ngClass

23. Best Practices
ngStyle

24. Best Practices
Elvis Operator

25. Best Practices
Input /Output

26. Best Practices
Template/ TemplateUrl

27. Best Practices
Style / StyleUrl

28. Best practice
 Nommage des component :
Nom_composant.component.ts
Tweet.component.ts
 Nommage des template :
Nom_composant.template.html
Tweet.template.html
 Nommage des CSS :
Nom_composant.style.css
tweet.style.css
 Nommage des routes :
Nom_composant.route.ts

29. Best practice
Observables

30. Best practice
Observables

31. Best practice
Instruction au niveau du template

32. Merci