anguar2-http實(shí)例

這個組件全部放在一個文件夾中,先講下編寫組件的思路吧,其中也遇到不少坑

  • 既然是編寫組件當(dāng)時首先是創(chuàng)建一個單獨(dú)的子文件夾阅酪,先寫一個類似hello world的簡單例子舵揭,在頁面跑起來,再一步步添加?xùn)|西;
    </br>
  1. http.component.ts主文件,在HttpComponent組件模板中引入HeroList子組件肛跌。
    <pre>
    import {Component} from 'angular2/core';
    import {HeroList} from './hero-list.component';
    import {Hero} from './hero';
    @Component({
    selector: 'http-component',
    template: <h1>Tour of Heroes !</h1> <hero-list></hero-list>,
    directives: [HeroList], //此處必須注入依賴的子組件
    providers: [HTTP_PROVIDERS] // 也可在bootstrap中添加,與ROUTER_PROVIDERS一樣
    })
    export class HttpComponent {}
    </pre>

  2. hero-list.ts文件,定義HeroList組件模板
    <pre>
    import {Component,OnInit,Injectable} from 'angular2/core';
    import {HTTP_PROVIDERS} from 'angular2/http';
    import {HeroService} from './hero.service';
    import {Hero} from './hero';
    @Component({
    selector: 'hero-list',
    template: <h3>Heroes:</h3> <ul> <li *ngFor="#hero of heroes">{{hero.name}}</li> </ul> New Hero: <input #newHero/> <button (click)="addHero(newHero)">Add Hero</button>,
    providers: [
    HTTP_PROVIDERS,
    HeroService // 依賴的文件必須提供
    ]
    })
    export class HeroList implements OnInit{
    constructor(private _http: HeroService) {}

ngOnInit() { //OnInit是在初始化時獲取相關(guān)數(shù)據(jù)憔足,這里是用HeroService的方法獲取模板渲染的數(shù)據(jù)
this._http.getHeroes().then(data => this.heroes = data);
}

public heroes: Hero[];

//定義添加newHero方法,加入heroes數(shù)組中
addHero(hero) {
if(!hero.value) return;
let newHero: Hero = {
name: hero.value,
id: this.heroes.length
}
this.heroes.push(newHero);
hero.value = "";
}
}
</pre>
3.hero-sevice.ts定義服務(wù)屬性酒繁,使用Rxjs發(fā)送異步請求獲取數(shù)據(jù)
<pre>
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import {Hero} from './hero'; //導(dǎo)入數(shù)據(jù)結(jié)構(gòu)
import 'rxjs/Rx'; //導(dǎo)入rx模塊提供一步請求用
@Injectable()
export class HeroService {
constructor(private http: Http) {}
public heroes: Hero[];
private _heroUrl = "app/http-client/heroes.json";
getHeroes() {
return this.http.get(this._heroUrl)
.toPromise()
.then(res => <Hero[]>res.json());
}
}
</pre>
4.hero.ts定義數(shù)據(jù)結(jié)構(gòu)接口
<pre>
export interface Hero {
name: string;
id: number;
}
</pre>
5.herodata.json<Hero[]>類型的數(shù)組數(shù)據(jù)
<pre>
[{"name": "SpiderMan", "id": 1},
{"name": "Kongfu Pander", "id": 2},
{"name": "Icon Man", "id": 3},
{"name": "Gorilla", "id": 4}]
</pre>
.注:頁頭要引入http.dev.js否則報錯
<pre>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
</pre>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末滓彰,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子州袒,更是在濱河造成了極大的恐慌揭绑,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,546評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件郎哭,死亡現(xiàn)場離奇詭異他匪,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)夸研,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評論 3 395
  • 文/潘曉璐 我一進(jìn)店門邦蜜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人亥至,你說我怎么就攤上這事悼沈。” “怎么了抬闯?”我有些...
    開封第一講書人閱讀 164,911評論 0 354
  • 文/不壞的土叔 我叫張陵井辆,是天一觀的道長。 經(jīng)常有香客問我溶握,道長杯缺,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,737評論 1 294
  • 正文 為了忘掉前任睡榆,我火速辦了婚禮萍肆,結(jié)果婚禮上袍榆,老公的妹妹穿的比我還像新娘。我一直安慰自己塘揣,他們只是感情好包雀,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,753評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著亲铡,像睡著了一般才写。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上奖蔓,一...
    開封第一講書人閱讀 51,598評論 1 305
  • 那天赞草,我揣著相機(jī)與錄音,去河邊找鬼吆鹤。 笑死厨疙,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的疑务。 我是一名探鬼主播沾凄,決...
    沈念sama閱讀 40,338評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼知允!你這毒婦竟也來了撒蟀?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,249評論 0 276
  • 序言:老撾萬榮一對情侶失蹤廊镜,失蹤者是張志新(化名)和其女友劉穎牙肝,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體嗤朴,經(jīng)...
    沈念sama閱讀 45,696評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,888評論 3 336
  • 正文 我和宋清朗相戀三年虫溜,在試婚紗的時候發(fā)現(xiàn)自己被綠了雹姊。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,013評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡衡楞,死狀恐怖吱雏,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情瘾境,我是刑警寧澤歧杏,帶...
    沈念sama閱讀 35,731評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站迷守,受9級特大地震影響犬绒,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜兑凿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,348評論 3 330
  • 文/蒙蒙 一凯力、第九天 我趴在偏房一處隱蔽的房頂上張望茵瘾。 院中可真熱鬧,春花似錦咐鹤、人聲如沸拗秘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽雕旨。三九已至,卻和暖如春捧请,著一層夾襖步出監(jiān)牢的瞬間凡涩,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評論 1 270
  • 我被黑心中介騙來泰國打工血久, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留突照,地道東北人。 一個月前我還...
    沈念sama閱讀 48,203評論 3 370
  • 正文 我出身青樓氧吐,卻偏偏與公主長得像讹蘑,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子筑舅,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,960評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Angular 2架構(gòu)總覽 - 簡書http://www.reibang.com/p/aeb11061b82c A...
    葡萄喃喃囈語閱讀 1,485評論 2 13
  • 版本:Angular 5.0.0-alpha AngularDart(本文檔中我們通常簡稱 Angular ) 是...
    soojade閱讀 834評論 0 4
  • 版本:4.0.0+2 有一些英雄指南應(yīng)用的新需求: 添加一個儀表盤 視圖座慰。 添加在英雄 視圖和 儀表盤 視圖之間導(dǎo)...
    soojade閱讀 1,294評論 0 0
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)翠拣,斷路器版仔,智...
    卡卡羅2017閱讀 134,657評論 18 139
  • 當(dāng)你去問打工一族蛮粮,遠(yuǎn)離家鄉(xiāng)打工是為了什么?可能98%的人都說是為了掙錢谜慌,然后你又想過然想,掙到錢了之后,做什么呢欣范?這個...
    秋爺職場官閱讀 368評論 0 0