Angular4总结(三)—— 依赖注入

简介: 依赖注入是控制反转的一种实现方式。这种模式就是Java Web开发中最流行框架Spring的核心概念。为什么需要使用依赖注入在原来最普通的开发中,如果我们有一个方法createCar(new Wheel(), new Engine(), new CarBody())。

依赖注入是控制反转的一种实现方式。这种模式就是Java Web开发中最流行框架Spring的核心概念。

为什么需要使用依赖注入

在原来最普通的开发中,如果我们有一个方法createCar(new Wheel(), new Engine(), new CarBody())。那么我们得需要分别实例化,轮胎,引擎,车身给这个方法。这种形式叫做注入。 很有可能出现的一种情况是车身这个对象中还包括了:座椅,方向盘,仪表盘,手刹,等等一系列的东西,我们就需要使用大量实例化代码。这个时候依赖注入出现了,可以帮我们解决上述的问题。

不仅如此,而且会使得代码呈现一种松耦合的状态,并且使得可重用性更高。

使用依赖注入

  • 如何注册注入: 使用提供器(Providers),在app.module.ts中有一个属性叫做providers。

    providers: [
        TestService
      ]

providers是一个数组,那么他的每一项叫做一个provider。

上面所说的providers其实是一种省略的写法,完整的写法是这样的:

providers: [
    {provider: TestService, useClass: TestService}
]
  • 对象中的provider属性,(这里的TestService )专业一点的说叫做为Token,指定的是这个依赖注入的类型。
  • 每当有地方要使用这个Service的时候,就会把useClass属性后面指定的实例化一下,然后进行返回。如果使用过spring的话,一定不会陌生。简单的说,就是给出了一个接口(provider 属性指定的),然后就可以附上不同的实现类(useClass属性的)
  • 除了上述情况,还有一种情况就是我们需要动态的根据某一个值指定到底使用哪个对象,这个时候我们就需要使用useFactory属性

因为factory是单例的,所以返回的结果在当前应该是同一个,如果同时取得两个注入器的话。

