Question

我遇到了这个教程。

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

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

Answer 1

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

方法1

在您的问题中，第一种方法是modular way。意思是，您可以在新模块LoginController中注册LoginCtrl控制器。这里模块名称LoginCtrl令人困惑。您可以将名称更改为loginModule。这种方法对organize the files structure的{{1}}有帮助。另外，请看这篇文章Angular - Best practice to structure modules

big application

方法2

如果您的应用包含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' }); });且不需要minimal pages，那么您可以在split multiple modules本身编写所有控制器

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

1 个答案: