上一篇：Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数

感觉这篇不是很好写，因为涉及到网络请求，如果采用真实的网络请求，这个例子大家拿到手估计还要自己写一个web api来提供调用；好在Angular2提供了本地模拟的api，可以供我们编写方便；但是，真实使用的情况往往与本地模拟有一些差别，会存在跨域等一系列问题；这些不在本篇文章的讲解范围之内，如果在.net下遇到跨域问题可以直接私信我。

Angular的http模块并不是Angular2的核心模块，你并不一定要使用它;我们有很多替代方案，比如你可以使用jQuery的ajax，又或是自己编写网络请求；这都不重要，你不学习这一节的内容并不会影响你使用Angular

假设你已经跟上了我们的进度，那，就开始吧

首先我们得要建立一个模拟的api文件，在我们的data目录下，内容如下

 import { InMemoryDbService } from 'angular-in-memory-web-api';

 export class InMemoryDataService implements InMemoryDbService {

   createDb() {

      let blogs=[

     { id:1,title:"号外号外？奥巴马要下台啦",profile:"唐纳德·特朗普，第45任美国总统，1946年6月14日生于美国纽约，政治家、商人、作家、主持人。特朗普1968年从宾夕法尼亚大学"},

     { id:2,title:"什么？奥巴马要下台啦？",profile:"除房地产外，特朗普将投资范围延伸到其他行业，包括开设赌场、高尔夫球场等。他还涉足娱乐界，是美国真人秀《名人学徒》等电视节目的主持人"},

     { id:3,title:"号外号外？川普要上台了",profile:"特朗普在过去20年间分别支持过共和党和民主党各主要总统竞选者。2015年6月，特朗普以共和党竞选者身份正式参加2016年美国总统选举。此前，特朗普没有担任过公共职务"},

     { id:4,title:"啥？我大四川人也要当美国总统了？",profile:"2016年11月9日，美国大选计票结果显示：共和党候选人唐纳德·特朗普已获得了276张选举人票，超过270张选举人票的获胜标准，当选美国第45任总统"},

     { id:5,title:"mdzz,一群麻瓜，统统查杀",profile:"1946年6月14日，特朗普在纽约市出生，排行老二，上有一个姐姐，下有两个弟弟、一个妹妹。由于祖父英年早逝，父亲"},

     { id:6,title:"首推龙文，必须出具",profile:"父母亲友的爱心呵护下，特朗普自幼即满腹自信，活力四射，无法静下来用功读书。13岁那年，父母只好送他去“纽约军事学校”求学，冀望军校的严格训练能帮助他力争上游。在军校就读期间，特朗普"}

 ]

     return {blogs};

   }

 }

这里有些朋友会遇到  找不到 angular-in-memory-web-api 这个模块的错误，我们在package.json里面添加这段代码，"angular-in-memory-web-api": "~0.1.13",

位置在"devDependencies"下面，然后在命令行npm install一下

ok，这里就是我们的新的数据来源，那么要如何使用呢？

先到app.module.ts中配置，这里贴出全部代码吧

 import { BrowserModule } from '@angular/platform-browser';

 import { NgModule } from '@angular/core';

 import { FormsModule } from '@angular/forms';

 import { HttpModule } from '@angular/http';

 import { AppRoutingModule } from './app.routing';

 import { ArticleDetailRoutingModule } from './articledetail.routing';

 //in memery

 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';

 import { InMemoryDataService }  from './data/in-memery-data.service'

 import {BlogService} from './data/blog.service';

 import {CommentService} from './data/comment.service';

 import { AppComponent } from './app.component';

 import { ArticleComponent } from './article/article.component';

 import { ArticledetailComponent } from './articledetail/articledetail.component';

 import { CommentComponent } from './comment/comment.component';

 @NgModule({

   declarations: [

     AppComponent,

     ArticleComponent,

     ArticledetailComponent,

     CommentComponent

   ],

   imports: [

     BrowserModule,

     FormsModule,

     HttpModule,

     ArticleDetailRoutingModule,

     InMemoryWebApiModule.forRoot(InMemoryDataService),//in memery

     AppRoutingModule

   ],

   providers: [BlogService,CommentService],

   bootstrap: [AppComponent]

 })

 export class AppModule { }

有备注的话我就不解释什么了，就是模块导入而已

接下来，在我们的blog.service.ts里面使用http去获取这些数据

要使用Angular2的http服务，首先要导入它

import {Http,Response ,Headers} from "@angular/http";

Http就是http请求模块，至于Response的话是返回值类型，Headers是请求头的配置，这个我们在之后会用得到；

