This document provides an introduction to Angular 2 from Maurice de Beijer. It discusses Angular 1 vs Angular 2, when Angular 2 will be complete, recommendations for style and structure using TypeScript and the Angular CLI tool. The core building blocks of an Angular 2 app are also summarized as modules, components, templates, data binding, directives, services, routing and dependency injection.

1. The Productive Developer
guide to Angular 2
Maurice de Beijer
@mauricedb
ABL – The Problem Solver

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. Looking back

4. Angular 1 is very popular

5. Angular 2 !== Angular 1

6. When is Angular 2 done?

7. opinionatedAngular is very

8. React Starter Project

9. Angular loves TypeScript

10. Use the Angular CLI
• Generate code
• Build/run the application
• Run tests
• Check for errors

11. Angular style guide
• Lots of recommendations
• Pars can be automatically checked with Codelyzer

12. Codelyzer
• Included in Angular CLI

13. Building blocks of an Angular 2 application
• Modules
• Components
• Templates
• Data binding
• Directives
• Services
• Routing
• Dependency
injection

14. • New in RC 5
Modules

15. Angular 2 main module

16. • Main building block of the user interface
• Lifetime methods
Components

17. • Define the visual aspect of a component
• Either inline or a URL pointing to a separate file
Templates

18. Data binding

19. • Add non visual behavior to DOM elements
Directives

20. Services
• All other application code
• Lots of predefined services

21. • Used to inject requirements into components, services etc
• Enables for a much better unit testing strategy
Dependency
injection

22. HTTP

23. RxJS

24. 25