Angular 2

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

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

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.

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.

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.

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

Principaux modules d’Angular 2

Interactions des différents modules Angular js 2

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

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

Directive de structure
 ngIf
 ngFor
 ngSwitch

Directive de templating
 ngStyle
 ngClass

Services
Injection de dépendances

pipes
 Json
 Slice
 Uppercase
 lowercase

pipes
 number
 Percent
 Currency
 date

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.

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.

Best Practices
*ngIf / [hidden]

Best Practices
 Template
 Astreisk (*)

Best Practices
Template/ TemplateUrl

Best Practices
Style / StyleUrl

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

Best practice
Instruction au niveau du template

Angular 2

Contenu connexe

Tendances (20)

Similaire à Angular 2 (20)

Dernier (20)

Angular 2