angular之Http服务
原文
https://www.jianshu.com/p/53e4a4bfad7d
大纲
1、什么是angular服务
2、服务的类别
3、认识angular的Http请求
4、简单实例
5、angular的http模块
6、angular官网的英雄编辑器的服务代码
7、angular代码资源
什么是angular服务
在Angular中,我们所说的服务是指那些能够被其它的组件或者指令调用的单一的,可共享的代码块.服务能够使我们提高代码的利用率,方便组件之间共享数据和方法,方便测试和维护。
服务是一个广义范畴，包括：值、函数、或应用所需的特性
几乎任何东西都可以是一个服务，典型的服务是一个类，具有专注的、明确的用途，它应该做一件特定的事情，并把它做好。
服务无处不在。
组件类应保持精简。组件本事不从服务器获得数据，不进行验证输入，也不直接往控制台写日志。它们把这些任务委托给服务
组件的任务就是提供用户体验，仅此而已。它介于视图（由模板渲染）和应用逻辑（通常包括模型的某些概念）之间。设计良好的组件为数据绑定提供属性和方法，把其它琐事都委托给服务。
服务的类别
服务有很多类别：日志服务、数据服务、消息总线、税款计算器、应用程序配置。
认识angular的Http请求
angular的http是基于浏览器的“新特性” Fetch API 而产生的,Fetch API 和以前的 xmlhttprequest 主要功能是一样的，就是发请求.不同的地方是Fetch 是基于 promise 的，而且可以配合 service worker, stream, cache 之类的 "新特性"。
简单实例
/*
testHttp.component.ts
通过http的get请求获取本地数据
*/
import 'rxjs/add/operator/map';
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'test-http',
templateUrl: './testHttp.component.html',
})
export class TestHttpComponent implements OnInit {
public mobiles: any[];
constructor(public http: Http) {
console.log('AppComponent constructor :', 'run step constructor ');
/**
需要注意的是这里的请求文件的路径需要正确,
所以一般都会有在公有文件中定义一个baseUrl从而来定位当前的文件位置，
进而再获取文件从而获取数据。
*/
http.get('../app/page/test/testHttp.json').subscribe(res=>
this.mobiles =res.json()
);
}
ngOnInit() {
console.log('AppComponent ngOnInit :', 'run step ngOnInit ');
}
}
<!--
testHttp.component.html
-->
<h1>Angular 2 App</h1>
<ul *ngIf="mobiles">
<li *ngFor="let m of mobiles"><span>{{m.id}}</span> {{m.name}}</li>
</ul>
angular的http模块
HttpModule并不是Angular的核心模块。 它是Angular用来进行Web访问的一种可选方式，并位于一个名叫@angular/http的独立附属模块中，因此需要在app.module.ts中引入关于http的模块。
import { HttpModule, JsonpModule } from '@angular/http';
@NgModule({
imports: [
HttpModule,
JsonpModule
],
})
angular官网的英雄编辑器的服务代码
/*
hero.ts
*/
export class Hero {
id: number;
name: string;
}
/*
hero.data.ts
*/
import {Hero} from "./hero";
export const HEROS: Hero[] = [
{id: 1, name: 'Hero1'},
{id: 2, name: 'Hero2'},
{id: 3, name: 'Hero3'},
{id: 4, name: 'Hero4'},
{id: 5, name: 'Hero5'},
{id: 6, name: 'Hero6'},
{id: 7, name: 'Hero7'},
{id: 8, name: 'Hero8'}
];
/*
hero.service.ts
*/
import { Injectable } from '@angular/core';
import {Hero} from "./hero";
import {HEROS} from "./hero.data";
@Injectable()
export class HeroService {
getHeros(): Promise<Hero[]> {
return Promise.resolve(HEROS);
}
getMockHeros(): Promise<Hero[]> {
return new Promise(resolve => setTimeout(resolve(HEROS), 2000))
.then(() => this.getHeros());
}
}
/*
app.component.html
*/
import {Component, OnInit} from '@angular/core';
import {Hero} from "./User";
import {HeroService} from "./special-user.service";
/*
* 别忘记了使用@前缀
* 这里相当于组件视图
*/
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
/*
* 导出这个组件,也就是一个类
* 这里相当于组件控制器
*/
export class AppComponent implements OnInit{
heros: Hero[];
constructor(
private heroService: HeroService
){}
ngOnInit() {
this.getHeroInfo();
}
public getHeroInfo () {
this.heroService.getHeros().then(heros => {
console.log(heros);
this.heros = heros
})
}
}
/*
app.component.html
*/
<ul>
<li *ngFor="let hero of heros">{{hero.name}}</li>
</ul>
代码资源
angular实例代码中的angular-service，该项目中包含了angular服务的简单实例，也包含了angular英雄编辑器的请求服务的代码，还有我自己根据所学知识写的http服务请求数据的代码，希望能对读者有所帮助。
