AngularJS seed: помещение JavaScript в отдельные файлы (приложение.Яш, контроллеры.Яш, директивы.js, фильтры.Яш, услуги.js)

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

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

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

приложение.js

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

контроллеры.js

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

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

        // other functions...
    }
]);

фильтры.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
                }
            }
        }
    }]
);

услуги.js

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

главная.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
}

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

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

3 93
javascript angularjs dependency-injection

3 ответа:

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

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

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

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

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

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

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

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

108

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

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

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

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

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

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

услуги.js

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

контроллеры.js

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

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

контроллеры.js 
angular.module('myApp.controllers', []) 
.controller('MyCtrl', function($scope) {
 //snip...
});

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

11

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

приложение.js

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

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

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

3