Używam szablonu kątowego do tworzenia struktury mojej aplikacji. Początkowo umieścić wszystkie moje kodu JavaScript w jednym pliku main.js. Ten plik zawierał moją deklarację modułu, kontrolery, dyrektywy, filtry i usługi. Aplikacja działa dobrze w ten sposób, ale martwię się o skalowalność i łatwość konserwacji, ponieważ moja aplikacja staje się bardziej złożona. Zauważyłem, że szablon angular-seed ma osobne pliki dla każdego z nich, więc próbowałem rozprowadzić mój kod z jednego main.jspliku do każdego z innych plików wymienionych w tytule tego pytania i znalazłem w app/jskatalogu angular szablon nasion .
Moje pytanie brzmi: jak zarządzać zależnościami, aby aplikacja działała? Istniejąca dokumentacja tutaj nie jest zbyt jasna w tym względzie, ponieważ każdy z podanych przykładów pokazuje pojedynczy plik źródłowy JavaScript.
Oto przykład tego, co mam:
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...
}
]);
filtry.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
}
Jak zarządzać zależnościami?
Z góry dziękuję.
źródło
angular.module('myApp.services', ['myApp.services']);w app.js bez powodzenia.angular.module('myApp.services', ['myApp.server', 'myApp.somethingElse']).angular.module('myApp.service1', ['myApp.service1', 'myApp.service2'])oryginalnie. W przeciwnym razie nie uwzględniłbym myApp.services jako własnej zależności.Odpowiedzi:
Problem jest spowodowany ponownym deklarowaniem modułu aplikacji we wszystkich oddzielnych plikach.
Tak wygląda deklaracja modułu aplikacji (brak pewności, czy deklaracja jest właściwym terminem):
angular.module('myApp', []).controller( //...Oto jak wygląda przypisanie (nie jestem pewien, czy przypisanie jest właściwym terminem) do modułu aplikacji:
angular.module('myApp').controller( //...Zwróć uwagę na brak nawiasów kwadratowych.
Tak więc poprzednia wersja, ta z nawiasami kwadratowymi, powinna być używana tylko raz, zwykle w twoim
app.jslubmain.js. Wszystkie inne powiązane pliki - kontrolery, dyrektywy, filtry … - powinny używać tej ostatniej wersji, bez nawiasów kwadratowych.Mam nadzieję, że to ma sens. Twoje zdrowie!
źródło
myApp. W moim pliku app.js utworzyłem dla niego varvar myApp = angular.module('myApp', []);We wszystkich innych plikach po prostu odniosłem się do tego var (np.myApp.filter('myFilter', function(MyService) { /* filter code */ });O ile dodałem nazwy plików w tagach skryptu w moim html, nie musiałem deklarować żadnych innych zależności. Szablon projektumyApp, tak że jest teraz anonimowy moduł wapp.js:angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']);. We wszystkich innych plikach zadeklarowałem również takie anonimowe modułyangular.module('myApp.filter', []).filter('myFilter', function(MyService) { /* filter code */ });. Moja aplikacja też działa teraz w ten sposób. Przejrzałem historię mojego kodu i nie widzę, gdzie to jest inne niż to, co ja, kiedy nie działało.angular.module('myApp', []);(zwróć uwagę na nawiasy kwadratowe) w moim głównym pliku js. Następnie wszystkie inne pliki odwołują się do modułu przy użyciu składniangular.module('myApp').controllerlub.directive.ngCookies,ngResource) kiedy deklarując swój główny moduł aplikacji:angular.module('myApp', []);ngResourcejest zdecydowanie jedną z tych, które umieszczasz w nawiasach deklaracji modułu. Gdyby moja odpowiedź pomogła, głosowanie i zatwierdzenie jej byłoby bardzo wdzięczne.Jeśli chcesz umieścić różne części aplikacji (
filters, services, controllers) w różnych plikach fizycznych, musisz zrobić dwie rzeczy:app.jslub w każdym pliku;Więc twój
app.jswyglądałby tak:angular.module('myApp', ['external-dependency-1', 'myApp.services', 'myApp.controllers']) .run(function() { //... }) .config(function() { //... });A w każdym pliku:
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... });Wszystko to można połączyć w jedno połączenie:
controllers.jsangular.module('myApp.controllers', []) .controller('MyCtrl', function($scope) { //snip... });Ważną częścią jest to, że nie powinieneś redefiniować
angular.module('myApp'); spowodowałoby to nadpisanie go podczas tworzenia wystąpienia kontrolerów, prawdopodobnie nie to, czego chcesz.źródło
Otrzymujesz błąd, ponieważ jeszcze nie zdefiniowałeś
myApp.services. Do tej pory umieściłem wszystkie początkowe definicje w jednym pliku, a następnie użyłem ich w innym. Jak na przykład, włożyłbym:app.js
angular.module('myApp.services', []); angular.module('myApp', ['myApp.services', ...]);To powinno wyeliminować błąd, chociaż myślę, że powinieneś przeczytać artykuł Eduarda Gamonal, o którym mowa w jednym z komentarzy.
źródło
angular.module('myApp.services', []);do mojego pliku app.js. Żadne tak naprawdę nie rozwiązuje mojego problemu.