angular 服务随记小结

2024-04-10 19:32:15

依赖注入

创建服务需要用到Injectable，@Injectable() 装饰器把类标记为可供注入的服务，不过在使用该服务的 provider 配置好 Angular 的依赖注入器之前，Angular 实际上无法将其注入到任何位置。

provider告诉注入器如何创建该服务，可以通过设置元数据来配置注入器（3种方式）：

在服务本身的 @Injectable() 装饰器中。
在 NgModule 的 @NgModule() 装饰器中。
在组件的 @Component() 装饰器中。

@Injectable() 装饰器具有一个名叫 providedIn 的元数据选项，在这里指定把被装饰类的provider放到 root 注入器中，或某个特定 NgModule 的注入器中。

@NgModule() 和 @Component() 装饰器都有用一个 providers 元数据选项，在那里你可以配置 NgModule 级或组件级的注入器。

注入器与服务实例

在某个注入器范围内，服务是单例的。应用只有一个根注入器，angular具有多级注入器系统，以为者下级注入器可以创建自己的服务实例。

每当 Angular 创建一个在 @Component() 中指定了 providers 的组件实例时，它也会为该实例创建一个新的子注入器。类似的，当在运行期间加载一个新的 NgModule 时（即lazy module），Angular 也可以为它创建一个拥有自己的提供商的注入器。

借助注入器继承机制，仍然可以把全应用级的服务注入到这些组件中。组件的注入器是其父组件注入器的子节点，也是其父节点的父节点的后代，以此类推，直到应用的根注入器为止。 Angular 可以注入该继承谱系中任何一个注入器提供的服务。

模块化编程时，service、component、pipe等最好都放在module中，需要引入这些服务时，通过导入module来引用，不要直接import service 和component，这不符合模块化思想。

多级注入系统

应用程序中有一个与组件树平行的注入器树，对于在什么级别上注入会最终导致：

最终包的大小
服务的范围
服务的生命周期

当在服务自身的@Injectable()装饰器中指定provider时，CLI生产模式所用的优化工具可以进行摇树优化，它会移除那些没有用过的服务，摇树优化生成的包更小。

三级provider

root级，是AppModule全局的，配置方法已提。
NgModule级，两种方法：可以在module的@NgModule 的 provider 元数据中指定；也可以在@injectable() 的providerIn选项中指定某个模块类

如果模块是lazy modole，需要使用@NgModule的provider选项。

组件级为每个component实例配置自己的注入器

无论对于根级注入器还是模块级注入器，服务实例的生存期都和应用或模块本身相同。Angular 可以把这个服务实例注入到任何需要它的类中(即app内是单例的)。Angular 只能把相应的服务注入到该组件实例或其下级组件实例中，而不能把这个服务实例注入到其它地方(即组件内并不是单例的)。

注入器冒泡

当一个组件申请获得一个依赖时，Angular 先尝试用该组件自己的注入器来满足它。如果该组件的注入器没有找到对应的提供商，它就把这个申请转给它父组件的注入器来处理。如果那个注入器也无法满足这个申请，它就继续转给它在注入器树中的父注入器。这个申请继续往上冒泡 —— 直到 Angular 找到一个能处理此申请的注入器或者超出了组件树中的祖先位置为止。如果超出了组件树中的祖先还未找到，Angular 就会抛出一个错误。

单例服务

在angular中创建单例服务有两种方式：

在创建服务时声明该服务在应用的根上提供
把该服务包含在AppModule或者某个只会被AppModule导入的模块中

这里第一条很容易理解。重点第二条：当通过@NgMododule()来声明一个serivce时，这个服务在AppModule内将会是单例的，当一个module中提供了一个service，当另一个lazy module导入了这个模块时，angular会为它创一个子注入器，会重新创建service的实例，此service也就多了一个实例。

forRoot()

如果某个模块同时提供了服务提供商和可声明对象（组件、指令、管道），那么当在某个子注入器中加载它的时候（比如lazy module），就会生成多个该服务提供商的实例。而存在多个实例会导致一些问题，因为这些实例会屏蔽掉根注入器中该服务提供商的实例，而它的本意可能是作为单例对象使用的。因此，Angular 提供了一种方式来把服务提供商从该模块中分离出来，以便该模块既可以带着 providers 被根模块导入，也可以不带 providers 被子模块导入。

如上文所述，当在运行期间加载一个新的 NgModule 时（即lazy module），Angular 也可以为它创建一个注入器，所以此时导入的其他模块中的service就生成了多个实例，而forRoot可以保证并不创建新的service实例，而是去引用root注入器中的service实例，也就保证了service依然是个单例服务。

Code

在懒加载模块中导入有service的TestDIModule模块

@NgModule({
 imports: [
 CommonModule,
 BatteryRoutingModule,
 TestDIModule
 ],
 declarations: [BatteryWidgetComponent, BatteryTwoComponent,
 DemoComponent]
})

在TestDIModule模块中

@NgModule({
 imports: [
 CommonModule
 ],
 declarations: [TestDiComponent],
 exports: [TestDiComponent],
 providers: [ ]
})
export class TestDIModule {
 static forRoot(): ModuleWithProviders {
 return {
  ngModule: TestDIModule,
  providers: [
  TestDiService
  ]
 };
 }
 }

在根模块中引入TestDIModule模块

imports: [
 BrowserModule,
 TestDIModule.forRoot(),
 ],

最后在根模块路由中添加这个懒加载模块

const routes: Routes = [
 { path: 'battery', loadChildren: './battery-widget/battery.widget.module#BatteryWidgetModule' },
];

@NgModule({
 exports: [ RouterModule ],
 imports: [ RouterModule.forRoot(routes)
 ],
})

作为测试，可以在TestDIModule中的service中打log看一下

import { Injectable, ModuleWithProviders } from '@angular/core';
import { TestDIModule } from './test-di.module'

@Injectable()
export class TestDiService {

 constructor() {
 console.log('->TestDiService');
 }

 addCoount() {
 this.count++;
 console.log('->count', this.count);
 }

