Angular2快速入门-4.创建一个服务(创建NewsService提供数据)
2017-11-23 11:57
531 查看
上篇我们使用的数据是通过mock-news.ts中的const News[] 数组直接赋给Component 组件的,这篇我们把提供数据的部分单独封装成服务
装饰器@Injectable()代表该服务会在程序启动时候自动注入Component的组件中,后面会讲解怎么注入。
我们在类NewsService中增加了一个方法 getNews方法,该方法返回一个Promise 承诺,它是一种异步技术,防止页面请求的时候线程阻塞,你可以把它理解成,当有数据的时候,会自动推送给你,
在该类中我们做了三处修改
1. 导入服务NewsService,通常服务都是.service.ts后缀,约定。
2. 在providers中增加 NewsService,
3. 集成 OnInit ,增加Angular2的初始化ngOnInit,主要目的是重新设置自己的属性newlist
4.注意构造函数constructor,服务在这里DI进来。
我们需要注意的几个点,
1. 服务写好后,需要在Component中 导入到 Providers
2. 集成OnInit的时候注意 import { OnInit } from '@angular/core';
3. 注意Promise的写法,只有返回时Promise的对象的时候,才可以使用then 后续处理
4. 了解箭头函数的使用
最终程序下载 点击下载
第一、创建news.service.ts
import { Injectable } from "@angular/core"; import { News } from './news'; import { NewList } from './mock-news'; @Injectable() export class NewsService { getNews() { return Promise.resolve(NewList) ; } }
装饰器@Injectable()代表该服务会在程序启动时候自动注入Component的组件中,后面会讲解怎么注入。
我们在类NewsService中增加了一个方法 getNews方法,该方法返回一个Promise 承诺,它是一种异步技术,防止页面请求的时候线程阻塞,你可以把它理解成,当有数据的时候,会自动推送给你,
第二、修改newslist.component
import { Component, OnInit } from '@angular/core'; import { News } from './news'; import { NewList } from './mock-news'; import { NewsService } from './news.service'; @Component({ selector:'news', templateUrl:'./newslist.component.html', styleUrls:['./newslist.component.css'], providers: [NewsService] }) export class NewsListComponent implements OnInit { newlist:News[]; selectedNew:News; onSelected(n:News):void{ this.selectedNew=n; } constructor(private newsService:NewsService){}; getNews():void{ this.newsService.getNews().then(newlist=>this.newlist=newlist); } ngOnInit():void{ this.getNews(); } }
在该类中我们做了三处修改
1. 导入服务NewsService,通常服务都是.service.ts后缀,约定。
2. 在providers中增加 NewsService,
3. 集成 OnInit ,增加Angular2的初始化ngOnInit,主要目的是重新设置自己的属性newlist
4.注意构造函数constructor,服务在这里DI进来。
第三、总结
命令行 npm start,程序可以work了,我们需要注意的几个点,
1. 服务写好后,需要在Component中 导入到 Providers
2. 集成OnInit的时候注意 import { OnInit } from '@angular/core';
3. 注意Promise的写法,只有返回时Promise的对象的时候,才可以使用then 后续处理
4. 了解箭头函数的使用
最终程序下载 点击下载
相关文章推荐
- Angular2快速入门-2.创建一个新闻列表
- Angular2快速入门-5.使用http(新闻数据来自http请求)
- 使用MicroService4Net 快速创建一个简单的微服务
- 基于django的rest api快速开发(只提供一个接口服务)
- 使用 Visual FoxPro提供一个基于互联网的数据服务
- Unity 2D游戏开发快速入门第1章创建一个简单的2D游戏
- ASP.NET MVC3 快速入门-第六节 增加一个追加数据的方法和一个追加数据的视图 .
- 如何快速创建一个含有大量数据的表?
- 创建一个项目--[Angular入门]
- ASP.NET MVC3 快速入门-第七节 在Movie(电影)模型与数据表中添加一个字段 .
- ASP.NET MVC3 快速入门-第六节 增加一个追加数据的方法和一个追加数据的视图(转)
- [转载]使用 Visual FoxPro提供一个基于互联网的数据服务(翻译)
- 一个提供数据存储和查询服务的分布式中间件需要考虑的一般问题
- [翻译] - <Entity Framework> - 快速入门: 用 EMD 工具在已有数据库的基础上创建一个模型
- ASP.NET MVC3 快速入门-第七节 在Movie(电影)模型与数据表中添加一个字段(转)
- 【Xamarin开发 Android 系列 12】 创建一个Json读取数据应用-添加定位服务
- Unity 2D游戏开发快速入门第1章创建一个简单的2D游戏
- Spring基础:快速入门spring boot(3):创建Restful的Web服务
- 关卡设计快速入门_3. 创建一个新关卡
- 报表服务入门(实验4)创建共享数据源