Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The Productive Developer
guide to Angular 2
Maurice de Beijer
@mauricedb
ABL – The Problem Solver
Who am I?
• Maurice de Beijer
• The Problem Solver
• Microsoft Azure MVP
• Freelance developer/instructor
• Twitter: @maur...
Looking back
Angular 1 is very popular
Angular 2 !== Angular 1
When is Angular 2 done?
opinionatedAngular is very
React Starter Project
Angular loves TypeScript
Use the Angular CLI
• Generate code
• Build/run the application
• Run tests
• Check for errors
Angular style guide
• Lots of recommendations
• Pars can be automatically checked with Codelyzer
Codelyzer
• Included in Angular CLI
Building blocks of an Angular 2 application
• Modules
• Components
• Templates
• Data binding
• Directives
• Services
• Ro...
• New in RC 5
Modules
Angular 2 main module
• Main building block of the user interface
• Lifetime methods
Components
• Define the visual aspect of a component
• Either inline or a URL pointing to a separate file
Templates
Data binding
• Add non visual behavior to DOM elements
Directives
Services
• All other application code
• Lots of predefined services
• Used to inject requirements into components, services etc
• Enables for a much better unit testing strategy
Dependency
i...
HTTP
RxJS
25
Upcoming SlideShare
Loading in …5
×

SDN: The productive developer guide to Angular 2

390 views

Published on

Angular 2 presentation for the SDN users group

Published in: Technology
  • Be the first to comment

SDN: The productive developer guide to Angular 2

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

×