Angular Service设计理念及使用
官方认为组件不应该直接获取或保存数据, 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务。
而服务就充当着数据访问,逻辑处理的功能。把组件和服务区分开,以提高模块性和复用性。
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设计理念及使用的更多相关文章
- Angular Service入门
1.Angular内置service Angular为了方便开发者开发,本身提供了非常多的内置服务.可以通过https://docs.angularjs.org/api/ng/service查看Ang ...
- angular service provider
关于 angular service factory provider 方面有很多,我也来写一篇加深下印象 provider 是一切方法的基础,所以功能也最强,provider 用来定义一个可以被 ...
- Angular service, 服务
早上开车上班, 发现车快没油了, 于是拐进加油站. 有一辆出租车也在加油.. Angular service在一个应用里是以单例形式存在的. 这个单例的实例是由service factory( ...
- AngularJS学习之 ngTable 翻页 功能以及利用angular service准备测试数据
1.官网链接 https://github.com/esvit/ng-table#4.0.0 2.安装ngTable后,一定要记得先注册到自己的项目 .module('pttengApp', [ ' ...
- angular service讲解
controller是相对独立的,也就是说,两个controller之间,内存是不共享的,这个controller是无法访问其他其他controller的属性或者方法的; 以前,我都是通过localS ...
- angular service/directive
<html class=" js cssanimations csstransitions" ng-app="phonecatApp" > < ...
- Angular service定义服务
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
- [Angular] Service Worker Version Management
If our PWA application has a new version including some fixes and new features. By default, when you ...
- Angular Service和Factory应用的区别
Service可以用来将返回同类业务的多种返回值 Factory可以用来提供对同类业务的多个方法的调用 另外:Provider可以用来封装各独立职责
随机推荐
- CANN5.0黑科技解密 | 别眨眼!缩小隧道,让你的AI模型“身轻如燕”!
摘要:CANN作为释放昇腾硬件算力的关键平台,通过深耕先进的模型压缩技术,聚力打造AMCT模型压缩工具,在保证模型精度前提下,不遗余力地降低模型的存储空间和计算量. 随着深度学习的发展,推理模型巨大的 ...
- Kioskcached(1)之 Memcached & Redis & Kioskcached 性能测试对比
前言:本文仅仅是作者自己在学习过程中的一次实验而已,或许因为各种因素会导致实验结果与你之前的认知不太一样,因此请你带着批判的眼光看待本文(本文不具有实际环境的参考性). 一:测试目的 在了解了一些No ...
- linux&c 进程控制 课后习题
(声明:本篇博客只是博主自己的理解,加以整理,目的是总结刚学过的进程知识,不一定绝对正确,非常愿意听客官您提出宝贵意见.) Q1:进程中的全局数据段(全局变量),局部数据段(局部变量),静态数据段的分 ...
- 剑指 Offer 20. 表示数值的字符串
方法:分为几个部分判断 DA[.B][E/eC] D 其中D表示前后的空格,需要处理,跳过即可 A可以带正负号 有符号数 B无符号数 C可以为有符号数(带+-号) 小数点.后面必须是无符号数或者没有 ...
- 数据库炸了----我就重启了一下啊(Communications link failure)
重启数据库后,数据库大部分时间连不上了:连续请求不会报错,请求间隔时间稍微长一点就会报错报错如图: com.mysql.cj.jdbc.exceptions.CommunicationsExcepti ...
- 【Git 系列】一个超好用的命令你会用吗?
stash在英文意思是隐藏.git stash 的作用也是隐藏没完成的代码,防止它干扰别人或者新分支的工作. 一.背景 1.1 我们经常会遇到这样的情况 正在 dev 分支开发新功能,做到一半时有人过 ...
- (一)初识MySQL
JavaEE:企业级Java开发 Web 前端(页面:展示,数据) 后台(连接点,连接数据库JDBC,链接前端(控制,控制视图跳转和给前端传递数据)) 数据库(存数据,Txt,Excel,word) ...
- Qt概要
Qt是面向对象的框架,使用特殊的代码生成扩展以及一些宏.是一个跨平台的C++图形用户界面.它是一款可以轻松的帮我们做界面的软件. Qt是1991年奇趣科技公司(2008 年 6 月被诺基亚收购)开发的 ...
- 在linux 环境下 安装php
最近打算学写一个php 脚本~ 到了虚拟机环境上发现~没有环境. 只有老老实实去装一个php环境咯. 第一步 去官网下一个包 记得一定要下载tgz格式的 第二步~当然是传上虚拟机上咯~任意目录都可以. ...
- JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?
1.innerHTML 属性 (参考自<JavaScript高级程序设计>294页) 在读模式下,innerHTML 属性返回与调用元素的所有子节点(包括元素.注释和文本节点)对应的 HT ...