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
Who am I?
Maurice de Beijer
The Problem Solver
Microsoft Azure MVP
Freelance developer/instructor
Twitter: @mauricedb
Web:...
Looking back
Angular 2 !== Angular 1
Angular is opinionated
Building blocks
Modules
Components
Templates
Data binding
Directives
Services
Routing
Dependency injection
Modules
Angular 2 main module
  1. import { BrowserModule } 
  2.   from '@angular/platform‐browser';
  3. import { NgModule } fro...
Components
The main component
  1. import { Component } from '@angular/core';
  2. 
  3. @Component({
  4.   selector: 'app‐root',
  ...
Templates
Templates
  1. <h1>
  2.   {{title}}
  3. </h1>
  4. 
  5. <app‐movies></app‐movies>
  6. 
  7. 
  8. 
  9. 
 10. <ul>
 11...
Dependency injection
Movie service
  1. import { Injectable } from '@angular/core';
  2. 
  3. @Injectable()
  4. export class MovieService {
 ...
HTTP Requests
  1. import { Injectable } from '@angular/core';
  2. import { Http } from '@angular/http';
  3. 
  4. impor...
Movies component
  1. import { Component, OnInit } from '@angular/core';
  2. import { MovieService } from '../movie.servi...
Maurice de Beijer - @mauricedb
The productive developer guide to Angular 2
The productive developer guide to Angular 2
The productive developer guide to Angular 2
The productive developer guide to Angular 2
The productive developer guide to Angular 2
The productive developer guide to Angular 2
The productive developer guide to Angular 2
The productive developer guide to Angular 2
The productive developer guide to Angular 2
The productive developer guide to Angular 2
The productive developer guide to Angular 2
Upcoming SlideShare
Loading in …5
×

The productive developer guide to Angular 2

318 views

Published on

The productive developer guide to Angular 2 presentation at the Dutch Microsoft TechDays 2016 event

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

×