angularjs2进阶教程4-创建可重用的服务数据
2017-03-03 17:11
423 查看
还是 angularjs2入门1-文件结构分析 的源码,将app名称tutorial-step4-services
1.创建服务hero.service.ts,能够公用获取英雄的数据
将来,我们打算从远端服务器上获取英雄数据。我们还没调用 http,但在后面的章节中我们会希望这么做。
那时候,我们不得不等待服务器响应,并且在等待过程中我们无法阻塞用户界面响应, 即使我们想这么做(也不应这么做)也做不到,因为浏览器不会阻塞。我们不得不使用一些异步技术,我们将使用 Promise。
注入Injectable ,@Injectable()是必填的,代表元数据;注解一个Injectable组件,Injectable组件一般是服务类组件,单例模式。
创建mock-heroes,在任何文件都能引用。
2.根组件。我们写了一个带有初始化逻辑的
在这个例子中,我们通过调用
ngOnInit 生命周期钩子。我们该在哪里调用getHeroes方法呢?在构造函数中吗? 不 !。多年的经验和惨痛的教训教育我们,应该把复杂的逻辑扔到构造函数外面去, 特别是那些需要从服务器获取数据的逻辑更是如此。
constructor构造器,声明heroService。
The constructor itself does nothing. The parameter simultaneously defines a private heroService property and identifies it as a HeroService injection site.
ngOnInit初始化事件,getHeroes方法用来获取数据。
As a result of our change to
a Promise rather than an array of heroes.
We have to change our implementation to act on the Promise when it resolves. When the Promise resolves successfully, then we will have heroes to display.
We pass our callback function as an argument to the Promise's then method:
1.创建服务hero.service.ts,能够公用获取英雄的数据
将来,我们打算从远端服务器上获取英雄数据。我们还没调用 http,但在后面的章节中我们会希望这么做。
那时候,我们不得不等待服务器响应,并且在等待过程中我们无法阻塞用户界面响应, 即使我们想这么做(也不应这么做)也做不到,因为浏览器不会阻塞。我们不得不使用一些异步技术,我们将使用 Promise。
import { Injectable } from '@angular/core'; import { Hero } from './hero'; import { HEROES } from './mock-heroes'; @Injectable() export class HeroService { getHeroes(): Promise<Hero[]> { return Promise.resolve(HEROES); } }
注入Injectable ,@Injectable()是必填的,代表元数据;注解一个Injectable组件,Injectable组件一般是服务类组件,单例模式。
创建mock-heroes,在任何文件都能引用。
2.根组件。我们写了一个带有初始化逻辑的
ngOnInit方法,Angular会在适当的时候调用它。
在这个例子中,我们通过调用
getHeroes来完成初始化。
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; } }
ngOnInit 生命周期钩子。我们该在哪里调用getHeroes方法呢?在构造函数中吗? 不 !。多年的经验和惨痛的教训教育我们,应该把复杂的逻辑扔到构造函数外面去, 特别是那些需要从服务器获取数据的逻辑更是如此。
constructor构造器,声明heroService。
The constructor itself does nothing. The parameter simultaneously defines a private heroService property and identifies it as a HeroService injection site.
ngOnInit初始化事件,getHeroes方法用来获取数据。
As a result of our change to
HeroService, we're now setting
this.heroesto
a Promise rather than an array of heroes.
We have to change our implementation to act on the Promise when it resolves. When the Promise resolves successfully, then we will have heroes to display.
We pass our callback function as an argument to the Promise's then method:
相关文章推荐
- WebMatrix进阶教程(8):创建删除数据网页
- angularjs2进阶教程6-http服务
- AngularJS进阶(四十)创建模块、服务
- AngularJS进阶(四十)创建模块、服务
- WebMatrix进阶教程(6):创建添加数据网页
- WebMatrix进阶教程(7):创建一个编辑数据网页
- AngularJS——中服务$http请求网络数据
- 数据库名、实例名、ORACLE_SID、数据库域名、全局数据库名、服务名及手工脚本创建oracle数据库详解
- 使用.NET 创建Windows系统服务及安装完全教程
- 关于李三影【Unity 游戏开发教程】装备系统 - 01. JSON数据创建与使用要做笔记的地方
- Android高手进阶教程(二十一)之---Android中创建与几种解析xml的方法!
- 移动数据分析服务使用教程
- Android高手进阶教程(十八)之---列出Android设备中所有启动的服务,及判断某个服务是否开启!
- Android入门进阶教程(13)-ServiceManager服务管理详解
- Scott Mitchell 的ASP.NET 2.0数据教程之二:创建一个业务逻辑层
- Scott Mitchell 的ASP.NET 2.0数据教程之二十七:创建自定义排序用户界面
- ODI数据抽取教程_02创建简单项目
- Web Api系列教程第2季(OData篇)(二)——使用Web Api创建只读的OData服务
- 2017年的双十一又一次刷新了记录,交易创建峰值32.5万笔/秒、支付峰值25.6万笔/秒。而这样的交易和支付等记录,都会形成实时订单Feed数据流,汇入数据运营平台的主动服务系统中去。数据运营平台的
- Scott Mitchell 的ASP.NET 2.0数据教程之75:用Managed Code创建存储过程和用户自定义函数(上部分)