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

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

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. mac bigsur 安装mysql步骤

    我首先下载的是mysql8.x,安装完后,在偏好设置里面,双击mysql图标,弹窗:未能载入偏好设置面板MySQL,重启无果,查攻略说是要安装5.7.x,在mysql官网上,下载5.7.29 强烈建议 ...

  2. linux 文件描述符和inode 的理解和区别

    inode 或i节点是指对文件的索引.如一个系统,所有文件是放在磁盘或flash上,就要编个目录来说明每个文件在什么地方,有什么属性,及大小等.就像书本的目录一样,便于查找和管理.这目录是操作系统需要 ...

  3. CSS学习笔记:定位属性position

    目录 一.定位属性简介 二.各属性值的具体功能 1. relative 2. absolute 3. fixed 三.三种定位属性的效果总结 参考资料:https://www.bilibili.com ...

  4. ant生成jmeter测试报告没有数据【已解决】

    1.如下图,在配置build时,到网上找配置文件,配置样式表文件名经常是jmeter-results-detail-report_21.xsl, 3.但是在其他版本可能被不是这个文件名,在jmeter ...

  5. silky微服务业务主机简介

    目录 主机的概念 通用主机 web主机 业务主机类型 使用web主机构建微服务应用 使用通用主机构建微服务应用 构建具有websocket能力的微服务应用 构建网关 开源地址 在线文档 主机的概念 s ...

  6. [cf1236F]Alice and the Cactus

    首先,我们要用到期望的一个性质: 对于两个随机变量$X$和$Y$(不需要相互独立),有$E(X+Y)=E(X)+E(Y)$ 另外,对于一个仙人掌,令$n$为点数,$m$为边数,$c$为简单环个数,$X ...

  7. mysql密码忘记如何恢复(windows/liunx版本:mysql-8.0.27)

    windows/liunx版本:mysql-8.0.27参考官网文档: https://dev.mysql.com/doc/refman/8.0/en/resetting-permissions.ht ...

  8. 将vue文档下载到本地预览

    1下载:https://github.com/vuejs/cn.vuejs.org   到本地 2. npm install npm start # 开发服务器地址为 http://localhost ...

  9. linux 同时执行多个命令及几个基础命令

    先后不同的命令用分号:隔开即可 基础命令: 1.cd 进入目录 /代表根目录,.代表当前目录,..代表上一级目录 2.ls 显示当前目录下的所有文件和文件夹 -F区分目录和文件,文件后边是*代表可执行 ...

  10. DotNetty实现WebSocket的简单使用

    工作中项目是物联网项目的,管理平台又是bs架构. 如果用 Socket 的话,Web 端还需要转发,就全部统一采用了 WebSocket . DotNet 平台上的 WebSocket 实现有很多种, ...