如果您想了解Angular2学习笔记之依赖注入的相关知识，那么本文是一篇不可错过的文章，我们将对angular依赖注入理解进行全面详尽的解释，并且为您提供关于30行代码让你理解angular依赖注入：

如果您想了解Angular2学习笔记之依赖注入的相关知识，那么本文是一篇不可错过的文章，我们将对angular依赖注入理解进行全面详尽的解释，并且为您提供关于30行代码让你理解angular依赖注入：angular 依赖注入原理、Angular 依赖注入学习笔记之工厂函数的用法、Angular 依赖注入的学习笔记、Angular.JS学习之依赖注入$injector详析的有价值的信息。

• Angular2学习笔记之依赖注入（angular依赖注入理解）
• 30行代码让你理解angular依赖注入：angular 依赖注入原理
• Angular 依赖注入学习笔记之工厂函数的用法
• Angular 依赖注入的学习笔记
• Angular.JS学习之依赖注入$injector详析

Angular2学习笔记之依赖注入（angular依赖注入理解）

简介

依赖注入是重要的程序设计模式。 Angular 有自己的依赖注入框架，离开了它，几乎没法构建 Angular 应用。 
它使用得非常广泛，以至于几乎每个人都会把它简称为 DI。

注入器与提供器

注入器

//注入器
Constructor(private productService: ProductService ){ }

说明：

一般是在组件或者是服务中写入端代码，如果一个组件或者服务中的 constructor 注入为空。
就代表着这个组件或者服务没有注入任何的服务。

提供器

//提供器写法一
Providers:[ProductService]

//提供器写法二
Providers:[{provide: ProductService,userClass:ProductService}]

//提供器写法三
Providers:[{ provide: ProductService,userClass:AnotherProductService }]

//提供器写法四
Providers:[{ provide: ProductService,userFactory: () => { /*新建服务的方法*/ } }]

说明：

写法一：使用这种方法是默认的写法（也是最精简的写法），直接提供一个 ProuctService。
写法二：使用这种方法和默认的写法是一个意思。 
        provide: ProductService就是提供的是 ProductService服务。
        userClass:ProductService 就是我们new 这个服务对象的时候，new的是 ProductService。
写法三：使用这种方式，就是提供器提供的是 ProductService，但是 new 服务对象的时候， 
        new 的是 AnotherProductService。
写法四：使用工厂模式创建提供器

寻找依赖注入的逻辑

在代码中找注入的方法：
1.在具体的组件或者服务中的 constructor 方法中找注入的服务
2.根据 1 中注入的服务找 提供器
3.跟据2 中的提供器找到对应的注入服务类

例：
注入器为 ：Constructor(private productService: ProductService ){ }
就去找对应的 providers（提供器）
如果提供器为：Providers:[ProductService] 那么注入的就是 ProductService
如果提供器为：Providers:[{ provide: ProductService,userClass:AnotherProductService }] 
             那么注入的就是 AnotherProductService

依赖注入的层级结构

一方面，NgModule 中的提供商是被注册到根注入器。这意味着在 NgModule 中注册的提供商可以被整个应用访问。
另一方面，在应用组件中注册的提供商只在该组件及其子组件中可用。

关于 @Injectable()

@Injectable() 标识一个类可以被注入器实例化。 通常，在试图实例化没有被标识为@Injectable()的类时，注入器会报错。

官方建议：
建议：为每个服务类都添加 @INJECTABLE()
建议：为每个服务类都添加@Injectable()，包括那些没有依赖严格来说并不需要它的。因为：
    面向未来: 没有必要记得在后来添加依赖的时候添加 @Injectable()。
    一致性:所有的服务都遵循同样的规则，不需要考虑为什么某个地方少了一个。

"注意"：
总是使用@Injectable()的形式，不能只用@Injectable。 如果忘了括号，应用就会神不知鬼不觉的报错！

最简单的例子

根模块中注入

