The productivedeveloper guide to

Angular 2

Who am I?Maurice de BeijerThe Problem SolverMicrosoft Azure MVPFreelance developer/instructorTwitter: @mauricedbWeb: http://www.TheProblemSolver.nlE-mail: maurice.de.beijer@gmail.com

Looking back

Angular 2 !== Angular 1

Angular 2 is opinionated

Building blocksModulesComponentsTemplatesData bindingDirectivesServicesRoutingDependency injection

Modules

Angular 2 main module

  1. import { BrowserModule }   2.   from '@angular/platform‐browser';  3. import { NgModule } from '@angular/core';  4. import { FormsModule } from '@angular/forms';  5. import { HttpModule } from '@angular/http';  6.   7. import { AppComponent } from './app.component';  8. import { MoviesComponent }   9.   from './movies/movies.component';

 10. import { MovieComponent }  11.   from './movie/movie.component';

Components

The main component

  1. import { Component } from '@angular/core';  2.   3. @Component({  4.   selector: 'app‐root',  5.   templateUrl: './app.component.html',  6.   styleUrls: ['./app.component.css']  7. })  8. export class AppComponent {  9.   title = 'Popular movies!';

 10. }

Templates

Templates

  1. <h1>  2.   {{title}}  3. </h1>  4.   5. <app‐movies></app‐movies>  6.   7.   8.   9. 

 10. <ul> 11.   <li *ngFor="let movie of movies" 

Dependency injection

Movie service

  1. import { Injectable } from '@angular/core';  2.   3. @Injectable()  4. export class MovieService {  5.   6.   constructor() {   7.   }  8.   9.   getMovies() {

 10.       return [{ 11.           "id":278,

HTTP Requests

  1. import { Injectable } from '@angular/core';  2. import { Http, Headers } from '@angular/http';  3.   4. import 'rxjs/add/operator/map';  5.   6. @Injectable()  7. export class MovieService {  8.   9.   constructor(private http: Http) { } 10.  11.   getMovies() {

Movies component

  1. import { Component, OnInit } from '@angular/core';  2. import { MovieService } from '../movie.service';  3.   4. @Component({  5.   selector: 'app‐movies',  6.   templateUrl: './movies.component.html',  7.   styleUrls: ['./movies.component.css'],  8.   providers: [MovieService]  9. }) 10. export class MoviesComponent implements OnInit { 11. 

Maurice de Beijer - @mauricedb