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可以用来封装各独立职责
随机推荐
- analysis_screencap
#!/usr/bin/env pythonfrom PIL import Imageimg = Image.open("./screen.png")maps = [[] for i ...
- 国产新芯片连不上J-Link?芯海CS32L010系列芯片JLink配置方法
疫情以来芯片供货紧张,特别是ST的MCU一芯难求.所以很多产品不得不切换成国产.不过也是经过使用后才发现,很多国产芯片的性能还是挺好的.由于芯片比较新,官方J-Link还没有支持,所以调试和烧录有些不 ...
- 印象最深的一个bug——排查修复问题事件BEX引发的谷歌浏览器闪退崩溃异常
前言 最近,我们部门负责项目运维的小王频频接到甲方的反馈,运行的项目使用谷歌浏览器登录后,每次点击处理2秒后,浏览器自动闪退崩溃.小王同学折腾了一个星期,还没找到问题的原因.甲方客户都把问题反馈给项目 ...
- SQL注入之猫舍之sqlmap的使用
先说一下最常用的基础指令 -u 指定注入点(一般为url栏的网址) --dbs 跑库名 --tables 跑表名 --columns 跑字段名 --dump 枚举数据(高危指令,容易进去) -D 库名 ...
- Java日期API
JDK8之前日期时间API java.util.Date类 表示特定的瞬间,精确到毫秒 构造器: Date():使用无参构造器创建的对象可以获取本地当前时间. Date(long date) 常用方法 ...
- 好久没更新了,我回来了---Ajax
1.Ajax概念以及优势 * 什么是AJAX * AJAX(Asynchronous JavaScript And XML),(异步 JavaScript 和 XML),中文名:阿贾克斯.是指一种创建 ...
- 菜鸡的Java笔记 第三十五 接口定义增强
接口定义增强 在java从一开始到现在接口之中的核心组成部分:抽象方法与全局常量,但是随着技术的不断发展,用户在使用过程之中发现了有一些问题 如果说现在有一个接口经过了长年 ...
- 微信小程序(三)开发框架
基本构成: 数据绑定: 例: <!--index.hxml--> <view> <text data-name="{{theName}}">&l ...
- tomcat隐藏版本号
默认报错页面信息会暴露出版本号 进入tomcat的lib目录找到catalina.jar文件 unzip catalina.jar之后会多出两个文件夹 进入org/apache/catalina/ut ...
- [atARC070F]HonestOrUnkind
考虑当$a\le b$时,构造两种方案,满足诚实的人不交,接下来要求对于任意询问,这两种方案的答案都有可能相同 考虑询问$(i,j)$,若$i$在两种方案中有一种不诚实,那么总可以让答案相同,又因为诚 ...