sdn: the productive developer guide to angular 2
TRANSCRIPT
![Page 1: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/1.jpg)
The Productive Developer guide to
Angular 2
Maurice de Beijer@mauricedb
ABL – The Problem Solver
![Page 2: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/2.jpg)
Who am I?• Maurice de Beijer• The Problem Solver• Microsoft Azure MVP• Freelance developer/instructor• Twitter: @mauricedb• Web: http://www.TheProblemSolver.nl• E-mail: [email protected]
![Page 3: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/3.jpg)
Looking back
![Page 4: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/4.jpg)
Angular 1 is very popular
![Page 5: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/5.jpg)
Angular 2 !== Angular 1
1
![Page 6: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/6.jpg)
When is Angular 2 done?
![Page 7: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/7.jpg)
opinionatedAngular is very
![Page 8: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/8.jpg)
React Starter Project
![Page 9: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/9.jpg)
Angular loves TypeScript
![Page 10: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/10.jpg)
Use the Angular CLI• Generate code• Build/run the application• Run tests• Check for errors
![Page 11: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/11.jpg)
Angular style guide• Lots of recommendations• Pars can be automatically checked with Codelyzer
![Page 12: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/12.jpg)
Codelyzer• Included in Angular CLI
![Page 13: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/13.jpg)
Building blocks of an Angular 2 application• Modules• Components• Templates• Data binding• Directives• Services• Routing• Dependency
injection
![Page 14: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/14.jpg)
• New in RC 5
Modules
![Page 15: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/15.jpg)
Angular 2 main module
![Page 16: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/16.jpg)
• Main building block of the user interface• Lifetime methods
Components
![Page 17: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/17.jpg)
• Define the visual aspect of a component• Either inline or a URL pointing to a separate file
Templates
![Page 18: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/18.jpg)
Data binding
![Page 19: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/19.jpg)
• Add non visual behavior to DOM elements
Directives
![Page 20: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/20.jpg)
Services• All other application code• Lots of predefined services
![Page 21: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/21.jpg)
• Used to inject requirements into components, services etc• Enables for a much better unit testing strategy
Dependency injection
![Page 22: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/22.jpg)
HTTP
![Page 23: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/23.jpg)
RxJS
![Page 24: SDN: The productive developer guide to Angular 2](https://reader035.vdocument.in/reader035/viewer/2022070512/589ab9291a28abff4f8b659f/html5/thumbnails/24.jpg)
25Maurice de Beijer - @mauricedb