目的：在新建的工程中将数据从Service中注入到component中，并且在界面上面展示出来
1.新建一个工程： ng new di
2.新建 product1 组件： ng g c product1
3.新建 product 服务(在shared 路径下面新建 product 服务)： ng g service shared/product   或者   ng g s shared/product

修改代码 produc.service.ts：

/*
 增加 class Product， 以及返回 Product对象供外部调用的方法 getProduct()
    getProduct方法需要返回一个 Product 。如果需要让外部访问到当前的 Service ，就需要加上一个注解  @Injectable()
*/
import { Injectable } from '@angular/core';

@Injectable()
export class ProductService {

  constructor() { }

  getProduct(): Product {
    return new Product(1,"IPhone X","最牛逼的全面屏手机",8388);
  }

}

export class Product{

  constructor(
    public id: number,public name: string,public desc: string,public price: number
  ){}
}

修改 product1.component.ts

/*
在当前的 Product 类中增加 变量 product 以及 注入 ProductService，在初始化的钩子中 调用 ProductService 的 getProduct 方法，返回一个 Product
*/
import { Component,OnInit } from '@angular/core';
import {Product,ProductService} from "../shared/product.service";

@Component({
  selector: 'app-product1',templateUrl: './product1.component.html',styleUrls: ['./product1.component.css']
})
export class Product1Component implements OnInit {

  product: Product;

  constructor(private productService: ProductService) { }

  ngOnInit() {
    this.product = this.productService.getProduct();
  }

}

修改 product1.component.html

<!-- 修改界面，用于界面展示 -->
<div>
  <div>商品编码：{{product.id}}</div>
  <div>商品名称：{{product.name}}</div>
  <div>商品描述：{{product.desc}}</div>
  <div>商品价格：{{product.price}}</div>
</div>

修改 app.conponent.html

<!-- 将 product.html 加入到 当前界面 -->
<h1>
  依赖注入的例子
</h1>


<div>
  <app-product1></app-product1>
</div>

修改 app.modules.ts

/*添加 Product.service.ts 到 providers 中，在这个地方注入是叫做 “从根组件中注入”，然后所有的都可以访问到。*/
import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { Product1Component } from './product1/product1.component';
import {ProductService} from "app/shared/product.service";

@NgModule({
  declarations: [
    AppComponent,Product1Component
  ],imports: [
    browserModule,FormsModule,HttpModule
  ],providers: [ProductService],bootstrap: [AppComponent]
})
export class AppModule { }

图示：

30行代码让你理解angular依赖注入：angular 依赖注入原理

http://www.cnblogs.com/etoah/p/5460441.html

function extractArgs(fn) { //angular 这里还加了注释、箭头函数的处理
            var args = fn.toString().match(/^[^\(]*\(\s*([^\)]*)\)/m);
            return args[1].split(',');
        }

createInjector(cache) {
            this.cache = cache;

        }
angular.module = function () {
            modules = {};
            injector = new createInjector(modules);
            return {
                injector: injector,
                factory: function (name, fn) {
                    modules[name.trim()] = this.injector.invoke(fn); 
                    return this;
                }
            }
        };

createInjector.prototype = {
            invoke: function (fn, self) {
                argsstring = extractArgs(fn);
                args = [];
                argsstring.forEach(function (val) {
                    args.push(this.cache[val.trim()]);
                }, this);
                return fn.apply(self, args);
            }
        };

