Benih AngularJS: menempatkan JavaScript ke dalam file terpisah (app.js, controllers.js, directives.js, filter.js, services.js)

Saya menggunakan template benih sudut untuk menyusun aplikasi saya. Awalnya saya memasukkan semua kode JavaScript saya ke dalam satu file main.js,. File ini berisi deklarasi modul, pengontrol, arahan, filter, dan layanan saya. Aplikasi berfungsi dengan baik seperti ini, tetapi saya khawatir tentang skalabilitas dan pemeliharaan karena aplikasi saya menjadi lebih kompleks. Saya perhatikan bahwa templat benih sudut memiliki file terpisah untuk masing-masing, jadi saya telah mencoba mendistribusikan kode saya dari satu main.jsfile ke masing-masing file lain yang disebutkan dalam judul pertanyaan ini dan ditemukan di app/jsdirektori sudut template benih .

Pertanyaan saya adalah: bagaimana cara mengelola dependensi agar aplikasi berfungsi? Dokumentasi yang ada yang ditemukan di sini tidak terlalu jelas dalam hal ini karena masing-masing contoh yang diberikan menunjukkan satu file sumber JavaScript.

Contoh dari apa yang saya miliki adalah:

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...
    }
]);

filter.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
}

Bagaimana cara mengelola dependensi?

Terima kasih sebelumnya.

Masalahnya disebabkan karena Anda "mendeklarasikan" modul aplikasi Anda di semua file terpisah.

Seperti inilah tampilan deklarasi modul aplikasi (bukan deklarasi pasti adalah istilah yang tepat):

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

Ini adalah tugas (tidak yakin apakah tugas adalah istilah yang tepat) untuk modul aplikasi Anda terlihat seperti:

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

Perhatikan kurangnya tanda kurung siku.

Jadi, versi sebelumnya, yang memiliki tanda kurung siku, hanya boleh digunakan sekali, biasanya di app.jsatau main.js. Semua file terkait lainnya - pengontrol, arahan, filter ... - harus menggunakan versi terakhir, yang tanpa tanda kurung siku.

Saya harap itu masuk akal. Bersulang!

Jika Anda ingin meletakkan bagian yang berbeda dari aplikasi Anda ( filters, services, controllers) di file fisik yang berbeda, ada dua hal yang harus Anda lakukan:

1. Deklarasikan namespace tersebut (karena tidak ada istilah yang lebih baik) di Anda app.jsatau di setiap file;
2. Lihat namespace tersebut di setiap file.

Jadi, Anda app.jsakan terlihat seperti ini:

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

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

Dan di setiap file individual:

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...
});

Semua ini dapat digabungkan menjadi satu panggilan:

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

Bagian yang penting adalah Anda tidak harus mendefinisikan ulang angular.module('myApp'); yang akan menyebabkannya ditimpa saat Anda membuat instantiate pengontrol Anda, mungkin bukan yang Anda inginkan.

Anda mendapatkan kesalahan karena Anda belum menentukan myApp.services. Apa yang saya lakukan sejauh ini adalah meletakkan semua definisi awal dalam satu file dan kemudian menggunakannya di file lain. Seperti contoh Anda, saya akan memasukkan:

app.js

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

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

Itu harus menghilangkan kesalahan, meskipun saya pikir Anda harus membaca artikel Eduard Gamonal yang disebutkan di salah satu komentar.