跟着angularjs2官方文档学习（五）

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Http Demo</title>
    <Meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- IE required polyfills,in this exact order -->
    <script src="lib/es6-shim.min.js"></script>
    <script src="lib/system-polyfills.js"></script>
    <script src="lib/shims_for_IE.js"></script>

    <script src="lib/angular2-polyfills.js"></script>
    <script src="lib/system.js"></script>
    <script src="lib/typescript.js"></script>
    <script src="lib/Rx.js"></script>
    <script src="lib/angular2.dev.js"></script>

    <script src="lib/http.dev.js"></script>

    <script src="lib/web-api.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',typescriptOptions: { emitDecoratorMetadata: true },packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/main')
            .then(null,console.error.bind(console));
    </script>

  </head>

  <body>
    <my-toh>ToH Loading...</my-toh>
  </body>

</html>


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

import {bootstrap}         from 'angular2/platform/browser';

import 'rxjs/Rx';

import {TohComponent}         from './toh/toh.component';

bootstrap(TohComponent);

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import {Component}         from 'angular2/core';
import {HTTP_PROVIDERS}    from 'angular2/http';

import {Hero}              from './hero';
import {HeroListComponent} from './hero-list.component';
import {HeroService}       from './hero.service';

import {provide}           from 'angular2/core';
import {XHRBackend}        from 'angular2/http';

// in-memory web api imports
import {InMemoryBackendService,SEED_DATA}         from 'a2-in-memory-web-api/core';
import {HeroData}          from '../hero-data';

@Component({
  selector: 'my-toh',template: `
  <hero-list></hero-list>
  `,directives:[HeroListComponent],providers: [
    HTTP_PROVIDERS,HeroService,provide(XHRBackend,{ useClass: InMemoryBackendService }),// in-mem server
    provide(SEED_DATA,{ useClass: HeroData }) // in-mem server data
  ]
})
export class TohComponent { }


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import {Component,OnInit} from 'angular2/core';
import {Hero}              from './hero';
import {HeroService}       from './hero.service';

@Component({
  selector: 'hero-list',template: `
  <h3>Heroes:</h3>
  <ul>
    <li *ngFor="#hero of heroes">
      {{ hero.name }}
    </li>
  </ul>
  New Hero:
  <input #newHero />
  <button (click)="addHero(newHero.value); newHero.value=''">
    Add Hero
  </button>
  <div class="error" *ngIf="errorMessage">{{errorMessage}}</div>
  `,styles: ['.error {color:red;}']
})
export class HeroListComponent implements OnInit {

  constructor (private _heroService: HeroService) {}

  errorMessage: string;
  heroes:Hero[];

  ngOnInit() { this.getHeroes(); }

  getHeroes() {
    this._heroService.getHeroes()
                     .subscribe(
                       heroes => this.heroes = heroes,error =>  this.errorMessage = <any>error);
  }

  addHero (name: string) {
    if (!name) {return;}
    this._heroService.addHero(name)
                     .subscribe(
                       hero  => this.heroes.push(hero),error =>  this.errorMessage = <any>error);
  }
}


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import {Injectable}     from 'angular2/core';
import {Http,Response} from 'angular2/http';
import {Headers,RequestOptions} from 'angular2/http';
import {Hero}           from './hero';
import {Observable}     from 'rxjs/Observable';

@Injectable()
export class HeroService {
  constructor (private http: Http) {}

  /*
  private _heroesUrl = 'app/heroes.json'; // URL to JSON file
  */

  private _heroesUrl = 'app/heroes';  // URL to web api

  getHeroes () {
    return this.http.get(this._heroesUrl)
                    .map(res => <Hero[]> res.json().data)
                    .do(data => console.log(data)) // eyeball results in the console
                    .catch(this.handleError);
  }

  addHero (name: string) : Observable<Hero>  {

    let body = JSON.stringify({ name });
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post(this._heroesUrl,body,options)
                    .map(res =>  <Hero> res.json().data)
                    .catch(this.handleError)
  }

  private handleError (error: Response) {
    // in a real world app,we may send the error to some remote logging infrastructure
    // instead of just logging it to the console
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
  }
}


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

export class Hero {
  constructor(
    public id:number,public name:string) { }
}


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

export class HeroData {
  createDb() {
    let heroes = [
      { "id": "1","name": "Windstorm" },{ "id": "2","name": "Bombasto" },{ "id": "3","name": "Magneta" },{ "id": "4","name": "Tornado" }
    ];
    return {heroes};
  }
}


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

{
  "data": [
    { "id": "1","name": "Tornado" }
  ]
}

跟着angularjs2官方文档学习（五）

猜你在找的Angularjs相关文章