var ARROW_ARG = /^([^\(]+?)=>/;
var FN_ARGS = /^[^\(]*\(\s*([^\)]*)\)/m;
var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;

extractArgs(fn) {
  var fnText = fn.toString().replace(STRIP_COMMENTS, ''),
      args = fnText.match(ARROW_ARG) || fnText.match(FN_ARGS);
  return args;
}

getService(serviceName, caller) {
      if (cache.hasOwnProperty(serviceName)) {
        if (cache[serviceName] === INSTANTIATING) {
          throw $injectorminerr('cdep',21)">'Circular dependency found: {0}',
                    serviceName + ' <- ' + path.join(' <- '));
        }
        return cache[serviceName];
      } else {
        try {
          path.unshift(serviceName);
          cache[serviceName] = INSTANTIATING;
          return cache[serviceName] = factory(serviceName, caller);
        } catch (err) {
          if (cache[serviceName] === INSTANTIATING) {
            delete cache[serviceName];
          }
          throw err;
        } finally {
          path.shift();
        }
      }
    }

injectionArgs(fn, locals, serviceName) {
      var args = [],
          $inject = createInjector.$$annotate(fn, strictDi, serviceName);

      for (var i = 0, length = $inject.length; i < length; i++) {
        var key = $inject[i];
        if (typeof key !== 'string') {
          'itkn',
                  'Incorrect injection token! Expected service name as string,got {0}', key);
        }
        args.push(locals && locals.hasOwnProperty(key) ? locals[key] :
                                                         getService(key, serviceName));
      }
      return args;
    }

invoke(fn, self, serviceName) {
      typeof locals === 'string') {
        serviceName = locals;
        locals = null;
      }

      var args = injectionArgs(fn, locals, serviceName);
      if (isArray(fn)) {
        fn = fn[fn.length - 1];
      }

      if (!isClass(fn)) {
        // http://jsperf.com/angularjs-invoke-apply-vs-switch
        // #5388
        ;
      } else {
        args.unshift(null);
        new (Function.prototype.bind.apply(fn, args))();
      }
    }

var injector = createInjector(modules, config.strictDi);

Angular 依赖注入学习笔记之工厂函数的用法

网址：https://angular.institute/di

We can transfer any data through our apps, transform it and replace it.

我们能传递任何数据到我们的应用里，改变其形态，并且替换。

Another case: document and fetch can work in your browser correctly. But one day you need to build your app in SSR or precompile with nodejs. Global entities might be missing or be different in that environment.

document 和 fetch 能在浏览器环境下运行。但是如果在 SSR 下 build 应用，或者用 nodejs precompile，那么这些对象在新的环境下不再可用。

Dependency Injection mechanism manages dependencies in your application. For you as an Angular developer, it is a straightforward instrument. There are two operations: you can provide something into your DI tree or take something from it.

依赖注入机制管理应用的依赖。对于 Angular 开发者来说，有两种操作：

1. 提供数据到依赖注入树中
2. 从依赖注入树中获取数据

The magic is the order in which you provide and take your dependencies.
Angular creates a class instance when you ask for this the first time.

当我们试图在 DI 树里第一次获取实例时，Angular 负责实例化。

Providing value is normally used with InjectionToken. This object is like a key for DI mechanism.

我们也可以用依赖注入提供常量，通常借助 InjectionToken. 这个令牌类似依赖注入机制中的 key.

You say "I want to get this data with this key" and ask DI in a component "Do you have something for this key?"

我们使用 InjectionToken 作为 key，询问 Angular 依赖注入机制，“你维护的资源里，有针对这个 key 的值吗？”

看个具体的例子。

export const API_URL = new InjectionToken<string>(''The URL of API'');

在 api-url.token.ts 里，我们从 @angular/core 里导入了标准的 InjectionToken 构造器，其类型为 string，描述信息为：The URL of API.

在 app.module.ts 里，导入这个 API_URL token，然后在 module 的 NgModule 注解里，使用 useValue 提供 token key 代表的具体值：

如何使用这个 token 呢？参考下图代码：

export class AppComponent  {
  constructor(@Inject(API_URL) readonly apiUrl: string) {
    /**
     * Here we asked for something with a key API_URL.
     * There is our string in DI and we get it
     */
    console.log(apiUrl);
  }
}

语义就是，在 app Component 里，使用 @Inject 注解，向 DI 树里查询，是否存在 key 为 API_URL 的注入值。

