Ziarno AngularJS: umieszczanie JavaScript w oddzielnych plikach (app.js, controllers.js, directives.js, filters.js, services.js)

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ę.

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.jslub main.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!

Jeśli chcesz umieścić różne części aplikacji ( filters, services, controllers) w różnych plikach fizycznych, musisz zrobić dwie rzeczy:

1. Zadeklaruj te przestrzenie nazw (z braku lepszego terminu) w swoim app.jslub w każdym pliku;
2. Odwołaj się do tych przestrzeni nazw w każdym z plików.

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:

angular.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.

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.