必须说明一下的是，Angular2的get http请求的返回值都是Observable类型的，这是。。。Observable（可观察对象）是一个管理异步数据流的强力方式。。很多概念，这个以后再讲吧。我们这里通过rxjs将它转为一个Promise对象，Promise相对来说好理解一些，在一个Promise有了结果时，它承诺会回调我们，我们请求一个异步服务去做点什么，并且给它一个回调函数。 当Promise的工作一旦完成，它就会调用我们的回调函数，并通过参数把工作结果或者错误信息传给我们;详细信息的话可以自行搜索；

好，现在来改造我们的blog.service.ts

import { Injectable } from '@angular/core';

import {Http,Response ,Headers} from "@angular/http";

import 'rxjs/Rx';

import { Blog,BLOGS } from './blog';

@Injectable()

export class BlogService {

  private apiUrl="app/blogs";

  private headers = new Headers({'Content-Type': 'application/json'});

  constructor(private http:Http){}

  getBlogs():Promise<Blog[]> {

    return this.http.get(this.apiUrl)

    .toPromise()

    .then(r=> r.json().data as Blog[]); //BLOGS;

  }

  getSelectedBlog(id:number):Promise<Blog>

  {

    let blog=new Blog();

    return this.getBlogs().then(blogs=>blogs.find(x=>x.id==id));

  }

  create(title: string):Promise<Blog> {

     return this.http

      .post(this.apiUrl, JSON.stringify({title: title}), {headers: this.headers})

      .toPromise()

      .then(res => res.json().data);

  }

  editBlog(blog:Blog)

  {

    let editBlog= BLOGS.find(x=>x.id==blog.id);

    editBlog=blog;

  }

  addBlog(blog:Blog):string

  {

    var maxId=0;

    BLOGS.forEach(x=>{

        if(x.id>maxId)

          maxId=x.id;

     });

     blog.id=maxId;

     if(blog.title.length==0)

     {

       return "title 不能未空";

     }

     else{

       BLOGS.push(blog);

       return "success";

     }

  }

}

要将结果转为Promise,我们需要导入rxjs，代码如上

其他我们在构造函数中注入了http模块，然后使用了它,我们这里就简单得使用了get和post两种方式，当然，Angualr2提供了put以及delete，用法都一样，这里就不多举例了；上面的post方法使用了JSON.stirngify来处理我们的参数，实际情况中，我们可以直接将一个Object类型传过去就行了，类似与下面的代码

create(blog: Blog):Promise<Blog> {

     return this.http

      .post(this.apiUrl, blog, {headers: this.headers})

      .toPromise()

      .then(res => res.json().data);

  }

Angular会帮我们处理这些数据

Angular默认的请求方式是 header {'Content-Type': 'application/json'};如果需要其他请求类型，需要自己指定;但是，Angular2最终也会将请求的参数处理为一个Json，至于你的后台要用什么去接收，那就是你的事情了。

本篇文章中的本地模拟api的地址，以及操作方法为什么能成功你并不用关心，这只是用作例子而已，实际开发中并不会这样，如果你有真实的api，那就请使用真实的api吧。

由于我们将返回类型修改为了Promise，那么我们以前的组件里面的代码也需要修改，首先是

article.component.ts

 import { Component } from '@angular/core';

 import {BLOGS,Blog} from '../data/blog';

 import {BlogService} from './../data/blog.service';

 import {Observable} from 'rxjs';

 @Component({

     selector: 'ngarticle',

     templateUrl: './article.component.html',

     styleUrls:['./article.component.css']

 })

 export class ArticleComponent  {

     blogList:Blog[];

     selectedBlog:Blog;

     editStr:string;

     constructor(private bService:BlogService)

     {

         bService.getBlogs().then(x=>{this.blogList=x});

     }

     selectBlog(id:number)

     {

         this.bService.getSelectedBlog(id).then(blog=>{this.selectedBlog=blog;console.log(blog);});

     }

     doAdd()

     {

        if(this.editStr.length>0)

        {

          this.bService.create(this.editStr)

           .then(x=>{

          this.blogList.push(x);this.editStr=""

          });

        }

    }

 }

这里我们额外处理了一个新增文章的操作，那，我们到html页面添加一个按钮

 <div class="article">

     <ul class="articleList">

             <li *ngFor="let blog of blogList" [routerLink]="['/articledetail',blog.id]" >

                 <a>

                    {{blog.id}}:{{blog.title}}

                 </a>

             </li>

     </ul>

     <div>

 </div>

 <div class="container">

     <div class="row">

         <button class="btn" (click)="doAdd()">新增文章</button>

         <input type="text" class="input" [(ngModel)]="editStr">

     </div>

 </div>

