Angular5学习笔记 - 创建服务(九)
一、创建服务
ng generate service service-name #简写 ng g s component-name
ng g s services/userService
二、效果
三、开发服务
修改\src\app\services\user-service.service.ts文件
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise'; @Injectable()
export class UserServiceService {
private api = 'http://localhost:3003'; // 服务器地址
private gundamList = '/news'; // 获取全部
private getGundam = '/detail'; // 获取明细 constructor(private http: Http) { }
// 获得全部数据
getGundams(): Promise<any[]> {
return this.http.get(this.api + this.gundamList)
.toPromise()
.then(response => response.json())
.catch(this.handleError);
} // 根据Id查询高达
getGundamById(id: number): Promise<object> {
console.log(this.api + this.getGundam + '?id=' + id);
return this.http.get(this.api + this.getGundam + '?id=' + id)
.toPromise()
.then( response => response.json())
.catch(this.handleError);
} private handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}
}
四、全局注册服务
修改\src\app\app.module.ts文件
import {UserServiceService} from './services/user-service.service'; /* 注册服务 */
providers: [UserServiceService],
五、使用服务
修改\src\app\components\users\list\list.component.ts文件
import {Component, OnInit} from '@angular/core';
/*import { Http } from '@angular/http'; 添加Http请求模块 */
import {UserServiceService} from '../../../services/user-service.service';
import {
ActivatedRoute,
Params
} from '@angular/router'; @Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
/* 变量定义 */
data:object[] = [];/* 定义列表数据变量 */ /* 构造方法,做依赖注入 */
constructor(
// private _httpService: Http,
private route: ActivatedRoute,
private _userServiceService: UserServiceService
) { } /* 加载完事件,做初始化 */
ngOnInit() {
// this._httpService.get('http://localhost:3003/news').subscribe(values => {
// console.log(values);
// this.data = values.json();
// });
this._userServiceService.getGundams().then(gundams => this.data = gundams.slice(0, 3)); // 让主页只显示3个
} }
备注:
Error: ELOOP: too many symbolic links encountered……
ELOOP: too many symbolic links encountered, stat ……
六、运行效果,可正常请求到数据。
解决方案
删除node_modules文件夹, 重新npm install,不能用cnpm
Angular5学习笔记 - 创建服务(九)的更多相关文章
- Angular5学习笔记 - 创建组件(四)
一.创建组件 ng generate component component-name #简写 ng g c component-name ng generate directive|pipe|ser ...
- Angular5学习笔记 - 创建、运行、发布项目(一)
一.安装脚手架 npm install -g cnpm --registry=https://registry.npm.taobao.org #安装阿里镜像 npm install -g @angul ...
- uCOS-II的学习笔记(共九期)和例子(共六个)
源:uCOS-II的学习笔记(共九期)和例子(共六个) 第一篇 :学习UCOS前的准备工作http://blog.sina.com.cn/s/blog_98ee3a930100w0eu.html 第二 ...
- 【Unity Shaders】学习笔记——SurfaceShader(九)Cubemap
[Unity Shaders]学习笔记——SurfaceShader(九)Cubemap 如果你想从零开始学习Unity Shader,那么你可以看看本系列的文章入门,你只需要稍微有点编程的概念就可以 ...
- SpringCloud学习笔记:服务支撑组件
SpringCloud学习笔记:服务支撑组件 服务支撑组件 在微服务的演进过程中,为了最大化利用微服务的优势,保障系统的高可用性,需要通过一些服务支撑组件来协助服务间有效的协作.各个服务支撑组件的原理 ...
- 【转】 Pro Android学习笔记(六九):HTTP服务(3):HTTP POST MultiPart
目录(?)[-] 建立测试环境 开发环境导入第三方JAR HTTP Post Multipart小例子 HTTP POST不仅可以通过键值对传递参数,还可以携带更为复杂的参数,例如文件.HTTP Po ...
- Dynamic CRM 2013学习笔记(十九)自定义审批流1 - 效果演示
CRM的项目,审批流是一个必须品.为了更方便灵活地使用.配置审批流,我们自定义了一整套审批流.首先来看下它的效果: 1. 审批模板 这是一个最简单的审批流,首先指定审批实体,及相关字段,再配置流程节点 ...
- Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- Apache OFBiz 学习笔记 之 服务引擎 二
加载服务定义文件 ofbiz-component.xml:所有的服务定义文件在每个组件的ofbi-component.xml文件中 加载服务定义 例:framework/common/ofbi ...
随机推荐
- KVC和KVO的理解(底层实现原理)
1.KVC,即是指 NSKeyValueCoding,一个非正式的Protocol,提供一种机制来间接访问对象的属性.而不是通过调用Setter.Getter方法访问.KVO 就是基于 KVC 实现的 ...
- VMware VIC
vSphere Integrated Containers - a short intro High-Level view of VCH Networking vSphere Integrated C ...
- etcd 安装部署
etcd 是coreos团队开发的分布式服务发现键值存储仓库. github地址: https://github.com/coreos/etcd 安装: 1.下载etcd最新版本 https://gi ...
- linux 虚拟机在线添加新磁盘
在线添加磁盘,扩展LVM卷案例 一.添加硬盘,在线扫描出来 首先到虚拟机那里添加一块硬盘,注意必须是SCSI类型的硬盘. 扫描硬盘,不用重启操作系统的. echo "- - -" ...
- 8.14比赛j题 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=87813#overview
就我个人来说我觉得这道题其实不用写题解,只是因为做的时候错了一次,如果不是队友细心,我根本会错下去,所以我感觉自己必须强大#include<stdio.h> #include<str ...
- Python安装setuptools时报Compression requires the (missing) zlib
装机员为您提供Python安装setuptools时报Compression requires the (missing) zlib的文章咨询供您阅读,如何使用Python安装setuptools时报 ...
- UVA 11731 Ex-circles (外切圆)
题意:给你三角形的三条边,求图中DEF的面积和阴影部分的面积. 题解:一些模板,三角形的旁切圆半径:.与 三旁心为 #include<set> #include<map> #i ...
- 在openstack环境中安装rackspace private cloud --1 环境准备
在一个openstack环境中安装rackspace private cloud, 环境准备: 在good-net网络中创建3个虚拟机vm Network Detail: good-net Netwo ...
- devstack apache2/keystone 没有启动
在devstack中./rejoin-stack.sh 发现apache2/keystone 没有启动 单单手动启动apach2服务之后keystone并没有启动 sudo service apach ...
- 防止php重复提交表单更安全的方法
Token.php <?php /* * Created on 2013-3-25 * * To change the template for this generated file go t ...