Symposium Versusmind sur Angular 2 et tous ses nouveaux concepts

1. Typescript / Angular 2

2. Présentation
Philippe DIDIERGEORGES
@DePhiless
Développeur
Formateur

3. Sommaire
Typescript : Présentation
Angular 2 : Toutes les nouveautés
Du code

4. Typescript

5. Typescript – qu’est-ce que c’est?
Sur-ensemble de JavaScript
Typage fort
Transpilé
Typescript == JavaScript

6. Démo
TYPESCRIPT

7. Les forces de Typescript
Intégration forte aux IDE
◦ En natif dans Visual Studio, Code et Webstorm
◦ Plugins IntelliJ, Atom, Sublime et Eclipse
Compilation vers ES3/ES5/ES6

8. Les forces de Typescript
Fichiers de définition de type .d.ts
◦ +1500 libs & frameworks sur DefinitelyTyped
◦ Outil npm typings
tsconfig.json

9. Angular ❤ Typescript
Collaboration entre Microsoft et Google
Support avancé d’ES2015/2016
Classes et Modules
Decorateurs ES7
Facilités de développement

10. Angular 2

11. Angular 2
Pattern MVW -> Model, View, Whatever
Mise en œuvre des
Web Components

12. Web Components
3 API HTML5
Custom Elements
Shadow DOM
HTML Imports

13. La notion de composant d'Angular2
Entité indépendante permettant d’implanter de la logique et du dynamisme dans les pages Web

14. Les templates
HTML rattaché à un composant Angular
Utilisation de la directive @View
◦ templateUrl pour un fichier HTML
◦ template pour de l’HTML direct
Directives Angular pour la communication entre le template et le
composant
myTemplate.htmlmyTemplate.ts

15. Les différentes annotations
@Directive : attribut HTML

16. Les différentes annotations
@Component : élément HTML

17. Les différentes annotations
@Injectable : indique que le composant est un service utilisable via
Injection de dépendance dans d’autres composants
@RouteConfig : permet de configurer les routes du composant vers
d’autres composants

18. Démo
ANNOTATIONS ET COMPOSANTS

19. Angular-cli
> npm i –g angular-cli
Scaffolfing : ng new, ng g [component | directive | pipe | service | route]
Build : ng build / ng serve
Tests : ng test / ng e2e
Deploy: ng github-pages
Lint / Format code

20. Angular-cli
> npm i –g angular-cli
Système de plugins
Auto-complétion des commandes

21. Démo
ANGULAR-CLI

22. La configuration des routes
La navigation se fait de composant en composant
Chaque composant définit ses propres routes

23. Démo
CONFIGURATION DES ROUTES

24. Bindings
One-way:
◦ {{value}}
◦ [value] = "expression" ou bind-value = "expression"
Events:
◦ (click) = "onClickFunction()"
Two-way:
◦ [(value)] = "expression"

25. Attributs standards
Attributs avec binding:
◦ <button [attr.aria-label] = "'help'">help</button>
Attributs sans binding:
◦ <button aria-label = "help">help</button>

26. Directives
Classes:
◦ <input [class.warning] = "!isValid"></input>
◦ [ngClass] => multiple
Styles:
◦ <button [style.color] = "isValid ? green : red">
◦ [ngStyle] => multiple

27. Directives *
*ngIf
*ngFor
ngSwitch *when

28. Démo
DIRECTIVES

29. Les autres grosses nouveautés
I18n Intégré
Universal: Server Rendering
Offline
Web Workers
Animation Builder

30. Angular 2 Release Candidate
Conseillé sur tous vos nouveaux projets
Surveiller les projets « Satellites »:
=> angular-cli
=> angular-material
NG-Conf: 4-7 may 2016

31. Questions?

32. Merci 
TWITTER: @DEPHILESS