 count = 0;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

在 Angular6 中使用 HTTP 请求服务端数据的步骤详解

第一步准备好api接口地址, 例如 https://api.example.com/api/ 第二步在根组件 app.components.ts 中引入 HttpClientModule 模块. // app.components.ts import {HttpClientModule} from "@angular/common/http"; //引入HttpClientModule 模块 imports: [ BrowserModule, AppRoutingModule, H
Angularjs 自定义服务的三种方式(推荐)

AngularJS简介: AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications). AngularJS 学习起来非常简单. angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$provide var starterApp = angular.module('
AngularJS服务service用法总结

本文实例总结了AngularJS服务service用法.分享给大家供大家参考,具体如下: 引言最近在项目中用到了关于AngularJS中的服务相关的知识,在起初学习这个东西的时候就了解到这个东西在项目中是经常被用到的,在angular中也是比较重要的一块,所以今天小编就总结一些关于service的知识. 认识Service 关于service我们一点都不陌生,不论实在c#中还是Java中我们经常会遇到service的概念,其实service的作用就是对外提供某种特定的功能,也就是我们经常说的"
浅谈Angular6的服务和依赖注入

在开发中,组件一般用来写视图有关的功能,服务则写一些其他的逻辑,诸如从服务器获取数据.验证用户输入或直接往控制台中写日志等工作. 先解释两个概念: Providers(提供商):是个比较抽象的名词,我们把它想象为'图纸'更好理解一些,就比如我们想要生产汽车,就需要先有汽车的图纸,图纸上记录了生产工艺和材料尺寸之类,这样汽车才生产的出来.provider通常就是自己写的服务类. Injector(注入器):就是字面上的意思,将某一类事物注入到另一类事物中的工具.angular应用在启动时,会自动创
基于angular2 的 http服务封装的实例代码

最近在项目中折腾了下angular2,所以出来跟大家分享,希望有帮助,每个公司业务不一样,按实际情况而定,个人学习心得,不作为标准. 1.定义http-interceptor.service.ts服务,统一处理http请求 /** * name:http服务 * describe:对http请求做统一处理 * author:Angular那些事 * date:2017/6/3 * time:11:29 */ import {Injectable} from '@angular/core'; im
AngularJS 服务详细讲解及示例代码

AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的任务.这也使得他们即维护和测试的单独实体.控制器,过滤器可以调用它们作为需求的基础.服务使用AngularJS的依赖注入机制注入正常. AngularJS提供例如许多内在的服务,如:$http, $route, $window, $location等.每个服务负责例如一个特定的任务,$http是用来创建AJAX调用,以获得服务器的数据. $route用来定义路由信息等.内置
深入理解Angularjs中的$resource服务

一.$resource服务介绍 $http服务提供的实现极为简单和低级,可以用来发送XHR请求,同时它还为你提供了很大的可控性和灵活性.但是,在大多数情况下,我们需要处理对象,以及封装了特定属性和方法的对象模型,例如一个person对象(带有详细信息),或者一个信用卡对象. $resource就是为这一功能而设计的.AngularJS中的resource(资源)允许我们用描述性的方式来定义对象模型,它可以描述以下内容: 资源在服务端的URL. 常用的请求参数类型. 一些附加的方法(你可以自动获得
angular 服务随记小结

依赖注入创建服务需要用到Injectable,@Injectable() 装饰器把类标记为可供注入的服务,不过在使用该服务的 provider 配置好 Angular 的依赖注入器之前,Angular 实际上无法将其注入到任何位置. provider告诉注入器如何创建该服务,可以通过设置元数据来配置注入器(3种方式): 在服务本身的 @Injectable() 装饰器中. 在 NgModule 的 @NgModule() 装饰器中. 在组件的 @Component() 装饰器中. @Injec
window下注册服务的命令小结

1. 描述: SC 是用于与服务控制管理器通信的命令行程序 . 用法: sc <server> [command] [service name] <option1> <option2>... 选项 <server> 的格式为可以键入 "sc [command]"以获得命令的进一步帮助命令: query---------------查询服务的状态,或枚举服务类型的状态. queryex--------
angular 服务的单例模式(依赖注入模式下)详解

angular官方文档单例服务的说明单例模式就不要说了,懂点设计模式的都懂得,真有不明白的自行百度. (解释下angular的命名,angular就是angular2+,angular1叫angularjs,至于angular2,3,4,5,6只是angular的版本,通称angular,希望小伙伴不要叫错了) 单例模式如何在angular的服务中使用呢,angular的官方文档中有这么一段话: 单例服务服务在每个注入器的范围内是单例的. 在任何一个注入器中,最多只会有同一个服务的一个实例.
Angular服务Request异步请求的实例讲解

首先这里我简单写个例子来方便您的理解 var request = { post: function() { var errorCallback = { error: function(f) { this.fun = f; }, fun: function(data) {} }; successCallback = { success: function(f) { return this.fun = f, console.log(this.fun), errorCallback; }, fun:
vmware导入ova文件踩坑记小结

问题来源众所周知,所有的网络行为都会产生相应的网络流量,那么所有的网络攻击行为也有其对应的流量特点,那么是否能根据流量特点进而分析出其对应的是什么攻击行为呢? 我在虚拟机上使用vulnhub的靶场环境进行模拟攻击,然乎使用wireshark进行抓包分析流量. 问题出现因为vulnhub的环境是ova文件的虚拟机,是需要使用virtualbox打开的,但是我没有用过vbox,想着把他导入vmware中进行测试,很快遇到了第一个问题:当我把ova文件导入vmware时报错了,错误如下: 我尝试放
使用PowerShell操作Windows服务的命令小结

PowerShell在处理Windows服务方面,提供了强大的功能,很多方便.强大的cmdlet等着你去光顾. Get-Service,别名gsv,获取服务对象. 举例:gsv eventlog 或 $evtlog = gsv eventlog Start-Service,启动服务. Stop-Service,停止服务. Restart-Service,重启服务. Suspend-Service,挂起/暂停服务. Resume-Service,继续服务. Set-Service,设置服务的属性.
实战模拟监控MySQL服务shell脚本小结

1)端口判断法==>仅适合数据库本地使用法1:if条件判断方法 [root@oldboy scripts]# cat check_db01.sh #!/bin/sh #created by oldboy #mail:oldboy521@gmail.com PortNum=`netstat -lnt|grep 3306|wc -l` if [ $PortNum -eq 1 ] then echo "mysqld is running." else echo "mysql
SQL Server SQL Agent服务使用教程小结

1.在查询分析器理启动或停止SQL Agent服务启动 use master go xp_cmdshell 'net start SQLSERVERAGENT' 停止 use master go xp_cmdshell 'net stop SQLSERVERAGENT' 将服务的启动从手工方式改为自动启动方式 exec xp_cmdshell 'scm -Action 7 -Service mssqlserver -SvcStartType 2' 直接用命令行执行引号内的内容也可以. 2.启动
ubuntu配置tftp服务的步骤小结

若/etc/xinetd.d/下存在 tftp,执行下列操作关闭 xinetd服务 $sudo service xinetdstop 删除 tftp文件 $sudo rm /etc/xinetd.d/tftp 启动 xinetd 服务 $sudo service xinetdstart 安装 tftp 客户端和服务器端 $sudo apt-getinstall tftp-hpa $sudo apt-getinstall tftpd-hpa 修改 tftpd-hpa 配置文件 $vim /etc
Angular 4依赖注入学习教程之组件服务注入（二）

学习目录 Angular 4 依赖注入教程之一依赖注入简介 Angular 4 依赖注入教程之二组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

angular 服务随记小结

相关推荐

随机推荐