需要了解Angular.js依赖注入 [英] Need to understand Dependency Injection in Angular.js

问题描述

我在Angular.js一个新手并在一个叫做主题依赖关系注入来了。我完全糊涂了阅读文章之后。

I am a newbie in Angular.js and came across a topic called "Dependency Injection". I am totally confused after reading the article.

根据该文件，
的依赖注入（DI），在组织如何元件，模块和变量将被加载到角应用的各个部分的角度，方法。的

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

Here's an example of a dependency injection for a controller:

//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'];

我猜控制$注射='$范围，$ HTTP，$位置']; 这就是依赖注入进入图片

I guess "Ctrl.$inject = ['$scope','$http','$location'];" this is where Dependency Injection comes into picture.

但我需要了解，它做什么以及它是如何有用吗？

But I need to understand, what it does and how it is useful?

感谢。

推荐答案

依赖注入可以让你做几件事情，第一它允许您在您的所需要的唯一指定控制器，工厂，服务等

Dependency injection allows you to do several things, first it allows for you to specify only what you need in your controller, factory, service, etc.

您有很多pre-出炉的选择，但注射，您还可以结合第三方角模块到项目中。

You have a lot of pre-baked options but injection also allows you to incorporate 3rd party Angular modules into your project.

例如，假设您要使用动画和路由选择，但你想使用的用户界面路由器，而不是 ngRoute 比你要把它们注入到您的应用程序实例。

For example, let's say you want to use animations and routing, but you want to use ui-router instead of ngRoute than you would inject them into your app instantiation.

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

---

现在让我们假设你有你的第一个控制器的设置。

---

Now let's say you have your first controller setup.

但是，让我们说你有，你想在该控制器处理所有使用承诺你的Ajax调用使用服务。

But let's say you have a service that you want to use in that controller that handles all of your ajax calls using promises.

首先，服务将与注射设置 $ HTTP 来作出的承诺的服务器请求和 $ Q

First the service would be setup with injecting $http to make the server request and $q for the promises.

// 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;
        }
    }    
});

现在，我们有服务的设置，我们会注入到这一点我们的控制器，所以我们可以很容易地使用它来获取用户或做别的事，我们宣布有：

Now that we have the service setup, we would inject that into our controller so we can easily use it to get the users or do anything else we declared in there:

// 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 is part of $injector which you can find more information here.

$注射器获取已注入和 $注只允许您设置注射参数一切的情况下， 。 $注射器运行在幕后。

$injector gets instances of everything that has been injected and $inject just allows you to setup the injection parameters. $injector runs behind the scenes.

下面是github上角源代码片段 - 线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'];

这篇关于需要了解Angular.js依赖注入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！