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

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

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. P1231 教辅的组成(最大流)

    P1231 教辅的组成 这个题一看便知是网络流量,(三分图??滑稽..) 就一个小细节,如果我们仅仅将所有的点分成三部分跑网络流的话会有点小问题.. 因为这可能导致一本书被重复利用,就是有两条流经过同 ...

  2. docker+nginx搭建tomcat集群(附录)——nginx.conf文件

    附录:nginx.conf修改后的文件内容 user root;worker_processes 2; #error_log logs/error.log;#error_log logs/error. ...

  3. Docker配置tomcat端口映射后无法访问(404)

    1.配置tomcat端口映射 2.访问测试 3.修改webapps文件,webapps.dist是所需文件 4.虚拟机中重新访问 5.在主机也能访问成功(注意路径为虚拟机IP,不是localhost)

  4. elasitcsearch单机版安装

    1.下载压缩包 https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.6.2.tar.gz 2.解压修改配置文件 c ...

  5. newInstance方法

    1.new 是java中的关键字,是创建一个新对象的关键字.用new这个关键字的话,是调用new指令创建一个对象,然后调用构造方法来初始化这个对象,如果反编译class的话,会看到一个Object o ...

  6. UDP端口检查告警SHELL脚本(企业微信版机器人版)

    脚本准备 0Batch_Check.sh 1port_check.sh 2wechat_bot_alert.sh CheckList CheckList #支持大/小写 10.1.1.5 Udp 53 ...

  7. 理解ASP.NET Core - 错误处理(Handle Errors)

    注:本文隶属于<理解ASP.NET Core>系列文章,请查看置顶博客或[点击此处查看全文目录](https://www.cnblogs.com/xiaoxiaotank/p/151852 ...

  8. [cf1349E]Slime and Hats

    首先,当发现全场不存在黑色帽子时,显然所有人都知道其是白色帽子,即必然离开 当第一轮时,若第$n$个人发现前面$n-1$个人全是白色时,其自己必然是黑色,必然离开 而第二轮时,若第$n-1$个人发现$ ...

  9. 3、使用ListOperations操作redis(List列表)

    文章来源:https://www.cnblogs.com/shiguotao-com/p/10560354.html 方法 c参数 s说明   List<V> range(K key, l ...

  10. 反调试代码调试死机代码禁止F12代码

    反调试代码调试死机代码禁止F12代码  // 反调试函数,参数:开关,执行代码 function siji(){    var total="";    for (var i=0; ...