Typescript / Angular 2

PrésentationPhilippe 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émoTYPESCRIPT

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 ❤ TypescriptCollaboration 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 Components3 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émoANNOTATIONS 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émoANGULAR-CLI

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

DémoCONFIGURATION 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émoDIRECTIVES

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