AngularJS 依赖注入学习笔记

什么是依赖注入？

依赖注入（Dependency Injection）是一种设计模式，它可以让我们更加方便地编写可维护、可测试的代码。在 AngularJS 中，依赖注入也是非常重要的一个特性。

简单来说，依赖注入就是将需要用到的对象，通过构造函数或者属性的方式，在需要使用它们的位置传递进去。这样可以使我们的代码变得更加灵活，而且可以很好地控制对象之间的关系。

AngularJS 中的依赖注入

在 AngularJS 中，我们可以通过以下两种方式来实现依赖注入：

通过函数参数传递依赖对象

在定义一个 AngularJS 控制器、指令、服务等对象时，我们可以在它的构造函数中定义需要的依赖对象。AngularJS 会在创建这个对象时，自动将这些依赖对象作为参数传递进去。

下面是一个使用依赖注入的 AngularJS 控制器的例子：

javascriptCopy Code
angular.module('myApp', [])
    .controller('MyController', function($scope, $http) {
        // 在这里使用 $scope 和 $http 对象
    });

在这个例子中，$scope 和 $http 就是我们所需要的依赖对象。当 AngularJS 创建 MyController 控制器时，会自动将这两个对象作为参数传递进去。

使用 $injector 服务手动注入依赖对象

除了在构造函数中定义依赖对象外，我们还可以使用 AngularJS 提供的 $injector 服务手动向容器中注入需要的依赖对象。下面是一个例子：

javascriptCopy Code
angular.module('myApp', [])
    .service('MyService', function() {
        // 在这里定义 MyService
    })
    .controller('MyController', function($scope, $injector) {
        // 手动注入 MyService
        var MyService = $injector.get('MyService');
        // 在这里使用 MyService 对象
    });

在这个例子中，我们使用 $injector.get() 方法手动获取 MyService 服务的实例，然后就可以在控制器中使用它了。

为什么要使用依赖注入？

使用依赖注入有以下几个好处：

代码更加灵活：我们可以方便地修改依赖对象，而不需要修改大量的相关代码。
代码更加可维护：依赖关系变得更加明确，维护起来也更加容易。
代码更加可测试：我们可以轻松地使用单元测试来测试我们的代码，因为我们可以方便地模拟依赖对象。

举个例子

假设我们现在有一个需求：需要显示一个列表，这个列表中包含了从服务器获取到的数据。我们现在需要编写一个 AngularJS 控制器来实现这个功能。

下面是我们可能会写出的代码：

javascriptCopy Code
angular.module('myApp', [])
    .controller('MyController', function($scope) {
        $http.get('/api/data').then(function(response) {
            $scope.items = response.data;
        });
    });

这段代码可以实现我们的需求，但是它有一个问题：它没有考虑到我们的代码可能需要进行单元测试。如果我们要对这段代码进行单元测试，我们需要模拟 $http 服务和 $scope 对象的行为，这样才能对这个控制器的逻辑进行测试。

因此，我们需要使用依赖注入来重构这段代码，使得我们的代码更加易于测试。下面是重构后的代码：

javascriptCopy Code
angular.module('myApp', [])
    .service('MyService', function($http) {
        var self = this;
        self.getItems = function() {
            return $http.get('/api/data').then(function(response) {
                return response.data;
            });
        };
    })
    .controller('MyController', function($scope, MyService) {
        MyService.getItems().then(function(items) {
            $scope.items = items;
        });
    });

在这段代码中，我们定义了一个名为 MyService 的服务，这个服务负责向服务器获取数据。然后在控制器中，我们通过依赖注入的方式使用 MyService 来获取数据，并将获取到的数据绑定到 $scope 对象上。

使用这种方式，我们可以方便地对 MyService 进行单元测试，同时也可以方便地对 MyController 进行单元测试。

总结

依赖注入是 AngularJS 中非常重要的一个特性，它可以使我们的代码变得更加灵活、可维护、可测试。在编写 AngularJS 应用时，我们应该尽量多地使用依赖注入，以提高代码的质量和可维护性。