providers: [{provide: TestService, useFactory: (logger: LoggerService) => {
      //这里暂时使用一个随机数代替,决定了到底使用哪一个对象
    if (Math.random() > 0.5) {
      //这里一定要记的return 否则注入会成为undefined.
      return new ServiceService(logger);
    } else {
      return new AnotherServiceService(logger);
    }},deps: [LoggerService]]

deps属性指定了我们使用工厂注入的服务中,还需要注入哪些服务。

  • 而且不光可以注册服务,还可以对值进行注册,注册的方式如下:

    {
          provide: 'IS_DEV_ENVIRONMENT',
          useValue: false
        }
  • 提供器作用域

    1. 当提供器在模块中时,服务是服务于全部component的,相当于是全局的 。
    2. 当提供器在组件中时,服务是服务于组件以及自组件的。
    3. 当相同token的提供器既存在于模块也存在在组件中时,组件中的优先级更高。
    4. 优先将服务声明在组件中。尽量缩小代码的作用域是程序员必备准则。

Tips: @Injectable 注解表明的是当前的这个服务可不可以再注入别的服务。建议不管是否需要,都要加上这个注解,@Component是这个注解的子类,所以我们可以直接在组件中进行注入

  • 如何使用注入: 使用注入器

在具体的component文件中,我们通过构造函数指定,例如说像下方一样,指定具体需要的Token。然后通过指定的Token去返回指定对象的实例化

constructor(testService: TestService) {
  
}
  • 注入器的加载顺序

注入器是通过提供器提供的服务进行注册的,这个众所周知。但是它是一个怎样的加载过程呢,这就应该好好说一说注入器的层级关系了。

app module为整个应用最根本的源头,所以说他就是最外的一层(应用级别注入器)。这个app module可能包含有别的Module,那些module会有自己的注入器,他们被称作(主组件注入器)。这些组件下方还会包含有子组件,他们被称作子组件注入器。整个加载过程类似JVM的双亲委托。我现在有一个子组件,注入了一个服务,首先会查找当前的提供器是否有包含,如果没有,继续向父组件找。然后就这么一层一层的找,直到到了最外层提供器,还是没有找到的话,则会报出异常。

目录
相关文章
|
18天前
|
测试技术 UED 开发者
“Angular高手必看:模块化与依赖注入的绝妙搭配,让你的代码瞬间高大上!”
【10月更文挑战第25天】本文以问答形式详细探讨了Angular框架中的模块化与依赖注入的高级特性。主要内容包括:Angular模块的基本概念和创建方法,依赖注入的实现方式,模块间依赖关系的处理,以及懒加载模块的使用。通过这些特性,可以提高代码的可维护性和复用性,优化大型Web应用的开发和性能。
26 2
|
4月前
|
前端开发 容器
前端框架与库 - Angular模块与依赖注入
【7月更文挑战第17天】探索Angular的模块化和依赖注入:模块用于组织组件、服务等,通过`@NgModule`声明。依赖注入简化类间依赖管理,但面临模块重复导入、服务作用域不当和依赖循环等问题。解决策略包括规划模块结构、正确设置服务作用域和使用工厂函数打破循环依赖。遵循最佳实践,构建高效、可维护的Angular应用。
63 17
|
4月前
|
设计模式 JavaScript 测试技术
Angular服务与依赖注入机制详解
【7月更文挑战第17天】Angular的服务与依赖注入机制为构建模块化、可维护和可扩展的应用程序提供了强大的支持。通过合理定义和使用服务,以及利用依赖注入来管理依赖关系,我们可以编写出更加清晰、可维护和可测试的代码。希望本文能帮助你更好地理解和应用Angular的服务与依赖注入机制。
|
前端开发 测试技术 网络架构
Angular 6+依赖注入使用指南:providedIn与providers对比
本文由达观数据研究院根据《Total Guide To Angular 6+ Dependency Injection — providedIn vs providers》编译,如有不当,还请指正。 Angular 6为我们提供了更好的语法——provideIn,用于将服务注册到Angular依赖注入机制中。
1294 0
|
3月前
|
API 开发者 UED
PrimeFaces:JSF的魔法衣橱,解锁UI设计的无限可能!
【8月更文挑战第31天】本文介绍如何结合 JSF(JavaServer Faces)和 PrimeFaces 构建美观且功能强大的现代用户界面。PrimeFaces 提供丰富的 UI 组件库,包括按钮、输入框、数据网格等,支持现代 Web 标准,简化界面开发。文章通过具体示例展示如何使用 `<p:inputText>` 和 `<p:calendar>` 等组件创建用户表单,并用 `<p:dataTable>` 展示数据集合,提升 JSF 应用的易用性和开发效率。
60 0
|
3月前
|
开发者 安全 SQL
JSF安全卫士:打造铜墙铁壁,抵御Web攻击的钢铁防线!
【8月更文挑战第31天】在构建Web应用时,安全性至关重要。JavaServer Faces (JSF)作为流行的Java Web框架,需防范如XSS、CSRF及SQL注入等攻击。本文详细介绍了如何在JSF应用中实施安全措施,包括严格验证用户输入、使用安全编码实践、实施内容安全策略(CSP)及使用CSRF tokens等。通过示例代码和最佳实践,帮助开发者构建更安全的应用,保护用户数据和系统资源。
52 0
|
3月前
|
开发者 C# C++
揭秘:如何轻松驾驭Uno Platform,用C#和XAML打造跨平台神器——一步步打造你的高性能WebAssembly应用!
【8月更文挑战第31天】Uno Platform 是一个跨平台应用程序框架,支持使用 C# 和 XAML 创建多平台应用,包括 Web。通过编译为 WebAssembly,Uno Platform 可实现在 Web 上运行高性能、接近原生体验的应用。本文介绍如何构建高效的 WebAssembly 应用:首先确保安装最新版本的 Visual Studio 或 VS Code 并配置 Uno Platform 开发环境;接着创建新的 Uno Platform 项目;然后通过安装工具链并使用 Uno WebAssembly CLI 编译应用;最后添加示例代码并测试应用。
104 0