View
707
Download
1
Category
Preview:
Citation preview
Typescript – qu’est-ce que c’est? Sur-ensemble de JavaScript
Typage fort
Transpilé
Typescript == JavaScript
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
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 @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
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
La configuration des routes La navigation se fait de composant en composant Chaque composant définit ses propres 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
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
Recommended