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: @mauricedb• Web: http://www.TheProblemSolver.nl• E-mail: maurice.de.beijer@gmail.com

Looking back

Angular 1 is very popular

Angular 2 !== Angular 1

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• Routing• Dependency

injection

• 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 injection

HTTP

RxJS

25Maurice de Beijer - @mauricedb