ngularjs2-------异步服务

开始的前提是现在你的机械上安装node环境,安装node环境===》点击打开链接
我使用的环境是: mac   node(v.6.10.0)  npm(3.10.10)


一:确保node环境已经安装,然后全局安装angular-CLI输入:

npm install -g @angular/cli

or
 
sudo npm install -g @angular/cli

可能需要一些时间,等待安装完成。


二:创建新的应用,输入:

ng new my-app
my-app为应用的名称,你可以随意更改它。


三:启动应用,输入:

cd my-app

ng serve

ng 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<Hero[]> {
  return Promise.resolve(HEROES);
}
}



使用hero.service

在app.component.ts文件中引入服务:

import { HeroService } from './hero.service';

注入服务

constructor(private heroService: HeroService) { }

我们还得注册一个service提供商来告诉注入器如何创建service:

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: `
    <ul class="heroes">
      <li *ngFor="let hero of heroes"
        (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
    </ul>
  `,
  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;
  }
}
可以使用bootstrap点击打开链接








發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章