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 中,

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM