为什么在 angularjs 中为控制器使用依赖注入？答案

【问题标题】：Why use dependency injection in angularjs for controllers?为什么在 angularjs 中为控制器使用依赖注入？
【发布时间】：2014-11-26 19:17:39
【问题描述】：

我偶然发现了这个教程。

http://justinvoelkel.me/laravel-angularjs-part-two-login-and-authentication/

作者这样使用依赖注入在app.js中注入登录控制器。

app.js：

var app = angular.module('blogApp',[
'ngRoute',
//Login
'LoginCtrl'
]);
app.run(function(){

});

//This will handle all of our routing
app.config(function($routeProvider, $locationProvider){

$routeProvider.when('/',{
templateUrl:'js/templates/login.html',
controller:'LoginController'
});

});

登录控制器文件如下所示。

LoginController.js：

var login = angular.module('LoginCtrl',[]);

login.controller('LoginController',function($scope){
$scope.loginSubmit = function(){
console.dir($scope.loginData);
}
});

我不明白为什么这里需要依赖注入。

这是我的 app.js 和 LoginController.js 版本，它们运行良好。

app.js：

var app = angular.module('ilapp', ['ngRoute']);

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

    $routeProvider.when('/login', {
        controller: 'LoginController'
    });

}]);

LoginController.js：

angular.module('ilapp').controller('LoginController', [function () {
    this.loginSubmit = function () {
        console.dir(this.loginData);
    };
}]);

作者的方法有什么好处吗？我错过了什么？

【问题讨论】：

标签： angularjs dependency-injection

【解决方案1】：

首先，两种方法都是正确的，它应该可以工作，但你可以根据你的项目选择任何一种方法。

方法 1

在您的问题中，第一种方法是modular way。意味着，您可以在新模块LoginCtrl 中注册LoginController 控制器。这里的模块名称LoginCtrl 令人困惑。您可以将名称更改为loginModule。这种方法对您的organize the files structure 为您的big application 很有帮助。另外，看看这个帖子Angular - Best practice to structure modules

var login = angular.module('loginModule',[]);

login.controller('LoginController',function($scope){
 $scope.loginSubmit = function(){
 console.dir($scope.loginData);
 }
});

var app = angular.module('blogApp',[
 'ngRoute',
 'loginModule'
]);
app.run(function(){
});

//This will handle all of our routing
app.config(function($routeProvider, $locationProvider){
 $routeProvider.when('/',{
 templateUrl:'js/templates/login.html',
 controller:'LoginController'
});

});

方法 2

如果您的应用程序包含minimal pages 而不需要split multiple modules，那么您可以在app.js 中编写所有控制器

【讨论】：