Насіння AngularJS: розміщення JavaScript в окремих файлах (app.js, controllers.js, direktives.js, filters.js, services.js)

Я використовую шаблон кутового насіння, щоб структурувати свою програму. Спочатку я поставив весь мій код JavaScript в один файл, main.js. Цей файл містив мою декларацію модуля, контролери, директиви, фільтри та служби. Додаток працює чудово, як це, але я переживаю за масштабованість та ремонтопридатність, оскільки моя програма стає складнішою. Я помітив, що у шаблону кутового насіння є окремі файли для кожного з них, тому я спробував розповсюдити свій код з одного main.jsфайлу у кожному з інших файлів, зазначених у заголовку, до цього питання та знайдених у app/jsкаталозі кутових -семенний шаблон.

Моє запитання: як мені керувати залежностями, щоб програма почала працювати? Існуюча тут документація не дуже зрозуміла в цьому плані, оскільки кожен із наведених прикладів показує єдиний вихідний файл 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',
      ...]);

Це повинно позбутися помилки, хоча, я думаю, ви повинні прочитати статтю Едуарда Гамонала, згадану в одному з коментарів.