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. Flask挺好

    很久没写东西了,寒假比较低效,几乎没写代码.只在慕课网上刷完了linux系列课程,现在用linux熟了很多以及看了大部分<鸟叔-linux服务器架设>那本书,虽然对于写代码并没有什么卵用, ...

  2. Linq使用GroupBy筛选数据

    StringBuilder sb = new StringBuilder(); List<IGrouping<string, modle>> listRepeat = mode ...

  3. Android--------使用gson解析json文件

    ##使用gson解析json文件 **json的格式有两种:** **1. {}类型,及数据用{}包含:** **2. []类型,即数据用[]包含:** 下面用个例子,简单的介绍gson如何解析jso ...

  4. MySQL数据库my.cnf配置文件注释详解

    我们知道,在MySQL数据库安装完成后,要对my.cnf配置文件进行适当的修改才能充分利用MySQL数据库的功能.但是对于初学者来说,修改my.cnf配置文件似乎是一个比较难的过程.为了解决这个问题, ...

  5. swift 类 结构体 作为参数 以及可变参数

    Class class Person{ var age = 22, name = "frank" func growolder() { self.age++ //++ 要跟住 不要 ...

  6. Php 基本语法

    php基本语法 1. 四种不同的开始结束标记 只有<?php ?>.<script language="php"></script>两个总是可用 ...

  7. 武汉科技大学ACM :1003: 零起点学算法14——三位数反转

    Problem Description 水题 Input 输入1个3位数(题目包含多组测试数据) Output 分离该3位数的百位.十位和个位,反转后输出(每组测试数据一行) Sample Input ...

  8. IO流(数据流

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

  9. 洛谷 P1093 奖学金

    P1093 奖学金 题目描述 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前5名学生发奖学金.期末,每个学生都有3门课的成绩:语文.数学.英语.先按总分从高到低排序,如果两个同学总分相 ...

  10. QT学习:入门篇(三)

    头文件: #ifndef CChatDisplaySet_h #define CChatDisplaySet_h #include "QtGui/QDialog" #include ...