This document provides an overview of key concepts in Angular 2 including modules, components, templates, data binding, directives, services, routing, and dependency injection. It discusses how Angular 2 differs from Angular 1 and is more opinionated. It includes code examples of defining an Angular 2 main module, components, templates, using dependency injection with a movie service, and making HTTP requests from a service.

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

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