To use http, we need to import the HTTP_PROVIDER, so that we can inject http to other component:

  1. import {HTTP_PROVIDERS} from 'angular2/http';
  2.  
  3. bootstrap(App, [
  4. HTTP_PROVIDERS
  5. ]);

simple-request.ts:

  1. import {Component} from 'angular2/core';
  2. import {Http, Response} from 'angular2/http';
  3. @Component({
  4. selector: 'simple-request',
  5. template: `
  6. <button type="button" (click)="makeRequest()">Make Request</button>
  7. <div *ngIf="loading">loading...</div>
  8. <pre>{{data | json}}</pre>
  9. `
  10. })
  11.  
  12. export class SimpleRequest{
  13. loading: boolean = false;
  14. data: Object;
  15. constructor(public http: Http){
  16.  
  17. }
  18.  
  19. makeRequest(){
  20. this.loading = true;
  21. this.http.request('https://api.github.com/users/zhentian-wan')
  22. .subscribe( (res: Response) => {
  23. this.data = res.json();
  24. this.loading = false;
  25. })
  26. }
  27. }

[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. TextView drawablePadding没有效果

    1.当TextView 设置宽度设置为match_parent的时候 TextView drawablePadding没有效果 ,字设置了center位置,但是和左边的图片离开很远 2.当TextVi ...

  2. 怎样成为PHP 方向的一个合格的架构师

    突然看到这篇文章, 值得反省, 乐在其中, 在接下来的发展中不被淘汰的都来看看, 如何成为一个架构师先明确这里所指的PHP工程师,是指主要以PHP进行Web系统的开发,没有使用其的语言工作过.工作经验 ...

  3. SQL Server 2005、SQL Server 2008版本比较

    SQL Server 2005的版本有SQL Server 2005企业版(Enterprise).SQL Server 2005标准版(Standard) 和SQL Server 2005工作组版( ...

  4. [转]SGI STL 红黑树(Red-Black Tree)源代码分析

    STL提供了许多好用的数据结构与算法,使我们不必为做许许多多的重复劳动.STL里实现了一个树结构-Red-Black Tree,它也是STL里唯一实现的一个树状数据结构,并且它是map, multim ...

  5. CSS的力量

    CSS(Cascading Style Sheet)级联样式表,是一种美观网页设计的解决方案,也是W3C推荐的标准,他可以是我们的网页设计更灵活,更美观,使设计人员对内容的设计和样式的设计分离,使设计 ...

  6. 准备开发一个基于canvas的图表库,记录一些东西(一)

    开源的图表库已经有很多了,这里从头写个自己的,主要还是 提高自己js的水平,增加复杂代码组织的经验 首先写一个画图的库,供以后画图表使用.经过2天的开发,算是能拿出点东西了,虽然功能还很弱,但是有了一 ...

  7. 破解tumblr背景音乐

    http://sex.tumblr.com/api/read/json?callback=streampadPlayerBlogV2.getAudioResponse&type=audio&a ...

  8. shape及其子节点详解

    shape最大的最用便是用来替代图片,释放磁盘空间.另外则是增加适应不通过屏幕的设备. 先来看看shape下面的节点以及它所起到的作用. gradient   -- 对应颜色渐变(startcolor ...

  9. csv内存流文件流

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  10. 怎么把QQ我的收藏表情图片转移到另一台电脑上

    把收藏的QQ表情从一台电脑转移到另一台电脑的操作步骤如下:    1.在有表情的电脑登陆QQ,随便打开一个聊天窗口,点击[表情],选择[表情设置],点击[导入导出表情包],选择[导出全部表情包]:   ...