Download - The productive developer guide to Angular 2
Who am I?Maurice de BeijerThe Problem SolverMicrosoft Azure MVPFreelance developer/instructorTwitter: @mauricedbWeb: http://www.TheProblemSolver.nlE-mail: [email protected]
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';
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. }
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"
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,
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() {
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.