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

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

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. poj 1330 Nearest Common Ancestors (最简单的LCA)

    题意: 给出一棵树的结构. 给出两个点X和Y,求它俩的LCA. 思路: 只需求两个点的LCA,用了两种方法,一种离线tarjan,一种直接搞. 看代码. 代码: 方法一:直接搞. int const ...

  2. python3 调用 centos 常用系统命令

    一.创建目录 1 import os 2 3 base_path = '/data/sw_backup' 4 addr= 'FT' 5 ip='192.168.1.1' 6 path = base_p ...

  3. 13.G1垃圾收集器

    G1收集器是一款面向服务器的垃圾收集器,也是HotSpot在JVM上力推的垃圾收集器,并赋予取代CMS的使命.为什么对G1收集器给予如此高的期望呢?既然对G1收集器寄予了如此高的期望,那么他一定是有其 ...

  4. VSCode PHP 开发环境配置 详细教程

    VSCode PHP 开发环境配置 详细教程 这篇文章主要介绍了VScode+PHPstudy配置PHP开发环境的步骤,整理了官方以及优秀第三方的内容,对于学习和工作有一定借鉴意义. 配置过程 第一步 ...

  5. JMeter学习笔记--录制脚本(一)

    ---------------------------------------------------------------------------------------------------- ...

  6. 集合之Map接口

    Map接口概述 Map与Collection并列存在.用于存储具有映射关系的数据 : key-value Map 中的 key 和 value 都可以是任何引用类型的数据 Map 中的 key 用Se ...

  7. Linux usb 5. usbip (USB Over IP) 使用实例

    文章目录 0. 简介 1. Server 配置 2. Client 配置 参考资料 0. 简介 USB Over IP 是一种应用很多的场景,目前已经有现成的解决方案 usbip.linux 和 wi ...

  8. 环境(8)Linux用户组权限

    一:Linux时间日期-时间同步策略 1.日期与时间 ①时间命令 data:查看当前系统时间 cal :查看日历     cal  2020 修改时间:   date -s  11:11:11    ...

  9. Spark性能调优——9项基本原则

    原则一:避免创建重复的RDD 通常来说,我们在开发一个Spark作业时,首先是基于某个数据源(比如Hive表或HDFS文件)创建一个初始的RDD:接着对这个RDD执行某个算子操作,然后得到下一个RDD ...

  10. java 邮件 接收与发送

    ... package com.e6soft; import java.io.BufferedReader; import java.io.FileOutputStream; import java. ...