This document provides an overview of Angular 2 and its main building blocks including modules, components, templates, data binding, directives, services, and routing. It discusses how Angular 2 differs from Angular 1 and is more opinionated. It also provides code examples for setting up the main module, creating components and templates, using dependency injection for services, and making HTTP requests from services.

2. The productive
developer guide to
Angular 2

3. 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

4. Looking back

6. Angular 2 !== Angular 1

7. Angular 2 is opinionated

13. Building blocks
Modules
Components
Templates
Data binding
Directives
Services
Routing
Dependency injection

14. Modules

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

16. Components

17. 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. }

18. Templates

19. 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"

21. Dependency injection

22. 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,

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

26. 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.

27. Maurice de Beijer - @mauricedb