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. (转)关于c#中的事件

    原文链接http://blog.csdn.net/joyhen/article/details/8500211 如有不明白的地方欢迎加QQ群14670545 探讨 最近在看委托,然后看到事件,以前一直 ...

  2. angularjs中的绑定策略“@”,“=”,“&”实例

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  3. zepto源码研究 - ajax.js($.ajaxJSONP 的分析)

    简要:jsonp是一种服务器和客户端信息传递方式,一般是利用script元素赋值src来发起请求.一般凡是带有src属性的元素发起的请求都是可以跨域的. 那么jsonp是如何获取服务器的数据的呢? j ...

  4. GET——token

    private function get_token(){ $appid="wx4dae5d61b7f9935c"; $appSecret="24a91315a1a62a ...

  5. Redis同步(主从复制)

    目录1.Replication的工作原理2.如何配置Redis主从复制3.应用示例 1.Replication的工作原理在Slave启动并连接到Master之后,它将主动发送一条SYNC命令.此后Ma ...

  6. CSS3 Transitions

    浏览器支持 属性 浏览器 transition Internet Explorer不支持过渡属性. Firefox4需要前缀-moz-. Chrome和Safari需要前缀-webkit-. Oper ...

  7. static变量的使用

    静态变量 类型说明符是static. 静态变量属于静态存储方式,其存储空间为内存中的静态数据区(在静态存储区内分配存储单元),该区域中的数据在整个程序的运行期间一直占用这些存储空间(在程序整个运行期间 ...

  8. 使用Jstl异常:The absolute uri: http://java.sun.com/jsp/jstl/core cannot&nbs

    错误提示是:        org.apache.jasper.JasperException: This absolute uri http://java.sun.com/jsp/jstl/core ...

  9. 【原创】CLEVO P157SM外接鼠标键盘失灵解决:更换硅脂(附带最新跑分数据)

    作者批注:本文允许转载,并且希望给搜索未来人类.蓝天.CLEVO.更换硅脂或者任何有关关键字的朋友提供帮助. 原文地址:http://www.cnblogs.com/c4isr/p/3514140.h ...

  10. 仿QQ5.0以上新版本侧滑效果

    1.此效果使用了csdn大神孙国威的代码案例在此感谢附上参考博客地址: http://blog.csdn.net/manoel/article/details/39013095/#plain 2.sl ...