Typescript / Angular 2

Présentation
Philippe DIDIERGEORGES
@DePhiless
Développeur
Formateur

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

Typescript

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

Démo
TYPESCRIPT

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

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

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

Angular 2

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

Web Components
3 API HTML5
Custom Elements
Shadow DOM
HTML Imports

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

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

Les différentes annotations
@Directive : attribut HTML

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

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

Démo
ANNOTATIONS ET COMPOSANTS

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

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

Démo
ANGULAR-CLI

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

Démo
CONFIGURATION DES ROUTES

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

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

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

Directives *
*ngIf
*ngFor
ngSwitch *when

Démo
DIRECTIVES

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

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

Questions?

Merci 
TWITTER: @DEPHILESS