![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](https://image.slidesharecdn.com/typescriptangular2symposium-160511141148/85/Angular2-Typescript-symposium-Versusmind-19-320.jpg)
![Bindings
One-way:
◦ {{value}}
◦ [value] = "expression" ou bind-value = "expression"
Events:
◦ (click) = "onClickFunction()"
Two-way:
◦ [(value)] = "expression"](https://image.slidesharecdn.com/typescriptangular2symposium-160511141148/85/Angular2-Typescript-symposium-Versusmind-24-320.jpg)
![Attributs standards
Attributs avec binding:
◦ <button [attr.aria-label] = "'help'">help</button>
Attributs sans binding:
◦ <button aria-label = "help">help</button>](https://image.slidesharecdn.com/typescriptangular2symposium-160511141148/85/Angular2-Typescript-symposium-Versusmind-25-320.jpg)
![Directives
Classes:
◦ <input [class.warning] = "!isValid"></input>
◦ [ngClass] => multiple
Styles:
◦ <button [style.color] = "isValid ? green : red">
◦ [ngStyle] => multiple](https://image.slidesharecdn.com/typescriptangular2symposium-160511141148/85/Angular2-Typescript-symposium-Versusmind-26-320.jpg)
Angular2 / Typescript symposium Versusmind
- 1. Typescript / Angular 2
- 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
- 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
- 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
- 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
- 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?