• We can replace token value at any level of DI tree without any changes in a component - 我们可以在 DI 树上的任意层次结构里，替换 token 的值，而不需要修改 Component
• We can mock a token value providing suitable data in tests - 在测试代码里，我们可以 mock 一个 token 值
• The component class is fully isolated and can be used without any context

Providing a factory

这是 Angular 依赖注入的高级用法之一。

You can provide some value combining and transforming data from other tokens.

我们可以在 factory 代码里编写一些业务逻辑，执行一些数据结构变换的操作。

看个例子：

定义一个函数：

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { PRESSED_KEY } from "./tokens/pressed-key";
import { Observable, fromEvent } from "rxjs";
import { map } from "rxjs/operators";
import { DOCUMENT } from "@angular/common";

/**
 * It is a token value factory.
 *
 * The factory is called when app.component.ts asks for
 * the token PRESSED_KEY the first time
 */
function pressedKeyFactory(documentRef: Document): Observable<string> {
  return fromEvent(documentRef.body, "keydown").pipe(
    map((event: KeyboardEvent) => event.key)
  );
}

构造一个 Observable 对象，当键盘被按下时，从 KeyboardEvent 里解析出具体哪一个键被按下，然后将 key 值通过 Observable 对象返回。

这个函数被当成一个工厂函数，本身接收类型为 Document 的参数，这个参数就是其依赖。

我们通过下列的语法，将名为 PRESSED_KEY 的令牌，和该工厂函数绑定在一起。

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: PRESSED_KEY,
      /**
       * Here you can provide any token and its value will be injected
       * as a factory function argument
       */
      deps: [DOCUMENT],
      useFactory: pressedKeyFactory
    }
  ]
})

该 token 的消费方式：

更多Jerry的原创文章，尽在："汪子熙":

Angular 依赖注入的学习笔记

[ NewLogger,
  // Alias OldLogger w/ reference to NewLogger
  { provide: OldLogger, useExisting: NewLogger}]

import { Injectable } from ''@angular/core'';

@Injectable({
  providedIn: ''root'',
})
export class UserService {
}

import { Injectable } from ''@angular/core'';
import { UserModule } from ''./user.module'';

@Injectable({
  providedIn: UserModule,
})
export class UserService {
}

constructor(private service: HeroService) { }

@Injectable({
  providedIn: ''root'',
})

@NgModule({
  providers: [
   BackendService,
   Logger
 ],
 ...
})

@Component({
  selector:    ''app-hero-list'',
  templateUrl: ''./hero-list.component.html'',
  providers:  [ HeroService ]
})

本文同步分享在 博客“汪子熙”（CSDN）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

Angular.JS学习之依赖注入$injector详析

前言

在依赖注入(IoC)之前，我们在程序中需要创建一个对象很简单也很直接，就是在代码中new Object即可，有我们自己负责创建、维护、修改和删除，也就是说，我们控制了对象的整个生命周期，直到对象没有被引用，被回收。诚然，当创建或者维护的对象数量较少时，这种做法无可厚非，但是当一个大项目中需要创建大数量级的对象时，仅仅依靠程序员来进行维护所有对象，这是难以做到的，特别是如果想在程序的整个生命周期内复用一些对象，我们需要自己写一个缓存模块对所有对象进行缓存，这加大了复杂度。当然，IoC的好处并不仅限于此，它也降低了对依赖的耦合度，不必在代码中进行引用或者传参即可操作依赖。

在js中，我们可以这样引入依赖

1、使用全局变量引用

2、在需要的地方通过函数参数传递

使用全局变量的坏处自不必说，污染了全局的名字空间，而通过函参传递引用，也可以通过两种方法实现：

1、闭包传递

2、后台解析出依赖对象，并通过Function.prototype.call进行传参

而在AngularJS中，依赖注入是通过后者实现的，接下来的几节将会介绍IoC模块的具体实现。

获取依赖