the productive developer guide to angular 2

28
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

Upload: maurice-beijer

Post on 15-Jan-2017

157 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 1/28

The productivedeveloper guide to

Angular 2

Page 2: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 2/28

Who am I?Maurice de BeijerThe Problem SolverMicrosoft Azure MVPFreelance developer/instructorTwitter: @mauricedbWeb: http://www.TheProblemSolver.nlE-mail: [email protected]

Page 3: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 3/28

Looking back

Page 4: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 4/28

Page 5: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 5/28

Angular 2 !== Angular 1

Page 6: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 6/28

Page 7: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 7/28

Angular is opinionated

Page 8: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 8/28

Page 9: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 9/28

Page 10: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 10/28

Page 11: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 11/28

Page 12: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 12/28

Page 13: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 13/28

Building blocksModulesComponentsTemplatesData bindingDirectivesServicesRoutingDependency injection

Page 14: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 14/28

Modules

Page 15: The productive developer guide to Angular 2

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';

Page 16: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 16/28

Components

Page 17: The productive developer guide to Angular 2

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 {

Page 18: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 18/28

Templates

Page 19: The productive developer guide to Angular 2

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.

Page 20: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 20/28

  10. ul

Page 21: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 21/28

Dependency injection

Page 22: The productive developer guide to Angular 2

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() {

Page 23: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 23/28

          10. return

Page 24: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 24/28

Page 25: The productive developer guide to Angular 2

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 : ) {

Page 26: The productive developer guide to Angular 2

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. : [ ]

Page 27: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 27/28

  10. })

Maurice de Beijer - @mauricedb

Page 28: The productive developer guide to Angular 2

9/6/2016 The productive developer guide to Angular 2

http://localhost:3000/#/?_k=kdfhdv?export 28/28