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. ASPNET 5

    1. 什么是APS.NET 5 ASP.NET 5是一个可构建基于云服务的Web应用的构架,并且它是开源的和跨平台的.我们提供了重新设计的一个可以部署在本地和云服务的优化框架.它由一个一个模块组成,因 ...

  2. Swift2.0异常处理

    // 在抛出异常之前,我们需要在函数或方法的返回箭头 -> 前使用 throws 来标明将会抛出异常 func myMethodRetrunString() throws -> Strin ...

  3. 搭建Struts2开发环境

    搭建Struts2环境时,我们一般需要做以下几个步骤的工作: 1.创建javaweb工程 2.找到开发Struts2应用需要使用到的jar文件 3.创建jsp文件 4.创建action文件 5.编写S ...

  4. 重装eclipse要做的事

    当我们要在新环境上安装eclipse时,往往会做很多的个性修改和安装一些插件,下面就这些做一下总结: 一.插件 1.svn插件(subclipse) 插件官网下载地址:http://subclipse ...

  5. osg for android (一) 简单几何物体的加载与显示

    1. 首先需要一个OSG for android的环境. (1).NDK 现在Eclipse 对NDK已经相当友好了,已经不需要另外cygwin的参与,具体可以参考 Android NDK开发篇(一) ...

  6. ubuntu自动挂载windows分区和开机自动启动wallproxy

    1. 自动挂载windows分区 ubuntu默认是要点一下相应的盘符才会挂载windows分区的. 今天发现了ubuntu下最简单的自动挂载windows分区的办法.... :) 参考如下方法:ht ...

  7. Oracle数据库之创建表空间与用户

    Oracle数据库之创建表空间与用户 一.创建表空间 基本语法表述: CREATE TABLESPACE tablespace_name [DATAFILE datafile_spec1 [,data ...

  8. xml代码

    修改和删除: <?php$doc=new DOMDocument();$doc->load("php.xml");$root=$doc->documentElem ...

  9. twsited(4)--不同模块用redis共享以及用web发送数据到tcpserver

    上一章开头我们说,要连接之前flask系列文章中的用户,结果篇幅不够,没有实现. 今天我们把它实现一下.话说,不同模块之间,该如何联系在一起,通常都是mysql.redis.rabbitmq还有RPC ...

  10. Properties配置文件

    package file; import java.io.FileOutputStream; import java.io.FileReader; import java.io.FileWriter; ...