Angular 2 presentation for the Centric Tech Event 2016

1. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 1/28
The productive
developer guide to
Angular 2

2. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 2/28
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. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 3/28
Looking back

4. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 4/28

5. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 5/28
Angular 2 !== Angular 1

6. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 6/28

7. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 7/28
Angular is opinionated

8. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 8/28

9. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 9/28

10. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 10/28

11. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 11/28

12. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 12/28

13. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 13/28
Building blocks
Modules
Components
Templates
Data binding
Directives
Services
Routing
Dependency injection

14. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 14/28
Modules

15. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 15/28
Angular 2 main module
NgModule from
BrowserModule from
FormsModule from
HttpModule from
AppComponent from
MoviesComponent from
1. import { } '@angular/core';
2. import { } '@angular/platform‐
browser';
3. import { } '@angular/forms';
4. import { } '@angular/http';
5.
6. import { } './app.component';
7. import { }
'./movies/movies.component';

16. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 16/28
Components

17. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 17/28
The main component
Component from
@
moduleId id
selector
templateUrl
styleUrls
1. import { } '@angular/core';
2.
3. Component({
4. : module. ,
5. : 'app‐root',
6. : 'app.component.html',
7. : ['app.component.css'],
8. })
9. export class AppComponent {

18. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 18/28
Templates

19. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 19/28
Templates
{{title}}
1. h1< >
2.
3. h1</ >
4.
5. app‐movies< > app‐movies</ >
6.
7.
8.
9.

20. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 20/28
10. ul

21. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 21/28
Dependency injection

22. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 22/28
Movie service
Injectable from
@
1. import { } '@angular/core';
2.
3. Injectable()
4. export class MovieService {
5.
6. constructor() {
7. }
8.
9. getMovies() {

23. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 23/28
10. return

24. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 24/28

25. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 25/28
HTTP Requests
Injectable from
Http from
@
http Http
1. import { } '@angular/core';
2. import { } '@angular/http';
3.
4. import 'rxjs/add/operator/map';
5.
6. Injectable()
7. export class MovieService {
8.
9. constructor(private : ) {

26. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 26/28
10.
Movies component
Component OnInit from
MovieService from
@
moduleId id
selector
templateUrl
styleUrls
providers MovieService
1. import { , } '@angular/core';
2. import { } '../movie.service';
3.
4. Component({
5. : module. ,
6. : 'app‐movies',
7. : 'movies.component.html',
8. : ['movies.component.css'],
9. : [ ]

27. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 27/28
10. })
Maurice de Beijer - @mauricedb

28. 9/6/2016 The productive developer guide to Angular 2
http://localhost:3000/#/?_k=kdfhdv?export 28/28