javascript - 需要了解 Angular.js 中的依赖注入(inject)

Question

我是 Angular.js 的新手，遇到了一个名为“依赖注入(inject)”的主题。看完这篇文章我完全糊涂了。

根据文档，从 Angular 来看，依赖注入(inject) (DI) 是组织组件、模块和变量如何加载到 Angular 应用的各个部分的方法。

这是一个 Controller 依赖注入(inject)的例子:

//the controller definition
var Ctrl = function($scope, $http, $location) 
{
  //now you can use any of the injected variables

  //to change the URL after something has happened then you can use $location
  $location.path('/path/to/new/page');
}
  //and now the injection of the variables
  Ctrl.$inject = ['$scope','$http','$location'];

我猜 "Ctrl.$inject = ['$scope','$http','$location'];"这就是依赖注入(inject)发挥作用的地方。

但我需要了解它的作用以及它的用途？

谢谢。

Answer 1

依赖注入(inject)允许你做几件事，首先它允许你在你的 controller, factory, service 中指定你需要的东西> 等

您有很多预制选项，但注入(inject)还允许您将第 3 方 Angular 模块合并到您的项目中。

例如，假设您想使用动画和路由，但您希望使用 ui-router 而不是 ngRoute，而不是将它们注入(inject)您的应用程序实例。

var myApp = angular.module('myApp', ['ui.router', 'ngAnimate']);

---

现在假设您已完成第一个 Controller 设置。

但假设您有一个服务，您希望在该 Controller 中使用该服务，该服务使用 promises 处理您所有的 ajax 调用。

首先，服务将被设置为注入(inject) $http 以发出服务器请求并注入(inject) $q 以实现 promise 。

// It is important to note that not all modules have a scope, 
// so injecting scope into this service would cause a fatal error, 
// it is important to become familiar with what baked in modules allow for 
// injections.
myApp.service('myAjax', function ($http, $q) {
    return {
        getUsers: function () {
            var q = $q.defer();
            $http.get('my/url/path').success(function (results) {
                // We got a successful response so pass on the results
                q.resolve(results);
            }).error(function (errorResults) {
                // Something went wrong, let's pass that along
                q.reject(errorResults);
            });
            return q.promise;
        }
    }    
});

现在我们已经设置了服务，我们将把它注入(inject)我们的 Controller ，这样我们就可以轻松地使用它来获取用户或执行我们在其中声明的任何其他操作:

// Note that I am demonstrating a different injection approach, this is actually the recommended approach
myApp.controller('myController', ['$scope', 'myAjax', function ($scope, myAjax) {
    // call our service
    myAjax.getUsers().then(
        function (results) {
            // Here we are using our controller $scope injection to 
            // bind to the html
            $scope.users = results;
        },
        function (error) {},
    )
}]);

---

编辑

$inject 是 $injector 的一部分，您可以找到 more information here .

$injector 获取所有已注入(inject)的实例，而 $inject 仅允许您设置注入(inject)参数。 $injector 在幕后运行。

Here is a snippet from the angular source on github - Line 1238

angular.module('ngAppStrictDemo', [])
// BadController will fail to instantiate, due to relying on automatic function annotation,
// rather than an explicit annotation
    .controller('BadController', function($scope) {
        $scope.a = 1;
        $scope.b = 2;
    })
    // Unlike BadController, GoodController1 and GoodController2 will not fail to be instantiated,
    // due to using explicit annotations using the array style and $inject property, respectively.
    .controller('GoodController1', ['$scope', function($scope) {
        $scope.a = 1;
        $scope.b = 2;
    }])
    .controller('GoodController2', GoodController2);
function GoodController2($scope) {
    $scope.name = "World";
}
GoodController2.$inject = ['$scope'];