heroes之旅HeroesComponent目前正在获取并显示虚假数据。

在本教程重构之后,HeroesComponent将会精益求精并专注于支持视图。用模拟服务进行单元测试也会更容易。

为什么服务

组件不应该直接提取或保存数据,它们当然不应该故意提供假数据。

他们应该专注于呈现数据并将数据访问委托给服务。

您将创建一个HeroService所有应用程序类可用于获取heroes的方法。与其创建该服务new,您将依赖Angular 依赖注入 将其注入到HeroesComponent构造函数中。

服务是在彼此不认识的课堂之间共享信息的好方法。您将创建一个MessageService并将其注入两个位置:

  1. HeroService其使用这项服务来发送消息。
  2. MessagesComponent其中显示该消息。

创建 HeroService

使用Angular CLI创建一个名为的服务hero(在src目录下运行)

ng generate service hero

该命令将生成框架HeroService类 src/app/hero.service.ts 的HeroService类应该看起来像下面。

// src/app
import { Injectable } from '@angular/core'; @Injectable()
export class HeroService { constructor() { } }

@Injectable()服务

请注意,新服务导入了Angular Injectable符号并使用装饰器对类进行了注释。@Injectable()

该装饰告诉角度,这个服务可能本身注入了依赖。它现在没有依赖关系,但很快就会有。不管它是否存在,最好保留装饰器。@Injectable()

Angular 风格指南强烈建议保留它,而linter强制执行此规则。

获取heroes数据

HeroService可以从任何地方,web服务,本地存储,或者是模拟数据源获取数据的heroes。

从组件中删除数据访问意味着您可以在任何时候改变主意,而无需触及任何组件。他们不知道服务是如何运作的。

教程中的实现将继续提供模拟heroes

导入HeroHEROES

import { Hero } from './hero';
import { HEROES } from './mock-heroes';

添加一个getHeroes方法来返回模拟heroes

getHeroes(): Hero[] {
return HEROES;
}

提供HeroService

您必须提供HeroService依赖注入系统 前角可注射HeroesComponent,你会做以下

有几种方法可以提供HeroService:在HeroesComponent,在AppComponent,在AppModule。每个选项都有优点和缺点。

本教程选择在AppModule。中提供它。

这是一个非常流行的选择,你可以告诉CLI通过追加来自动提供它--module=app

ng generate service hero --module=app

但请注意,在你没有执行以下这条命令时,上面的命令是一步到位

ng generate service hero

如果执行了,那就请你去app.modules.ts里面的providers里面去手动添加了,否则会提示已存在的错误

providers: [
HeroService
],

Angular2.x-服务的更多相关文章

  1. 5、Angular2 Injectable 服务

    1.Injectable 

  2. angular2 问题请教

    angular2 通过http服务进行对后端api的远程调用? 我简单的尝试了一下,发现了几个问题,记录一下,以方便查找问题. angular2 http服务的跨域问题?跨域本身就是一个很复杂的问题, ...

  3. ASP.NET MVC和Web API中的Angular2 - 第1部分

    下载源码 - 903.5 KB 内容 第1部分:Visual Studio 2017中的Angular2设置,基本CRUD应用程序,第三方模态弹出控件 第2部分:使用Angular2管道进行过滤/搜索 ...

  4. angular2的依赖注入

    更好阅读体验,请看原文 在读这篇文章之前,你要先了解一下什么是依赖注入,网上关于这个的解释很多,大家可以自行Google. 我们这一篇文章还是以QuickStart项目为基础,从头开始讲解怎么在Ang ...

  5. ionic2 目录

    首先 ionic2 暂时找不到中文文档.本人英语又很渣.无奈之下只能依赖于百度翻译.完全是已自己理解的方式运作 ,可能里面会有一些偏差之类的 不过我都测试过代码是可以跑通的 只不过讲解的部分可能... ...

  6. angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用

    今天我们要讲的是ng2的路由系统. 例子

  7. angular2系列教程(八)In-memory web api、HTTP服务、依赖注入、Observable

    大家好,今天我们要讲是angular2的http功能模块,这个功能模块的代码不在angular2里面,需要我们另外引入: index.html <script src="lib/htt ...

  8. angular2^ typescript 将 文件和Json数据 合并发送到服务器(2.服务端)

    nodejs 中使用框架 express web框架 multer 文件接受 直接贴代码了,我就不解释了 "use strict"; exports.__esModule = tr ...

  9. angular2自学笔记(二)---路由、服务等八大主要构造块

    angular的思想:总是把数据访问工作委托给一个支持性服务类. Angular 应用的:用 Angular 扩展语法编写 HTML 模板, 用组件类管理这些模板,用服务添加应用逻辑, 用模块打包发布 ...

  10. Angular2快速入门-4.创建一个服务(创建NewsService提供数据)

    上篇我们使用的数据是通过mock-news.ts中的const News[] 数组直接赋给Component 组件的,这篇我们把提供数据的部分单独封装成服务 第一.创建news.service.ts ...

随机推荐

  1. largest rectangle in histogram leetcode

    Given n non-negative integers representing the histogram's bar height where the width of each bar is ...

  2. Needleman_Wunsch

    Needleman_Wunsch算法思路: 1.建立二维数组 2.建立评分模式 load1:向右:-2 load2:向下:-2 load3:对角线:依据是否配得到 匹配:+1 不匹配:-1 3.双层循 ...

  3. HTML中pre标签的用法

    我们经常会在要保持文本格式的时候使用pre标签,比如当我们要展示源代码的时候,只要放一个pre标签,然后把源代码直接复制,粘贴,然后在页面上就可以保持好格式.不会像放在其它标签里那样,把换行和空格都自 ...

  4. 2. 更改InnoDB redo日志文件的数量或大小

    2. 更改InnoDB redo日志文件的数量或大小 要更改InnoDB 重做日志文件的数量或大小,请执行以下步骤: 1)停止MySQL服务器,确保正常关闭且没有错误发生 2) 编辑my.cnf以更改 ...

  5. Mac 配置 php-fpm

    Mac 自带 php-fpm,在终端执行 php-fpm,会报如下错误: ERROR: failed to open configuration file '/private/etc/php-fpm. ...

  6. source not found

    Eclipse 调试 时, 无论在activity中哪一行打断点.调试时,都会跳转到activity源码中.报错 source not found : 解决办法: ->在调试的线程上 右键单击  ...

  7. POJ 1252 Euro Efficiency(最短路 完全背包)

    题意: 给定6个硬币的币值, 问组成1~100这些数最少要几个硬币, 比如给定1 2 5 10 20 50, 组成40 可以是 20 + 20, 也可以是 50 -10, 最少硬币是2个. 分析: 这 ...

  8. Nginx学习总结(5)——Nginx基本配置备忘

    Nginx 配置 在了解具体的Nginx配置项之前我们需要对于Nginx配置文件的构成有所概念,一般来说,Nginx配置文件会由如下几个部分构成: # 全局块 ... # events块 events ...

  9. PHPTaint-检测xss/sqli/shell注入的php扩展模块[转]

    web渗透者习惯采用黑盒或灰盒的方面来检测一款web应用是否存在漏洞,这种检测方法可以屏蔽不少漏洞,特别是程序逻辑中的漏洞.但如果能配合白盒的源码审计(也可以叫漏洞挖掘),效果将会更好,当然人力成本也 ...

  10. 大数据学习——linux常用命令(四)

    四 查到命令 1 查找可执行的命令所在的路径 which ls 查ls命令所在的路径 2 查找可执行的命令和帮助的位置 whereiis ls 3 从某个文件夹开始查找文件 find / -name ...