将应用程序,控制器和服务放在单独的文件中

Question

我想在项目变得太大之前将角度代码移动到单独的文件中.

我试图移动app,controllers并services为独立的文件,但错误停止代码参考点(或他们太通用).

我决定将文件内容放在大<script>标签上,这样我就可以解决错误并使其正常工作.不幸的是我遇到过这个问题 (由于...无法实例化模块protonApp)并且不知道如何跟踪问题(我是角色的新手)

该

(function () {
    'use strict';
    ...
}());

我对代码进行了整理是因为我所做的(小)研究表明,当它们位于不同的文件中时,你应该将它们放在这些代码之间.

(function () {
    'use strict';
    var app = angular.module('protonApp',['ui.router','protonAppControllers','protonAppServices']);

    app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
        ...
    }]);

    app.value('debug',true);

    app.run(function($rootScope,$state,$http,debug,LeftMenuService) {
        ...
    });
}());


(function () {
    'use strict';
    angular.module('protonAppControllers', ['$scope','$http','LeftMenuService']);
}());


(function () {
    'use strict';
    angular.module('protonAppServices', ['$rootScope','$http']);
}());

(function () {
    'use strict';
    angular.module('protonAppControllers').controller('loginController',['$scope','$http','$state',function($scope,$http,$state){
        ...
    }]);
}());

(function () {
    angular.module('protonAppControllers').controller('surveyListController',['$scope','$http','LeftMenuService',function($scope,$http,LeftMenuService){
        ...
    }]);
}());

(function () {
    'use strict';
    angular.module('protonAppControllers').controller('surveyHelpController',['$scope','$http','LeftMenuService',function($scope,$http,LeftMenuService){
        ...
    }]);
}());


(function () {
    'use strict';
    angular.module('protonAppServices').service('LeftMenuService', function($http,$rootScope){
        ...
    });
}());

编辑

进一步挖掘显示我无法访问$rootScope或$scope在我的任何控制器文件中

Answer 1

在模块注入中，您不必添加 $scope 和 $http ：

angular.module('protonAppServices', []);

将它们注入控制器中，但不要注入模块声明中