AngularJS -如何分离控制器/模块

Question

我有一个有两个页面的应用程序。

1 -用户列表

2 -我可以管理一个特定的用户

为了组织，我在app.js文件中创建了两个独立的控制器和一个模块，并把所有的东西放在一起(自定义过滤器，指令，工厂…)

现在我想把东西分开放在不同的文件(或者文件夹)。

我该怎么做?

angular.module('app', []).
controller('listController', function ($scope) {
    ... 
}).
controller('manageController', function ($scope) {
    ...
}).
factory('Api', ['$resource',
 function($resource) {
  return {
    ...
  };
}]).
filter('formtaData', function(){
   return function(data, modo){
       ...
   }
}).

另一个问题是，我的控制器有不同的依赖关系，在实际的方式，我必须包括他们所有在我的模块(和页面上的脚本)，即使一个页面不需要他们。

Answer 1

appConfig.js

angular.module('app', [dep1, dep2]);

ListController.js

angular.module('app').controller('listController', function ($scope) {
    ... 
});

DetailsController.js

angular.module('app').controller('manageController', function ($scope) {
    ...
});

apiService.js

angular.module('app').factory('Api', ['$resource',
 function($resource) {
  return {
    ...
  };
}]);

formatDataFilter.js

angular.module('app').filter('formtaData', function(){
   return function(data, modo){
       ...
   }
});

Answer 2

你可以这样做

templates/
    _login.html
    _list.html
    _manage.html
app/
    app.js
    controllers/
        ListController.js
        ManageController.js
    directives/
        SomeDirective.js
    services/
        ApiService.js
        AnotherService.js
    filters/
        FormtaDataFilter.js

在app.js你可以这样写:

app.config(function($routeProvider){
    $routeProvider
    .when('/list', {
        controller: 'ListController',
        templateUrl: 'templates/_list.html'
    })
    .when('/manage', {
        controller: 'ManageController.js',
        templateUrl: 'templates/_manage.html'
    })
    .otherwise({redirectTo: '/'});
});

Answer 3

上面的答案是正确的，但是我通常给angular模块指定一个字面量，以避免每次都输入全名。

var angularApp = angular.module('app', [dep1,dep2]);