AngularJS çekirdeği: JavaScript'i ayrı dosyalara yerleştirme (app.js, controllers.js, directives.js, filters.js, services.js)

Uygulamamı yapılandırmak için açısal çekirdek şablonunu kullanıyorum . Başlangıçta tüm JavaScript kodumu tek bir dosyaya koyuyorum main.js. Bu dosya benim modül bildirimimi, denetleyicileri, yönergeleri, filtreleri ve hizmetleri içeriyordu. Uygulama böyle iyi çalışıyor, ancak uygulamam daha karmaşık hale geldikçe ölçeklenebilirlik ve sürdürülebilirlik konusunda endişeliyim. Açısal çekirdek şablonunun bunların her biri için ayrı dosyalara sahip olduğunu fark ettim, bu yüzden kodumu tek main.jsdosyadan bu soruya başlıkta belirtilen app/jsve açısal dizinde bulunan diğer dosyaların her birine dağıtmaya çalıştım. tohum şablonu.

Sorum şu: uygulamayı çalıştırmak için bağımlılıkları nasıl yönetirim? Burada bulunan mevcut belgeler , verilen örneklerin her biri tek bir JavaScript kaynak dosyası gösterdiğinden bu konuda çok açık değildir.

Sahip olduğum şeye bir örnek:

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
}

Bağımlılıkları nasıl yönetirim?

Şimdiden teşekkürler.

Sorun, uygulama modülünüzü tüm ayrı dosyalarınızda "yeniden bildirmenizden" kaynaklanır.

Uygulama modülü bildirimi (bildirim doğru terim olduğundan emin değil) şöyle görünür:

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

Uygulama modülünüze atamanın (atamanın doğru terim olup olmadığından emin değilsiniz) şu şekilde görünür:

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

Köşeli parantezlerin eksikliğine dikkat edin.

Bu nedenle, köşeli parantez içeren eski sürüm yalnızca bir kez kullanılmalıdır, genellikle app.jsveya main.js. Diğer tüm ilişkili dosyalar - denetleyiciler, yönergeler, filtreler … - köşeli parantez içermeyen ikinci sürümü kullanmalıdır .

Umarım bu mantıklıdır. Şerefe!

Uygulamanızın farklı bölümlerini ( filters, services, controllers) farklı fiziksel dosyalara koymak istiyorsanız, yapmanız gereken iki şey vardır:

1. Bu ad alanlarını (daha iyi bir terim olmadığı için) sizin app.jsveya her dosyanızın içinde bildirin;
2. Dosyaların her birinde bu ad alanlarına bakın.

Yani, app.jsşuna benzeyeceksin:

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

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

Ve her bir dosyada:

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

Tüm bunlar tek bir aramada birleştirilebilir:

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

Önemli olan, yeniden tanımlamamanız gerektiğidir angular.module('myApp'); bu, denetleyicilerinizi somutlaştırdığınızda üzerine yazılmasına neden olur, muhtemelen istediğinizi değil.

myApp.servicesHenüz tanımlamadığınız için hatayı alıyorsunuz . Şimdiye kadar yaptığım şey, tüm ilk tanımları bir dosyaya koymak ve sonra bunları başka bir dosyada kullanmak. Örneğin sizin örneğiniz için şöyle yazacağım:

app.js

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

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

Bu, hatadan kurtulmalı, ancak yorumlardan birinde bahsedilen Eduard Gamonal makalesini okumalısınız .