Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The productive developer guide to Angular 2

500 views

Published on

The productive developer guide to Angular 2 presentation at the GDG DevFest in the Netherlands

Published in: Technology
  • Be the first to comment

  • Be the first to like this

The productive developer guide to Angular 2

  1. 1. The productive developer guide to Angular 2
  2. 2. 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
  3. 3. Looking back
  4. 4. Angular 2 !== Angular 1
  5. 5. Angular 2 is opinionated
  6. 6. Building blocks Modules Components Templates Data binding Directives Services Routing Dependency injection
  7. 7. Modules
  8. 8. 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';
  9. 9. Components
  10. 10. 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. }
  11. 11. Templates
  12. 12. 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" 
  13. 13. Dependency injection
  14. 14. 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,
  15. 15. 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() {
  16. 16. 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. 
  17. 17. Maurice de Beijer - @mauricedb

×