Angular2快速入门-5.使用http（新闻数据来自http请求）

Angular2官网通过http请求模拟API 来请求hero 数据，感觉有点繁琐，很让人理解不了，我们不采用它的办法，直接展示怎么使用http请求来获取我们的数据，直截了当。

第一、准备工作，创建一个WebApi

创建一个webapi（这里我使用MVC4 WebApi ，你可以选择其他途径提供json数据，根据自己需要），返回新闻列表

public class NewsController : ApiController

    {

        public IEnumerable<News> Get()

        {

            return AllNews;

        }

        public News Get(int id)

        {

            return AllNews.Where(m => m.id == id).First();

        }

        public List<News> AllNews

        {

            get

            {

                return new List<News>()

                {

                      new News(){ id=1,title="title1", click=0, create_date="2017-10-20"},

                      new News(){ id=2,title="title2", click=0, create_date="2017-10-20"},

                      new News(){ id=3,title="title3", click=0, create_date="2017-10-20"},

                      new News(){ id=4,title="title4", click=0, create_date="2017-10-20"},

                      new News(){ id=5,title="title5", click=0, create_date="2017-10-20"},

                      new News(){ id=6,title="title6", click=0, create_date="2017-10-20"},

                };

            }

        }

    }

　　由于我们的ajax请求跨域，需要设置允许跨域请求，可以在web.config中增加以下配置

<system.webServer>

<httpProtocol>

      <customHeaders>

        <add name="Access-Control-Allow-Origin" value="*" />

        <add name="Access-Control-Allow-Headers" value="Content-Type" />

        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />

      </customHeaders>

    </httpProtocol>

  </system.webServer>

第二、修改 NewService.ts 的GetNews 方法，数据来自http get请求

1. 在news.service.ts 中增加 http模块导入

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

import 'rxjs/add/operator/toPromise';

增加构造函数，修改getNews 方法

constructor(private http:Http){}

    getNews() {

        return this.http.get("http://localhost:63387/api/news/").toPromise()

                   .then(response=>response.json())

                   .catch((err)=>{

                    console.log(err);

                  });

    }

最终代码

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

import { News } from './news';

import { NewList } from './mock-news';

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

import 'rxjs/add/operator/toPromise';

@Injectable()

export class NewsService {

    constructor(private http:Http){}

    getNews() {

        return this.http.get("http://localhost:63387/api/news/").toPromise()

                   .then(response=>response.json())

                   .catch((err)=>{

                    console.log(err);

                  });

         }

}

2. 修改app.module.ts ,增加HttpModule 支持

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

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

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

import { NewsListComponent } from './news/newslist.component';

import { NewsDetailComponent } from './news/news-detail.component';

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

import {NewsService} from './news/news.service';

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

@NgModule({

  declarations: [

    AppComponent,

    NewsListComponent,

    NewsDetailComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

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

在 imports 中增加HttpModule

第三、测试运行

npm start 可以看到能正常显示我们的数据了

第四、总结

1. 在需要的Service中，增加导入 Http

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

import 'rxjs/add/operator/toPromise';

2.在 app.module.ts 中引入HttpModule,

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

同时在@NgModule注解中把HttpModule增加到 imports 中，

巴特西

Angular2快速入门-5.使用http（新闻数据来自http请求）

第一、准备工作，创建一个WebApi

第二、修改 NewService.ts 的GetNews 方法，数据来自http get请求

第三、测试运行

第四、总结

最新文章

热门文章