AngularJS seed: размещение JavaScript в отдельных файлах (app.js, controllers.js, directives.js, filters.js, services.js)

Я использую шаблон angular-seed для структурирования своего приложения. Изначально я поместил весь свой код JavaScript в один файл main.js. Этот файл содержал мое объявление модуля, контроллеры, директивы, фильтры и службы. Приложение работает нормально, как это, но я беспокоюсь о масштабируемости и ремонтопригодности, поскольку мое приложение становится более сложным. Я заметил, что в шаблоне angular-seed есть отдельные файлы для каждого из них, поэтому я попытался распространить свой код из одного main.jsфайла в каждый из других файлов, упомянутых в заголовке этого вопроса и найденных в app/jsкаталоге angular -семейный шаблон.

У меня вопрос: как мне управлять зависимостями, чтобы приложение работало? Существующая документация, найденная здесь , не очень ясна в этом отношении, поскольку каждый из приведенных примеров показывает один исходный файл JavaScript.

Пример того, что у меня есть:

app.js

angular.module('myApp', 
    ['myApp.filters',
     'myApp.services',
     'myApp.controllers']);

controllers.js

angular.module('myApp.controllers', []).
    controller('AppCtrl', [function ($scope, $http, $filter, MyService) {

        $scope.myService = MyService; // found in services.js

        // other functions...
    }
]);

Filters.js

angular.module('myApp.filters', []).
    filter('myFilter', [function (MyService) {
        return function(value) {
            if (MyService.data) { // test to ensure service is loaded
                for (var i = 0; i < MyService.data.length; i++) {
                    // code to return appropriate value from MyService
                }
            }
        }
    }]
);

services.js

angular.module('myApp.services', []).
    factory('MyService', function($http) {
        var MyService = {};
        $http.get('resources/data.json').success(function(response) {
            MyService.data = response;
        });
        return MyService;
    }
);

main.js

/* This is the single file I want to separate into the others */
var myApp = angular.module('myApp'), []);

myApp.factory('MyService', function($http) {
    // same code as in services.js
}

myApp.filter('myFilter', function(MyService) {
    // same code as in filters.js
}

function AppCtrl ($scope, $http, $filter, MyService) {
    // same code as in app.js
}

Как мне управлять зависимостями?

Заранее спасибо.

Проблема вызвана тем, что вы «повторно объявили» модуль приложения во всех ваших отдельных файлах.

Вот как выглядит объявление модуля приложения (не уверен, что это правильный термин):

angular.module('myApp', []).controller( //...

Вот как выглядит присвоение (не уверен, что это правильный термин) для вашего прикладного модуля:

angular.module('myApp').controller( //...

Обратите внимание на отсутствие квадратных скобок.

Таким образом, предыдущая версия с квадратными скобками должна использоваться только один раз, обычно в вашем app.jsили main.js. Все остальные связанные файлы - контроллеры, директивы, фильтры … - должны использовать последнюю версию, без квадратных скобок.

Я надеюсь, что в этом есть смысл. Ура!

Если вы хотите поместить различные части приложения ( filters, services, controllers) в разные физические файлы, вам нужно сделать две вещи:

1. Объявите эти пространства имен (из-за отсутствия лучшего термина) в вашем app.jsили в каждом файле;
2. Обратитесь к этим пространствам имен в каждом из файлов.

Итак, ваш app.jsбудет выглядеть так:

angular.module('myApp', ['external-dependency-1', 'myApp.services', 'myApp.controllers'])
.run(function() {
   //...

})
.config(function() {
  //...
});

И в каждом отдельном файле:

services.js

angular.module('myApp.services', []); //instantiates
angular.module('myApp.services') //gets
.factory('MyService', function() { 
  return {};
});

controllers.js

angular.module('myApp.controllers', []); //instantiates
angular.module('myApp.controllers')      //gets
.controller('MyCtrl', function($scope) {
  //snip...
})
.controller('AccountCtrl', function($scope) {
  //snip...
});

Все это можно объединить в один звонок:

angular.module('myApp.controllers', []) 
.controller('MyCtrl', function($scope) {
 //snip...
});    

Важная часть состоит в том, что вы не должны переопределять angular.module('myApp'); это приведет к его перезаписи при создании экземпляров контроллеров, возможно, не того, что вы хотите.

Вы получаете ошибку, потому что еще не определили myApp.services. До сих пор я помещал все исходные определения в один файл, а затем использовал их в другом. Как и в вашем примере, я бы добавил:

app.js

angular.module('myApp.services', []);

angular.module('myApp', 
    ['myApp.services',
      ...]);

Это должно избавить вас от ошибки, хотя я думаю, вам следует прочитать статью, упомянутую Эдуардом Гамоналем в одном из комментариев.