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 onlyreturn 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学习笔记 - 创建服务相关推荐

Linux学习笔记文件服务Vsftp详细介绍
Linux学习笔记文件服务Vsftp详细介绍知识点: 1.FTP使用TCP连接和TCP端口 2.在进行通信时,FTP需要建立两个TCP连接: 一个用于控制信息,TCP端口号缺省为21 一个用于数据 ...
Dubbo -- 系统学习笔记 -- 示例 -- 服务分组
Dubbo -- 系统学习笔记 -- 目录示例想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式服务分组当一个接口有多种实现时,可以用group区分. <dubbo:se ...
golang游戏开发学习笔记-创建一个能自由探索的3D世界
此文写在golang游戏开发学习笔记-用golang画一个随时间变化颜色的正方形之后,感兴趣可以先去那篇文章了解一些基础知识,在这篇文章里,我们将创建一个非常简单(只有三个方块)但能自由探索的的3D世 ...
android学习笔记---42_服务的生命周期
42_服务的生命周期 ------------------------- 与采用Context.startService()方法启动服务有关的生命周期方法 onCreate() onStart() ...
学习笔记---Web服务、Remoting、WCF （上） --- Web服务
自从程序设计诞生起, 如何最大限度的重用代码, 减小编码的重复劳动就是程序员永恒不变的课题. 我们从学习面向对象开始, 先后引入了很多种共享代码的手段, 随着学习的不断深入就越发觉得程序设计的发展过程 ...
ros学习笔记_服务通讯
学习地址 0.话题通讯理论模型前言: 话题通信基本操作(C++) 注:启动roscore的时候rosmaster已经启动了,因此ROS master 不需要实现,而连接的建立也已经被封装了(因此连接 ...
EntityFramework Core 学习笔记 —— 创建模型
原文地址:https://docs.efproject.net/en/latest/modeling/index.html 前言: EntityFramework 使用一系列的约定来从我们的实体类细节 ...
4、Angular JS 学习笔记 – 创建自定义指令 [翻译中]
2019独角兽企业重金招聘Python工程师标准>>> 创建自定义指令注意:本指南是针对已经熟悉AngularJS基础的开发者.如果您只是想要开始,建议您先去看教程.如果你在寻找指 ...
SpringCloud学习笔记(十)----服务熔断与限流 Sentinel
SpringCloud Alibaba Sentinel实现熔断与限流 Sentinel概述随着微服务的流行,服务和服务之间的稳定性变得越来越重要.Sentinel 是面向分布式服务架构的流量控制组 ...

Angular5学习笔记 - 创建服务

Angular5学习笔记 - 创建服务相关推荐

最新文章

热门文章