AngularJS बीज: जावास्क्रिप्ट को अलग-अलग फाइलों (app.js, नियंत्रकों.js, directives.js, filter.js, services.js) में डाल रहा है।

Question 1

मैं अपने आवेदन की संरचना के लिए कोणीय-बीज टेम्पलेट का उपयोग कर रहा हूं । शुरू में मैं एक एकल फाइल में मेरे सभी जावा स्क्रिप्ट कोड डाल main.js। इस फ़ाइल में मेरा मॉड्यूल घोषणा, नियंत्रक, निर्देश, फ़िल्टर और सेवाएं शामिल थीं। एप्लिकेशन इस तरह ठीक काम करता है, लेकिन मैं स्केलेबिलिटी और मेंटेनेंस को लेकर चिंतित हूं क्योंकि मेरा एप्लिकेशन अधिक जटिल हो गया है। मैंने देखा कि कोणीय-बीज टेम्पलेट में इनमें से प्रत्येक के लिए अलग-अलग फाइलें हैं, इसलिए मैंने main.jsइस प्रश्न में शीर्षक में उल्लिखित अन्य फाइलों में से प्रत्येक में एक फ़ाइल से अपने कोड को वितरित करने का प्रयास किया है और कोणीय की app/jsनिर्देशिका में पाया गया है -साइड टेम्प्लेट।

मेरा सवाल है: मैं काम करने के लिए आवेदन प्राप्त करने के लिए निर्भरता कैसे प्रबंधित करूं? मौजूदा प्रलेखन पाया यहाँ शो को देखते हुए एक भी जावास्क्रिप्ट स्रोत फ़ाइल उदाहरण के प्रत्येक के बाद से इस संबंध में बहुत स्पष्ट नहीं है।

मेरे पास जो है उसका एक उदाहरण है:

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
}

मैं आश्रितों का प्रबंधन कैसे करूँ?

अग्रिम में धन्यवाद।

Question 2

समस्या आपके सभी अलग-अलग फाइलों में आपके एप्लिकेशन मॉड्यूल को "रीडेक्लरिंग" करने के कारण होती है।

यह ऐप मॉड्यूल घोषणा है (निश्चित रूप से घोषणा सही शब्द है) ऐसा दिखता है:

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

आपके आवेदन मॉड्यूल के अनुसार यह असाइनमेंट है (निश्चित नहीं है कि असाइनमेंट सही टर्म है या नहीं):

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

वर्ग कोष्ठक की कमी पर ध्यान दें।

तो, पूर्व संस्करण, एक साथ वर्ग कोष्ठक, केवल आम तौर पर अपनी एक बार इस्तेमाल किया जाना चाहिए, app.jsया main.js। अन्य सभी संबंधित फाइलें - नियंत्रक, निर्देश, फिल्टर ... - बाद वाले संस्करण का उपयोग करना चाहिए, वर्ग कोष्ठक के बिना ।

मुझे उम्मीद है कि इसका कोई अर्थ है। चीयर्स!

Question 3

यदि आप अपने एप्लिकेशन के विभिन्न भागों ( filters, services, controllers) को विभिन्न भौतिक फ़ाइलों में रखना चाहते हैं, तो आपको दो काम करने होंगे:

अपनी app.jsया प्रत्येक फ़ाइल में उन नामस्थान (बेहतर अवधि की कमी के लिए) की घोषणा करें ;
प्रत्येक फ़ाइलों में उन नामस्थानों का संदर्भ लें।

तो, आपका app.jsइस तरह दिखेगा:

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

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

और प्रत्येक व्यक्तिगत फाइल में:

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

यह सब एक कॉल में जोड़ा जा सकता है:

controllers.js

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

महत्वपूर्ण हिस्सा यह है कि आपको फिर से परिभाषित नहीं करना चाहिए angular.module('myApp'); इसका कारण यह होगा कि जब आप अपने नियंत्रकों को तुरंत लिखेंगे, तो यह संभव नहीं होगा कि आप क्या चाहते हैं।

Question 4

आपको त्रुटि मिलती है क्योंकि आपने myApp.servicesअभी तक परिभाषित नहीं किया है। मैंने अभी तक जो कुछ किया है वह सभी प्रारंभिक परिभाषाओं को एक फ़ाइल में डाल रहा है और फिर उन्हें दूसरे में उपयोग करता है। आपके उदाहरण के लिए मैं इसमें डालूंगा:

app.js

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

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

उस त्रुटि से छुटकारा मिलना चाहिए, हालांकि मुझे लगता है कि आपको टिप्पणियों में वर्णित एडुअर्ड गेमोनल के लेख पर एक पढ़ना चाहिए ।