কৌণিক জেএস বীজ: আলাদা ফাইলগুলিতে জাভাস্ক্রিপ্ট স্থাপন করা (অ্যাপ্লিকেশন। জেএস, নিয়ন্ত্রণকারী.জেজেস, ডাইরেক্টিভ.জেএস, ফিল্টার.জেএস, পরিষেবাদি.জেএস)

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

সমস্যাটি আপনার সমস্ত পৃথক ফাইলগুলিতে আপনার অ্যাপ্লিকেশন মডিউলটিকে "redeclaring" করার কারণে তৈরি হয়েছে।

এটি অ্যাপ্লিকেশন মডিউল ঘোষণার (নিশ্চিত নয় যে ঘোষণাটি সঠিক শব্দটি রয়েছে) এর মতো দেখাচ্ছে:

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'); আপনি যখন আপনার কন্ট্রোলারদের ইনস্ট্যান্ট করবেন তখন এটি ওভাররাইট হয়ে যাবে, সম্ভবত আপনি যা চান তা নয় not

Question 4

আপনি ত্রুটি পেয়েছেন কারণ আপনি myApp.servicesএখনও সংজ্ঞায়িত করেন নি। আমি এ পর্যন্ত যা করেছি তা হ'ল সমস্ত প্রাথমিক সংজ্ঞা একটি ফাইলে রাখা এবং তারপরে সেগুলিতে অন্যটিতে ব্যবহার করা। আপনার উদাহরণের মত আমি এই লিখতে হবে:

app.js

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

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

এটির ত্রুটি থেকে মুক্তি পাওয়া উচিত, যদিও আমি মনে করি আপনার এডওয়ার্ড গামোনাল প্রবন্ধটি একটি মন্তব্যে উল্লিখিত হওয়া উচিত ।