AngularJS - 依赖注入 vs $injector-JavaScript中文网-JavaScript教程资源分享门户

在 AngularJS 中，依赖注入是一种常见的设计模式，它能够让我们在编写代码时更加灵活，可维护性更高。而 $injector 则是 AngularJS 框架中的一个服务，它用于实现依赖注入。

依赖注入

依赖注入是一种将依赖关系从一个对象传递到另一个对象的设计模式。在 AngularJS 中，我们可以通过以下方式实现依赖注入：

1. 构造函数注入

构造函数注入是一种将依赖关系通过构造函数传递的方式。我们可以在组件的构造函数中声明需要注入的依赖，然后在创建组件时将这些依赖传递进去。例如：

// javascriptcn.com 代码示例
class MyComponent {
  constructor(dep1, dep2) {
    this.dep1 = dep1;
    this.dep2 = dep2;
  }
}

angular.module('myApp').component('myComponent', {
  controller: MyComponent,
  bindings: {
    dep1: '<',
    dep2: '<'
  }
});

这里的 dep1 和 dep2 就是我们需要注入的依赖。在使用组件时，我们可以通过指令的属性将这些依赖传递进去：

<my-component dep1="dep1" dep2="dep2"></my-component>

2. 注入器注入

注入器注入是一种将依赖关系通过注入器传递的方式。我们可以在组件中声明一个 $injector 服务，然后在组件中使用 $injector.get() 方法获取需要的依赖。例如：

// javascriptcn.com 代码示例
class MyComponent {
  constructor($injector) {
    this.dep1 = $injector.get('dep1');
    this.dep2 = $injector.get('dep2');
  }
}

angular.module('myApp').component('myComponent', {
  controller: MyComponent
});

这里的 $injector 就是我们需要注入的依赖。在使用组件时，我们需要在注入器中注册这些依赖：

// javascriptcn.com 代码示例
angular.module('myApp').run(function($injector) {
  $injector.register('dep1', function() {
    return 'dep1';
  });
  
  $injector.register('dep2', function() {
    return 'dep2';
  });
});

3. 内联注入

内联注入是一种将依赖关系通过指令属性传递的方式。我们可以在指令中声明需要注入的依赖，并将这些依赖作为指令属性传递进去。例如：

// javascriptcn.com 代码示例
angular.module('myApp').component('myComponent', {
  controller: function() {
    this.$onInit = function() {
      console.log(this.dep1);
      console.log(this.dep2);
    };
  },
  bindings: {
    dep1: '<',
    dep2: '<'
  }
});

<my-component dep1="dep1" dep2="dep2"></my-component>

这里的 dep1 和 dep2 就是我们需要注入的依赖。在使用组件时，我们可以通过指令的属性将这些依赖传递进去。

$injector

$injector 是 AngularJS 框架中的一个服务，它用于实现依赖注入。$injector 可以用于获取已经注册的依赖，也可以用于手动注入依赖。

获取依赖

我们可以使用 $injector.get() 方法获取已经注册的依赖。例如：

angular.module('myApp').run(function($injector) {
  var dep1 = $injector.get('dep1');
  var dep2 = $injector.get('dep2');
});

这里的 dep1 和 dep2 就是我们已经注册的依赖。

手动注入

我们可以使用 $injector.invoke() 方法手动注入依赖。例如：

// javascriptcn.com 代码示例
angular.module('myApp').run(function($injector) {
  var dep1 = $injector.invoke(function(dep1) {
    return dep1;
  });
  
  var dep2 = $injector.invoke(function(dep2) {
    return dep2;
  });
});

这里的 dep1 和 dep2 就是我们需要手动注入的依赖。

总结

依赖注入是一种将依赖关系从一个对象传递到另一个对象的设计模式。在 AngularJS 中，我们可以通过构造函数注入、注入器注入和内联注入实现依赖注入。而 $injector 则是 AngularJS 框架中的一个服务，它用于实现依赖注入。我们可以使用 $injector.get() 方法获取已经注册的依赖，也可以使用 $injector.invoke() 方法手动注入依赖。通过合理使用依赖注入和 $injector，我们可以编写更加灵活、可维护性更高的代码。

示例代码

以下是一个使用依赖注入和 $injector 的示例代码：

// javascriptcn.com 代码示例
angular.module('myApp').run(function($injector) {
  $injector.register('dep1', function() {
    return 'dep1';
  });
  
  $injector.register('dep2', function() {
    return 'dep2';
  });
});

class MyComponent {
  constructor($injector) {
    this.dep1 = $injector.get('dep1');
    this.dep2 = $injector.get('dep2');
  }
  
  $onInit() {
    console.log(this.dep1);
    console.log(this.dep2);
  }
}

angular.module('myApp').component('myComponent', {
  controller: MyComponent
});

<my-component></my-component>

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657a87eed2f5e1655d4e86f3