angularjs2 学习笔记(五) http服务
angular2的http服务是用于从后台程序获取或更新数据的一种机制,通常情况我们需要将与后台交换数据的模块做出angular服务,利用http获取更新后台数据,angular使用http的get或put进行后台调用采用的是ajax方式,跨域问题需要单独处理。下面来看一个例子,演示从后台web api中获取数据并进行页面加载。
1、由于要使用http服务,所以我们一定要在我们的web页面需要引入<script src="node_modules/angular2/bundles/http.dev.js"></script>,这步很关键,我之前发生的找不到http服务的原因就在此,浪费了很多时间在此。
2、在angular入口还需引入HTTP_PROVIDERS,并注入,同时由于要使用map,subscribe等所以需要使用rxjs库,那么就需要提前在入口程序中引入import 'rxjs/Rx',血的教训
import {bootstrap} from 'angular2/platform/browser'; import {HTTP_PROVIDERS} from 'angular2/http'; import {myFrame} from "./frame/component/myFrame.component"; import 'rxjs/Rx'; bootstrap(myFrame, [ HTTP_PROVIDERS]);
3、创建服务
///<reference path="../../../node_modules/angular2/typings/browser.d.ts"/> import {Injectable} from 'angular2/core'; import {Http } from 'angular2/http'; @Injectable() export class channelService { private _carsUrl: string = "http://localhost:6611/api/Chanel"; constructor(private _http: Http) { } getChannelList() { return this._http.get(this._carsUrl).map(responce => responce.json()) }
在这个服务中使用了http中的get来获取数据,这里get的url(web api)是与我目前的anuglar应用在一个域内。作为服务我们需要申明该服务是可注入的@Injectable()
4、服务调用
///<reference path="../../../node_modules/angular2/typings/browser.d.ts"/> import {Component} from 'angular2/core'; import {appService} from './../service/appsetting.service' import {channelService} from './../service/channel.service' import {Channel} from './../model/channel' @Component({ selector: 'topNav', templateUrl: '../app/frame/template/topNav.html', providers: [appService, channelService] }) export class topNav { webTitle: string; public items: Channel[]; constructor(private _appService: appService,private _channelService:channelService) { this.getWebTitle(); this.getChannelList(); } getWebTitle() { this.webTitle = this._appService.AppSetting.webTitle; } getChannelList() { this._channelService.getChannelList().subscribe(res => { this.items=res}); } }
这里就和普通服务调用没什么区别了,需要先import再在providers中申明,然后在构造函数中注入就行了。
这个例子中有个需要注意的是我们前端model和后端model有可能不一致,那么需要在获取数据后再进行转换,如果类型字段都一致那么可以直接使用,由于是json格式,系统会自动将后台model转换为我们前端使用的model
Web api:
public class ChanelController : ApiController { // GET api/<controller> public IEnumerable<Chanel> Get() { return new Chanel[] { new Chanel{ ID="1", ChanelName="组织机构"},new Chanel{ ID="2",ChanelName="通知公告"} }; } }
注:web api 可以使用Swashbuckle 进行测试,安装 PM> Install-Package Swashbuckle,使用时只需在路径后加入swagger,如http://localhost:6611/swagger/ui/index
学习到这里了,逐步开始向实际应用转换,中间的每一步都是血泪史。