To use http, we need to import the HTTP_PROVIDER, so that we can inject http to other component:

import {HTTP_PROVIDERS} from 'angular2/http';

bootstrap(App, [
HTTP_PROVIDERS
]);

simple-request.ts:

import {Component} from 'angular2/core';
import {Http, Response} from 'angular2/http';
@Component({
selector: 'simple-request',
template: `
<button type="button" (click)="makeRequest()">Make Request</button>
<div *ngIf="loading">loading...</div>
<pre>{{data | json}}</pre>
`
}) export class SimpleRequest{
loading: boolean = false;
data: Object;
constructor(public http: Http){ } makeRequest(){
this.loading = true;
this.http.request('https://api.github.com/users/zhentian-wan')
.subscribe( (res: Response) => {
this.data = res.json();
this.loading = false;
})
}
}

[Angular 2] Simple intro Http的更多相关文章

  1. [Angular 2] Directive intro and exportAs

    First, What is directive, what is the difference between component and directive. For my understandi ...

  2. Angular源代码学习笔记-原创

    时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...

  3. angular 接入 IdentityServer4

    angular 接入 IdentityServer4 Intro 最近把活动室预约的项目做了一个升级,预约活动室需要登录才能预约,并用 IdentityServer4 做了一个统一的登录注册中心,这样 ...

  4. Angularjs 源码

    /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http://angularjs.org function t ...

  5. Hello Ragel -- 生成状态机的神器

    Ragel 是个很 NB 的能生成状态机的编译器,而且支持一堆语言:C.C++.Object-C.C#.D.Java.Go 以及 Ruby. 原来的文本解析器是用正则表达式实现的,随着状态(if-el ...

  6. [Angular 2] Create a simple search Pipe

    This lesson shows you how to create a component and pass its properties as it updates into a Pipe to ...

  7. [Angular 2] A Simple Form in Angular 2

    When you create a Form in Angular 2, you can easily get all the values from the Form using ControlGr ...

  8. [Angular] Angular Elements Intro

    Make sure install the latest Angular v6 with Angular CLI. Checkout ght Github for the code. 1. Creat ...

  9. [Angular] Angular CDK Intro

    1. Installl latest @angular/cli: sudo npm i -g @angular/cli@next The version I used is:6.0.0-rc.10 2 ...

随机推荐

  1. spring aop例子

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAATcAAAFWCAIAAACD6E2aAAAgAElEQVR4nO2df1gTV77/55/93z/2ee

  2. js中如何把字符串转化为对象

    例如   [javascript]  var test='{ colkey: "col", colsinfo: "NameList" }'       var ...

  3. asp.net 定时器

    using System;using System.Collections.Generic;using System.Web;using System.IO;using System.Web.Secu ...

  4. Windows下配置环境变量和需不需要重启问题

    http://blog.163.com/guomaolin_gavin/blog/static/19961830720121114929321/

  5. java之NIO编程

    所谓行文如编程,随笔好比java文件,文章好比类,参考文献是import,那么目录就是方法定义. 本篇文章处在分析thrift的nonblocking server之前,因为后者要依赖该篇文章的知识. ...

  6. 你好,C++(25)函数调用和它背后的故事5.1.2 函数调用机制

    5.1.2  函数调用机制 在前面的学习中,我们多次提到了“调用函数”的概念.所谓调用函数,就是将程序的执行控制权从调用者(某个函数)交给被调用的函数,同时通过参数向被调用的函数传递数据,然后程序进入 ...

  7. Android导入项目时出现红色感叹号

    导入一个新的项目后,丢失android.jar文件 解决方法:在项目名称上单击右键,选择Properties,再选择Android,再在其中选择一个project build target,点击确定之 ...

  8. Android向SDCard中上传文件时报错:Failed to push items

    向sdcard中添加文件为什么总是提示Failed to push the item(s) Failed to push XXXXX.txt on emulator-     : Read-only ...

  9. storm教程

    二.安装部署   一.storm伪分布式安装 (一)环境准备1.OS:debian 72.JDK 7.0 (二)安装zookeeper1.下载zookeeper并解压 wget http://mirr ...

  10. centos 6.5网卡dhcp不能获得网关

    环境:vmware +centos6.5 添加两个虚拟网卡.一个自动获取ip(用于上网-桥接) 一个手动(与主机通信用于ssh-NAT).  因为自已手动改了一下ifcfg-eth0里面的HWADDR ...