接下来我们处理下articleDetail.component.ts就行了

由于只修改了ngOnInit，这里就不贴那么多代码了

 ngOnInit() {

         let id=this.aRoute.params

         .switchMap((params: Params) =>this.bService.getSelectedBlog(+params['id']))

         .subscribe(x=>this.blog=x)

      }

到此，我们的网络请求一块就可以正常工作了

由于Angualr2的http涉及到一些额外的处理方式，包括Promise和Observable，这使得很多人刚开始会很不适应；但是Angular并不强制你使用这些，你可以使用自己的请求方式；但是使用rxjs能带来很强的流处理方式，这些都需要深入学习之后才能体会到，如果你的项目对异步等要求没那么强，你可以直接使用promise或者直接用ajax都是可行的，具体看你的项目需求。之后可能会带来关于RxJs的教程，可能

更新ing。。。

项目已经放到了gitbub上，地址 https://github.com/SeeSharply/LearnAngular

本文章的提交 https://github.com/SeeSharply/LearnAngular/tree/b6396476023bb388b93bfd6f922374f790a71786

Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求的更多相关文章

1. Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境

   一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...

2. Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数

   上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

3. Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数

   上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

4. Angular2入门系列教程4-服务

   上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

5. Angular2入门系列教程3-多个组件，主从关系

   上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...

6. Angular2入门系列教程2-项目初体验-编写自己的第一个组件

   上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...

7. ASP.NET MVC 入门系列教程

   ASP.NET MVC 入门系列教程 博客园ASP.NET MVC 技术专题 http://kb.cnblogs.com/zt/mvc/ 一个居于ASP.NET MVC Beta的系列入门文章,有朋友 ...

8. Qt快速入门系列教程目录

   Qt快速入门系列教程目录

9. Android视频录制从不入门到入门系列教程(一)————简介

   一.WHY Android SDK提供了MediaRecorder帮助开发者进行视频的录制,不过这个类很鸡肋,实际项目中应该很少用到它,最大的原因我觉得莫过于其输出的视频分辨率太有限了,满足不了项目的 ...

随机推荐

1. SQL Server on Linux 理由浅析

   SQL Server on Linux 理由浅析 今天的爆炸性新闻<SQL Server on Linux>基本上在各大科技媒体上刷屏了 大家看到这个新闻都觉得非常震精,而美股,今天微软开 ...

2. Linux虚拟机的安装（使用Centos6.3）

   1.什么是虚拟机? 虚拟机指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统 2.安装Linux虚拟机前要做的准备 2.1:一台windows环境的pc 2.2:下载VM ...

3. 在Linux虚拟机下配置tomcat

   1.到Apache官网下载tomcat http://tomcat.apache.org/download-80.cgi 博主我下载的是tomcat8 博主的jdk是1.8 如果你们的jdk是1.7或 ...

4. pt-online-schema-change中update触发器的bug

   pt-online-schema-change在对表进行表结构变更时,会创建三个触发器. 如下文测试案例中的t2表,表结构如下: mysql> show create table t2\G . ...

5. Spring Enable annotation – writing a custom Enable annotation

   原文地址:https://www.javacodegeeks.com/2015/04/spring-enable-annotation-writing-a-custom-enable-annotati ...

6. Discuz NT 架构剖析之Config机制

   接触了Discuz NT! 一段时间了,是时候做个总结了,标题好霸气,有木有? 都是托园子里的大牛代振军的福啊,哈哈哈哈. 首先论坛的信息不是完全存储在数据库里面的,一部分信息存储在config文件里 ...

7. WebApi返回Json格式字符串

   WebApi返回json格式字符串, 在网上能找到好几种方法, 其中有三种普遍的方法, 但是感觉都不怎么好. 先贴一下, 网上给的常用方法吧. 方法一:(改配置法) 找到Global.asax文件,在 ...

8. Hibernate中事务的隔离级别设置

   Hibernate中事务的隔离级别,如下方法分别为1/2/4/8. 在Hibernate配置文件中设置,设置代码如下

9. 【Java大系】Java快速教程

   感谢原作者:Vamei 出处:http://www.cnblogs.com/vamei Java是面向对象语言.这门语言其实相当年轻,于1995年才出现,由Sun公司出品.James Gosling领 ...

10. PHP设计模式（五）建造者模式（Builder For PHP）

    建造者模式:将一个复杂对象的构造与它的表示分离,使同样的构建过程可以创建不同的表示的设计模式. 设计场景: 有一个用户的UserInfo类,创建这个类,需要创建用户的姓名,年龄,爱好等信息,才能获得用 ...