理解 Angular 服务

本文写于 2021 年 3 月 29 日

什么是服务

angular 的最佳实践推荐业务逻辑要尽量分门别类的抽离为一个个的 Service。

那么到底什么是 Service 呢?

service 意为服务,是一个广义的概念。

例如:饭馆提供的是吃饭服务、澡堂提供的是洗澡服务、学校提供的是授课服务……

那么对于写代码来说,服务是什么呢?

服务一般会包括值/状态、函数或各种特性,在 Angular 中,我们使用一个 class 来包裹这些。

但实际上,服务可以不是一个类,例如 React 的 context,通过闭包得到的返回值也可以是一个服务。

归根结底,可以这么总结:把一系列高度聚合的代码放到一起,就是一个服务

对于前端来说,操心的事情其实有两件:

  1. 用户体验(动画、跳转、样式……)
  2. 业务逻辑与状态管理

Angular 推荐我们将第二点放到服务中来完成,从而令组件可以专心的负责用户体验。

比如从服务器获取数据、验证用户输入、日志……都应该放在服务,而不是特定的组件中。

当我们将这些委托给了各种可注入的服务之后,就可以将其注入到各个组件或者其他服务中进行调用。让你的代码更具适应性。

在 Angular 中,服务通常是一个单例。

服务写法

代码来自 Angular 官方文档,有删改

// 省略 @Injectable 代码
export class Logger {
log(msg: any) {
console.log(msg);
} error(msg: any) {
console.error(msg);
} warn(msg: any) {
console.warn(msg);
}
}

在 ng 组件或是 service 的构造函数中注入服务(框架会帮我们自动完成)后即可在其他方法中调用。

// 省略 @Injectable 代码
export class HeroService {
constructor(private logger: Logger) {} getHeroes() {
this.getXXXXData().then((res: any) => {
this.logger.log(`Fetched data: ${res}`);
});
}
}

原理简述

当 Angular 创建组件类的新实例时,框架会查看该组件类的 constructor,得到该组件依赖哪些服务或其它依赖项。

如果发现了某个组件依赖某个服务,框架会首先检查注入器中是否已经有了那个服务的实例。如果存在,直接返回;如果不存在,注入器就会使用以前注册的服务提供者来创造一个,并把它加入注入器中,最后把该服务返回。

提供服务

服务需要「提供」,才能使用。

1. 在服务中注册

@Injectable({
providedIn: "root",
})
export class SomeService {}

默认情况下,服务会提供给 root,也就是根。这样该服务就可以在任何 module 的组件进行注入。

这种在 @Injectable 元数据中注册提供者的方式还让 Angular 能够通过移除那些从未被用过的服务来优化大小。

2. 在 module 中注册

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

你也可以提供给单独的 module,让 service 只能在该 module 使用。

3. 在组件中注册

@Component({
selector: 'app-hero-list',
templateUrl: './hero-list.component.html',
providers: [ SomeService ]
})

当你在组件级注册提供者时,你会为该组件的每一个新实例提供该服务的一个新实例!!!

所以不推荐这么做。

该在哪里注入服务

Angular 使得我们可以在任何的组件中注入服务,这会使得我们“滥用”注入。

这里我们借用一些 react-redux 中的概念——展示组件和容器组件。

在展示组件中,应该只负责定义自己需要的状态、方法,具体的依赖于外层传入。

在容器组件中,才可以注入服务进行操作。

这样能有效的降低组件对于特定服务的依赖。

(完)

理解 Angular 服务的更多相关文章

  1. (七)理解angular中的module和injector,即依赖注入

    (七)理解angular中的module和injector,即依赖注入 时间:2014-10-10 01:16:54      阅读:63060      评论:1      收藏:0      [点 ...

  2. 理解angular中的module和injector,即依赖注入

    理解angular中的module和injector,即依赖注入 依赖注入(DI)的好处不再赘言,使用过spring框架的都知道.angularjs作为前台js框架,也提供了对DI的支持,这是java ...

  3. angular服务二

    angular服务 $http 实现客户端与服务器端异步请求 get方式 test.html <!DOCTYPE html> <html lang="en"> ...

  4. angular服务一

    angular服务 [$apply()] jquery内数据绑定 要用$apply(),不然不能在js内通过angular绑定数据 <!DOCTYPE html> <html lan ...

  5. angular 服务 service factory provider constant value

    angular服务 服务是对公共代码的抽象,由于依赖注入的要求,服务都是单例的,这样我们才能到处注入它们,而不用去管理它们的生命周期. angular的服务有以下几种类型: 常量(Constant): ...

  6. 第217天:深入理解Angular双向数据绑定的原理

    一.理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理.angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成. 那么什么是双向绑定,下面 ...

  7. Java生鲜电商平台-深入理解微服务SpringCloud各个组件的关联与架构

    Java生鲜电商平台-深入理解微服务SpringCloud各个组件的关联与架构 概述 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大多数讲解还停留 ...

  8. 理解Angular中的$apply()以及$digest()

    $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...

  9. 深入理解Angular中的$Apply()以及$Digest()

    $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...

随机推荐

  1. yum下载安装git服务

    yum install git 安装成功后,配置 用户 邮箱信息 注: youxiu326 github账号名称 youxiu326@163.com    github账号对应邮箱 git confi ...

  2. C# 正则表达式判断是否是有效的文件、文件夹路径

    C# 正则表达式判断是否是有效的文件.文件夹路径 省流 /// <summary> /// 是否有效的文件,文件夹路径 /// </summary> /// <param ...

  3. 顺利通过EMC实验(19)

  4. 顺利通过EMC试验(2)

    限制值 电磁波照射,静电放电敏感性

  5. vue入门文章

    本来想自己写一篇关于vue入门的文章.但是看到链接的文章后,觉得写得太详细了,实在有保存下来的必要.后面可能在这篇文章基础上,有所内容的增加. CSS预处理器 定义了一种新的专门的编程语言,编译后成正 ...

  6. 王下邀月熊_Chevalier的前端每周清单系列文章索引

    感谢 王下邀月熊_Chevalier 分享的前端每周清单,为方便大家阅读,特整理一份索引. 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列,并以年/月为单位进行分类,具 ...

  7. EMS邮箱数据库全局监控设置

    案例任务:监控TestDB01邮箱数据库的所有邮件,监控邮箱为用户"王淑江"的邮箱. 1.EMS全局监控设置 使用PowerShell完成操作:"王淑江"监控T ...

  8. Conda 配置 Python 环境

    目录 前言 一.Conda 是什么 二.如何获取 三.使用 Conda 命令配置多环境 1.创建新环境 2.激活新环境 3.配置新环境 4.退出新环境 5.检查所有环境 6.检查所有安装的包 7.删除 ...

  9. 【版本2020.03】使用idea导入maven项目

    心得1:不同版本的idea,一些选项的名称稍微有点不同,比如以前导入项目的选项名称都是import Project,但是我使用的版本是2020.03 导入项目的名称是 import Settings ...

  10. linux3种安装软件、yum仓库、防火墙、乱码

    Linux中安装软件的三种方式 1.哪三种方式? rpm安装 yum安装 源代码编译安装 2.区别 rpm安装类似于windows中的安装包,下载下来之后直接安装.缺点是不能自己解决依赖. yum安装 ...