angular4-http
导入 Http 模块
import { HttpModule } from '@angular/http'; @NgModule({
imports: [BrowserModule, FormsModule, HttpModule],
declarations: [AppComponent, UserComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http'; // (1)
import 'rxjs/add/operator/map'; // (2) interface Member {
id: string;
login: string;
avatar_url: string;
} @Component({
selector: 'sl-members',
template: `
<h3>Angular Orgs Members</h3>
<ul *ngIf="members">
<li *ngFor="let member of members;">
<p>
<img [src]="member.avatar_url" width="" height=""/>
ID:<span>{{member.id}}</span>
Name: <span>{{member.login}}</span>
</p>
</li>
</ul>
`
})
export class MembersComponent implements OnInit {
members: Member[]; constructor(private http: Http) { } // (3)使用 DI 方式注入 http 服务
ngOnInit() {
this.http.get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`) // (4)调用 http 服务的get()
方法,设置请求地址并发送 HTTP 请求
.map(res => res.json()) // (5)调用 Response 对象的json()
方法,把响应体转成 JSON 对象
.subscribe(data => {
if (data) this.members = data; // (6)把请求的结果,赋值给对应的属性
});
}
}
声明 MembersComponent 组件
import { MembersComponent } from './members.component'; @NgModule({
imports: [BrowserModule, FormsModule, HttpModule],
declarations: [AppComponent, UserComponent, MembersComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
使用 MembersComponent 组件
import { Component } from '@angular/core'; @Component({
selector: 'my-app',
template: `
<sl-members></sl-members>
`,
})
export class AppComponent {}
angular4-http的更多相关文章
- Angular4.0.0正式版发布
来源于angular4.0.0发布时的公告,译者:niithub 原文发布时间:Thursday, March 23, 2017 翻译时间:2017年3月24日 angular4.0.0正式版现在可以 ...
- Angular杂谈系列2-Angular2升级Angular4指南
什么什么?Angualr4都发布了,之前不都才Angualr2的么?又要推翻重来,啊? 那当然不是,Angualr4只是一个版本号而已,本质上还是Angular2:以后,谷歌把新版本的Angualr称 ...
- Ionic2 + Angular4 + JSSDK开发中的若干问题汇总
前景 目前微信公众号程序开发已经相当火热,客户要求自己的系统有一个公众号,已经是一个很常见的需要. 使用公众号可以很方便的便于项目干系人查看信息和进行互动,还可以很方便录入一些电脑端不便于录入的数据, ...
- angular4 JavaScript内存溢出问题 (FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory)
最近在写基于angular4的项目的时候,在build --prod的时候,突然措手不及的蹦出个报错,大致错误如下: 70% building modules 1345/1345 modules 0 ...
- angular2/angular4 如何通过$http的post方法请求下载二进制的Excel文件
时间有限,废话就不多说了,直接上干货! 下面给大家介绍一下我遇到的一个坑,如果你也遇到了,那恭喜你,你一定能找到答案:angular2/angular4 如何通过$http的post方法请求下载二进制 ...
- Angular4 后台管理系统搭建(2) - flexgrid 单元格模板 wjFlexGridCellTemplate 的坑
这几天中了很多坑,尤其是两个大坑.先是运行环境的坑,在是flexgrid单元格内部模板的坑.这里记录下. 一开始我遇见一些很奇怪的问题,按网上的说法,别人这么写代码都正常,就在我机器上不正常.按以前的 ...
- Angular4 后台管理系统搭建(1) - 建立一个通用的Wijmo5 flexgrid分页器组件
17年4月,开始学习angular2,到5月跟着升级到angular4.目前还在学习,搭建中.我的最终目的是用angular4框架搭建一个后台管理系统.这里使用了三个关键的外部库. 1.使用admin ...
- 在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序
前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1.1的地表最强IDE工具,越来越受.NET系的开发人员追捧. 随着Google Angular4的发布 ...
- Angular4.0学习笔记 从入门到实战打造在线竞拍网站学习笔记之二--路由
Angular4.0基础知识见上一篇博客 路由 简介 接下来学习路由的相关知识 本来是不准备写下去的,因为当时看视频学的时候感觉自己掌握的不错 ( 这是一个灰常不好的想法 ) ,过了一段时间才发现An ...
- Angular4.0从入门到实战打造在线竞拍网站学习笔记之三--依赖注入
Angular4.0基础知识之组件 Angular4.0基础知识之路由 依赖注入(Dependency Injection) 正常情况下,我们写的代码应该是这样子的: let product = ne ...
随机推荐
- Java Config for WebProject
1.Java EE vs Java SE They are just official SDK,when using IDE,it's ok to just install jdk/jre. &quo ...
- linux ----> centos 网络、tomcat、vi、等等的配置和使用
网络/配置 环境: centos6.8-mini-version virtualbox 工具: FileZilla client SecureCRT 静态ip地址 每一台计算机分配有一个固定的IP地 ...
- Tomcat基本组件、其功能和处理请求的过程
一.Tomcat是一个基于组件的服务器,它的构成组件都是可配置的,其中最外层的组件是Catalina Servlet容器,其他的组件按照一定的格式要求配置在这个顶层容器中 Tomcat的各个组件是 ...
- Mycat安装教程
1.下载: https://github.com/MyCATApache/Mycat-download 具体下载哪个版本以发布为准,推荐1.4,1.5. 2.安装: 安全前,在Linu ...
- LeetCode--383--赎金信
问题描述: 给定一个赎金信 (ransom) 字符串和一个杂志(magazine)字符串,判断第一个字符串ransom能不能由第二个字符串magazines里面的字符构成.如果可以构成,返回 true ...
- 微信小程序如何导入字体图标
前提:我们已经拥有了从阿里图标库下载下来的一系列的字体图标文件1:找个其中的ttf格式的文件,然后打开https://transfonter.org/网站2:点击Add fonts按钮,加载ttf格式 ...
- Confluence 6 如何让我的小组成员知道那些内容是重要的
如果你的 Confluence 中已经有了很多内容,定义那些内容是重要看起是一件艰巨的任务 —— 但是下面的一些特性能够帮助你的小组确定那些内容是他们应该关心的. 我的空间(My Spaces) 添加 ...
- hammer.js方法总结(只做了一个简单的demo)
html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 廖雪峰网站:学习python基础知识(一)
1. python能做什么? 可以做日常任务,比如自动备份你的MP3:可以做网站,很多著名的网站包括YouTube就是Python写的:可以做网络游戏的后台,很多在线游戏的后台都是Python开发的. ...
- python-day74--知识总体总结
1. 课程介绍 - 数据类型 - 函数 - 面向对象三大特性:继承,封装,多态 - socket:本质传输字节:所有网络通信都基于socket ...