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. [JavaScript]plupload多图片上传图片

    var uploader = new plupload.Uploader({ //创建实例的构造方法     runtimes: 'html5,flash,silverlight,html4',    ...

  2. sqlserver中的统计语法

    set statisitcs io {on | off} 显示与执行的sql语句有关的磁盘活动量的信息 set statistics profile {on | off} 显示语句的配置文件信息 se ...

  3. RecyclerView更通用——listView的onItemClick,onLongItemClick,addHeaderView,addFooterView

    一.点击事件 setOnItemClickListener,setOnItemLongClickListener RecyclerView中虽然没有提供上面这两个接口,但是给我们提供了另外一个接口:O ...

  4. java.io.FileNotFoundException: class path resource [bean/test/User.hbm.xml] cannot be opened because it does not exist

    确定下 WEB-INF/classes下有没有,不是src下哦 工程的src下创建后,会发布到tomcat下项目下的classes中

  5. 认识html标签

    让我们通过一个网页的学习,来对html标签有一个初步理解. 平常大家说的上网就是浏览各种各式各样的网页,这些网页都是由html标签组成的. 下面就是一个简单的网页.效果图如下: 我们来分析一下,这个网 ...

  6. 侧滑RESideMenu的使用

    MainTabBarViewController *mainCtrl = [[MainTabBarViewController alloc] init]; LeftViewController *le ...

  7. PHP中的定界符格式

    <?php //nowdoc(单引号定界符) //ABC可以是任合内容,放在单引号中 $c=<<<'ABC' 这里可以是任合内容 我是历的苛夺基 本原则叶落归根在运 输费艰难田 ...

  8. php访问方法外变量

    class Capture { private static $_CapSite = 222; function dd() { echo self::$_CapSite; } } $cc=new Ca ...

  9. IO流(数据流

    数据流 创建一个输入或者输出流只想底层的输入输出流 File file1=new File("test1.txt"); FileOutputStream out1=new File ...

  10. JAVA classpath, 纠正我一直以来错误的认知

    如何调在CLI中使用java tool(JDK中的java命令)调用一个打包在jar中的类,我想大多数人都能给出笼统的方案: java -classpath xxxxx com.test.classA ...