官方认为组件不应该直接获取或保存数据, 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务。

而服务就充当着数据访问,逻辑处理的功能。把组件和服务区分开,以提高模块性和复用性。

1.依赖注入

  • 注入器是主要的机制。Angular 会在启动过程中为你创建全应用级注入器以及所需的其它注入器。你不用自己创建注入器。

  • 该注入器会创建依赖、维护一个容器来管理这些依赖,并尽可能复用它们。

  • 提供商是一个对象,用来告诉注入器应该如何获取或创建依赖。

2.服务提供商

我们使用命令ng g s servicename创建一个服务

  在新建的服务中我们可以看到@Injectable()装饰器,它把这个类标记为依赖注入系统的参与者之一。组件中如何使用服务呢,必须将服务依赖注入系统、组件或者模块,才能够使用服务。我们可以用注册提供商根注入器实现

该服务本身是 CLI 创建的一个类,并且加上了 @Injectable() 装饰器。默认情况下,该装饰器是用 providedIn 属性进行配置的,它会为该服务创建一个提供商。

  在这个例子中,providedIn: 'root' 指定 Angular 应该在根注入器中提供该服务,从而实现根注入器将服务注入,它就在整个应用程序中可用了

testService.ts

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root',
})
export class TestService {
}

也可以指定某个服务只有在特定的模块中提供,类似于一个业务模块中专属于这个模块的服务,只会应用于此模块中,我们就可以这么做。

import { Injectable } from '@angular/core';
import { TestModule } from './test.module'; @Injectable({
providedIn: TestModule,
})
export class TestService {
}

or

import { NgModule } from '@angular/core';
import { TestService } from './test.service'; @NgModule({
providers: [TestService],
})
export class TestModule {
}

也可以直接在某个组件中注入服务。

@Component({
/* . . . */
providers: [TestService]
})

3.服务的作用域

为什么一个服务而已,有多种注入的方法有什么区别吗,有。这就在于这个服务作用于哪里,用于限定服务使用的界限。当我们将某个服务根注入意味着在整个应用中都可以使用,注入于某个模块,只能应用于某个模块,注入于组件中,只应用于此组件。我们根据对服务的功能定义,来选择合适的注入方式,以提高性能。

4.单例服务

提供单例服务的方法:

  • 把 @Injectable() 的 providedIn 属性声明为 root

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root',
})
export class TestService {
}
  • 把该服务包含在 AppModule 或某个只会被 AppModule 导入的模块中。

@NgModule({
...
providers: [TestService],
...
})

......

Angular Service设计理念及使用的更多相关文章

  1. Angular Service入门

    1.Angular内置service Angular为了方便开发者开发,本身提供了非常多的内置服务.可以通过https://docs.angularjs.org/api/ng/service查看Ang ...

  2. angular service provider

    关于  angular service factory  provider 方面有很多,我也来写一篇加深下印象 provider 是一切方法的基础,所以功能也最强,provider 用来定义一个可以被 ...

  3. Angular service, 服务

      早上开车上班, 发现车快没油了, 于是拐进加油站. 有一辆出租车也在加油..   Angular service在一个应用里是以单例形式存在的. 这个单例的实例是由service factory( ...

  4. AngularJS学习之 ngTable 翻页 功能以及利用angular service准备测试数据

    1.官网链接  https://github.com/esvit/ng-table#4.0.0 2.安装ngTable后,一定要记得先注册到自己的项目 .module('pttengApp', [ ' ...

  5. angular service讲解

    controller是相对独立的,也就是说,两个controller之间,内存是不共享的,这个controller是无法访问其他其他controller的属性或者方法的; 以前,我都是通过localS ...

  6. angular service/directive

    <html class=" js cssanimations csstransitions" ng-app="phonecatApp" > < ...

  7. Angular service定义服务

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  8. [Angular] Service Worker Version Management

    If our PWA application has a new version including some fixes and new features. By default, when you ...

  9. Angular Service和Factory应用的区别

    Service可以用来将返回同类业务的多种返回值 Factory可以用来提供对同类业务的多个方法的调用 另外:Provider可以用来封装各独立职责

随机推荐

  1. hdu 5056 Boring count (类似单调队列的做法。。)

    给一个由小写字母构成的字符串S,问有多少个子串满足:在这个子串中每个字母的个数都不超过K. 数据范围: 1<=T<= 1001 <= the length of S <= 10 ...

  2. MongoDB 集群 config server 查询超时导致 mongos 集群写入失败

    环境 OS:CentOS 7.x DB:MongoDB 3.6.12 集群模式:mongod-shard1 *3 + mongod-shard2 *3 + mongod-conf-shard *3 + ...

  3. PyCharm Django Python 开发环境配置 详细教程

    PyCharm Django Python 开发环境配置 详细教程 1. Python 下载及安装 (1)根据需要的版本去 Python 官网(https://www.python.org/downl ...

  4. Oracle中对数字加汉字的排序

    需求:有一列NAME, varchar2类型,内容如下 以上就是已经按order by name进行排序的,但不是我们想要的结果 现在需要只按数字进行排序 第一步:抽取数字由于数字有是一位的有是两位的 ...

  5. [前端随笔][Vue] 多级菜单实现思路——组件嵌套

    说在前面 本篇记录学习了vue-element-admin中的多级菜单的实现 [传送门] @vue/cli 4.2.2:vuex:scss:组件嵌套 正文 创建项目 npm create 项目名 // ...

  6. 大爽Python入门教程 2-2 序列: 字符串、元组与列表

    大爽Python入门公开课教案 点击查看教程总目录 序列 序列(sequence): 顾名思义,有序的排列. 有序排列的一串数据. 一种容器,容器内成员有序排列. python的字符串str,元组tu ...

  7. python递归三战:Sierpinski Triangle、Tower of Hanoi、Maze Exploring

    本文已做成视频教程投稿b站(视频版相对文本版有一些改进),点击观看视频教程 本文主要通过三个实例来帮助大家理解递归(其展示动画已上传B站): 谢尔宾斯基三角形(Sierpinski Triangle) ...

  8. [hdu7099]Just Another Data Structure Problem

    不难发现,问题即求满足以下条件的$(i,j)$对数: 1.$1\le i<j\le n$且$a_{i}=a_{j}$ 2.$\min_{i\le k\le j}y_{k}\ge l$且$\max ...

  9. [loj2586]选圆圈

    下面先给出比较简单的KD树的做法-- 根据圆心建一棵KD树,然后模拟题目的过程,考虑搜索一个圆 剪枝:如果当前圆[与包含该子树内所有圆的最小矩形]都不相交就退出 然而这样的理论复杂度是$o(n^2)$ ...

  10. [luogu4747]Intrinsic Interval

    有一个结论,答案一定是所有包含其合法区间中$l$最大且$r$最小的 证明比较容易,考虑两个合法区间有交,那么交必然合法,同时交也必然包含该区间,因此这个区间一定是合法的(取$l$最大的和$r$最小的两 ...