the productive developer guide to angular 2
TRANSCRIPT
![Page 1: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/1.jpg)
![Page 2: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/2.jpg)
The productivedeveloper guide to
Angular 2
![Page 3: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/3.jpg)
Who am I?Maurice de BeijerThe Problem SolverMicrosoft Azure MVPFreelance developer/instructorTwitter: @mauricedbWeb: http://www.TheProblemSolver.nlE-mail: [email protected]
![Page 4: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/4.jpg)
Looking back
![Page 5: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/5.jpg)
![Page 6: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/6.jpg)
Angular 2 !== Angular 1
![Page 7: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/7.jpg)
Angular is opinionated
![Page 8: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/8.jpg)
![Page 9: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/9.jpg)
![Page 10: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/10.jpg)
![Page 11: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/11.jpg)
![Page 12: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/12.jpg)
![Page 13: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/13.jpg)
Building blocksModulesComponentsTemplatesData bindingDirectivesServicesRoutingDependency injection
![Page 14: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/14.jpg)
Modules
![Page 15: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/15.jpg)
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';
![Page 16: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/16.jpg)
Components
![Page 17: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/17.jpg)
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. }
![Page 18: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/18.jpg)
Templates
![Page 19: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/19.jpg)
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"
![Page 20: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/20.jpg)
![Page 21: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/21.jpg)
Dependency injection
![Page 22: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/22.jpg)
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,
![Page 23: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/23.jpg)
![Page 24: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/24.jpg)
![Page 25: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/25.jpg)
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.
![Page 26: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/26.jpg)
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.
![Page 27: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/27.jpg)
Maurice de Beijer - @mauricedb
![Page 28: The productive developer guide to Angular 2](https://reader031.vdocuments.site/reader031/viewer/2022022414/587b42091a28ab9c0e8b5e2f/html5/thumbnails/28.jpg)