码迷,mamicode.com
首页 > Web开发 > 详细

angular4-http

时间:2017-09-01 20:25:14      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:json   color   style   core   opera   mem   scom   服务   logs   

导入 Http 模块

import { HttpModule } from @angular/http;

@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule],
  declarations: [AppComponent, UserComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }
import { Component, OnInit } from @angular/core;
import { Http } from @angular/http; // (1)
import rxjs/add/operator/map; // (2)

interface Member {
    id: string;
    login: string;
    avatar_url: string;
}

@Component({
    selector: sl-members,
    template: `
    <h3>Angular Orgs Members</h3>
    <ul *ngIf="members">
      <li *ngFor="let member of members;">
        <p>
          <img [src]="member.avatar_url" width="48" height="48"/>
          ID:<span>{{member.id}}</span>
          Name: <span>{{member.login}}</span>
        </p>
      </li>
    </ul>
    `
})
export class MembersComponent implements OnInit {
  members: Member[];

  constructor(private http: Http) { } // (3)使用 DI 方式注入 http 服务

  ngOnInit() {
    this.http.get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`) // (4)调用 http 服务的 get() 方法,设置请求地址并发送 HTTP 请求
        .map(res => res.json()) // (5)调用 Response 对象的 json() 方法,把响应体转成 JSON 对象
        .subscribe(data => {
           if (data) this.members = data; // (6)把请求的结果,赋值给对应的属性
        });
    }
}

声明 MembersComponent 组件

import { MembersComponent } from ./members.component;

@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule],
  declarations: [AppComponent, UserComponent, MembersComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用 MembersComponent 组件

import { Component } from @angular/core;

@Component({
  selector: my-app,
  template: `
    <sl-members></sl-members>
  `,
})
export class AppComponent {}

 

angular4-http

标签:json   color   style   core   opera   mem   scom   服务   logs   

原文地址:http://www.cnblogs.com/avidya/p/7464808.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!