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. github修改自己的昵称

    由于刚接触github,不会用,就随便写了个昵称,后来想改,却不知道从哪里改,到百度搜结果都是说不能修改的(这里就不吐槽百度了),还是直接上图吧. 点击Settings,然后跳转到下面界面,点击Acc ...

  2. jquery mini ui 学习

    1.mini.parse(); 将html标签解析为miniui控件.解析后,才能使用mini.get获取到控件对象. 2.mini.get(id);根据id获取控件对象. 3.grid.load() ...

  3. start with connect by prior学习

    这是oracle中的树查询,查询出来的数据会根据上下级组成树的结构.select * from mw_sys.mwt_pd_deps start with obj_id = '63EBEC8E-E76 ...

  4. Win8 IE10 只能以管理员打开的解决方法

    Win8 IE10 只能以管理员打开的解决方法 使用 Windows8 一段时间后,最近遇到 IE10 打不开,只能以管理员身份打开,很是郁闷.无论禁用IE加载项还是恢复默认设置都无效,也看到论坛不少 ...

  5. XPath总结一

    这里介绍下XPath的用法: 它生成一个string对象,作为XmlNode的方法SelectSingleNode,SelectNodes的输入参数 ,以此来查询符合条件的节点. 选择当前节点:  . ...

  6. Smtp协议与Pop3协议的简单实现

    前言 本文主要介绍smtp与pop3协议的原理,后面会附上对其的简单封装与实现. smtp协议对应的RFC文档为:RFC821 smtp协议 SMTP(Simple Mail Transfer Pro ...

  7. Linux(Centos、Debian)之安装Java JDK及注意事项(转)

    --转自:http://www.cnblogs.com/hanyinglong/p/5025635.html 说明:本人是以Debian 操作系统来进行安装的,这篇文章有很大帮助,才学Linux对有些 ...

  8. jQuery--jqChart折线图使用eval处理返回数据无效的解决方法

    jquery初学者 查了很多帖子,jqchart插件做折线图时,处理返回数据时全都是eval,但我怎么也弄不出来,后来发现: 1.根本不需要eval处理,直接截取字符串即可(返回值要拼接好): 2.处 ...

  9. JSP九大隐式对象

    JSP九大隐式对象 request HttpServletRequest response HttpServletResponse session HttpSession application Se ...

  10. 详解ios文件系统文件目录读写操作-备用

    iPhone文件读写系统操作教程是本文要介绍的内容,对于一个运行在iPhone得app,它只能访问自己根目录下得一些文件(所谓sandbox).一个app发布到iPhone上后,它得目录结构如下:  ...