一、创建服务

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学习笔记 - 创建服务(九)的更多相关文章

  1. Angular5学习笔记 - 创建组件(四)

    一.创建组件 ng generate component component-name #简写 ng g c component-name ng generate directive|pipe|ser ...

  2. Angular5学习笔记 - 创建、运行、发布项目(一)

    一.安装脚手架 npm install -g cnpm --registry=https://registry.npm.taobao.org #安装阿里镜像 npm install -g @angul ...

  3. uCOS-II的学习笔记(共九期)和例子(共六个)

    源:uCOS-II的学习笔记(共九期)和例子(共六个) 第一篇 :学习UCOS前的准备工作http://blog.sina.com.cn/s/blog_98ee3a930100w0eu.html 第二 ...

  4. 【Unity Shaders】学习笔记——SurfaceShader(九)Cubemap

    [Unity Shaders]学习笔记——SurfaceShader(九)Cubemap 如果你想从零开始学习Unity Shader,那么你可以看看本系列的文章入门,你只需要稍微有点编程的概念就可以 ...

  5. SpringCloud学习笔记:服务支撑组件

    SpringCloud学习笔记:服务支撑组件 服务支撑组件 在微服务的演进过程中,为了最大化利用微服务的优势,保障系统的高可用性,需要通过一些服务支撑组件来协助服务间有效的协作.各个服务支撑组件的原理 ...

  6. 【转】 Pro Android学习笔记(六九):HTTP服务(3):HTTP POST MultiPart

    目录(?)[-] 建立测试环境 开发环境导入第三方JAR HTTP Post Multipart小例子 HTTP POST不仅可以通过键值对传递参数,还可以携带更为复杂的参数,例如文件.HTTP Po ...

  7. Dynamic CRM 2013学习笔记(十九)自定义审批流1 - 效果演示

    CRM的项目,审批流是一个必须品.为了更方便灵活地使用.配置审批流,我们自定义了一整套审批流.首先来看下它的效果: 1. 审批模板 这是一个最简单的审批流,首先指定审批实体,及相关字段,再配置流程节点 ...

  8. Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  9. Apache OFBiz 学习笔记 之 服务引擎 二

    加载服务定义文件   ofbiz-component.xml:所有的服务定义文件在每个组件的ofbi-component.xml文件中   加载服务定义 例:framework/common/ofbi ...

随机推荐

  1. KVC和KVO的理解(底层实现原理)

    1.KVC,即是指 NSKeyValueCoding,一个非正式的Protocol,提供一种机制来间接访问对象的属性.而不是通过调用Setter.Getter方法访问.KVO 就是基于 KVC 实现的 ...

  2. VMware VIC

    vSphere Integrated Containers - a short intro High-Level view of VCH Networking vSphere Integrated C ...

  3. etcd 安装部署

    etcd 是coreos团队开发的分布式服务发现键值存储仓库. github地址: https://github.com/coreos/etcd 安装: 1.下载etcd最新版本 https://gi ...

  4. linux 虚拟机在线添加新磁盘

    在线添加磁盘,扩展LVM卷案例   一.添加硬盘,在线扫描出来 首先到虚拟机那里添加一块硬盘,注意必须是SCSI类型的硬盘. 扫描硬盘,不用重启操作系统的. echo "- - -" ...

  5. 8.14比赛j题 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=87813#overview

    就我个人来说我觉得这道题其实不用写题解,只是因为做的时候错了一次,如果不是队友细心,我根本会错下去,所以我感觉自己必须强大#include<stdio.h> #include<str ...

  6. Python安装setuptools时报Compression requires the (missing) zlib

    装机员为您提供Python安装setuptools时报Compression requires the (missing) zlib的文章咨询供您阅读,如何使用Python安装setuptools时报 ...

  7. UVA 11731 Ex-circles (外切圆)

    题意:给你三角形的三条边,求图中DEF的面积和阴影部分的面积. 题解:一些模板,三角形的旁切圆半径:.与 三旁心为 #include<set> #include<map> #i ...

  8. 在openstack环境中安装rackspace private cloud --1 环境准备

    在一个openstack环境中安装rackspace private cloud, 环境准备: 在good-net网络中创建3个虚拟机vm Network Detail: good-net Netwo ...

  9. devstack apache2/keystone 没有启动

    在devstack中./rejoin-stack.sh 发现apache2/keystone 没有启动 单单手动启动apach2服务之后keystone并没有启动 sudo service apach ...

  10. 防止php重复提交表单更安全的方法

    Token.php <?php /* * Created on 2013-3-25 * * To change the template for this generated file go t ...