ngularjs2-------异步服务
开始的前提是现在你的机械上安装node环境，安装node环境＝＝＝》点击打开链接 我使用的环境是： mac node(v.6.10.0) npm(3.10.10)
一：确保node环境已经安装，然后全局安装angular-CLI输入：
npm install -g @angular/cliorsudo npm install -g @angular/cli
二：创建新的应用，输入：
ng new my-app
三：启动应用，输入：
cd my-appng serveng serve命令会启动应用，监听文件变化，当文件更改时会重新构建此应用。到此本地开发环境就准备好了。
我们创建一个hero服务，在app下创建一个hero.service.ts文件
import { Injectable } from '@angular/core';@Injectable()
export class HeroService {
}创建一个方法来获取hero数据，数据都是从服务器上获取的，这里我们使用模拟数据源，在app下创建一个hero.ts文件：
export class Hero{id:number;name:string;
}
创建mock-heroes.ts文件模拟数据：
import { Hero } from './hero';
export const HEROES: Hero[] = [{id: 11, name: 'Mr. Nice'},{id: 12, name: 'Narco'},{id: 13, name: 'Bombasto'},{id: 14, name: 'Celeritas'},{id: 15, name: 'Magneta'},{id: 16, name: 'RubberMan'},{id: 17, name: 'Dynama'},{id: 18, name: 'Dr IQ'},{id: 19, name: 'Magma'},{id: 20, name: 'Tornado'}
];在hero.service文件中添加一个getHeroes方法返回heroes列表：
import { Injectable } from '@angular/core';import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';@Injectable()
export class HeroService {
getHeroes(): Promise {return Promise.resolve(HEROES);
}
｝ 使用hero.service
在app.component.ts文件中引入服务：
import { HeroService } from './hero.service';
constructor(private heroService: HeroService) { }
providers: [HeroService]在app.component中使用服务：
getHeroes(): void {this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}完整的代码：
import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';
@Component({selector: 'my-app',template: `- {{hero.id}} {{hero.name}}
`,providers: [HeroService]
})
export class AppComponent implements OnInit {title = 'Tour of Heroes';heroes: Hero[];selectedHero: Hero;constructor(private heroService: HeroService) { }getHeroes(): void {this.heroService.getHeroes().then(heroes => this.heroes = heroes);}ngOnInit(): void {this.getHeroes();}onSelect(hero: Hero): void {this.selectedHero = hero;}
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！