মডিউল ঘোষণার জন্য AngularJS সেরা অনুশীলন?

Question

আমার অ্যাপে আমার কাছে একগুচ্ছ কৌণিক মডিউল ঘোষিত হয়েছে। আমি মূলত এটিকে "চেইনযুক্ত" সিনট্যাক্স ব্যবহার করে এগুলি ঘোষণা করতে শুরু করেছি:

angular.module('mymodule', [])
    .controller('myctrl', ['dep1', function(dep1){ ... }])
    .service('myservice', ['dep2', function(dep2){ ... }])
    ... // more here

তবে আমি সিদ্ধান্ত নিয়েছি যে এটি পড়া খুব সহজ ছিল না, তাই আমি এই জাতীয় মডিউল ভেরিয়েবল ব্যবহার করে তাদের ঘোষণা করতে শুরু করি:

var mod = angular.module('mymodule', []);

mod.controller('myctrl', ['dep1', function(dep1){ ... }]);

mod.service('myservice', ['dep2', function(dep2){ ... }]);
...

দ্বিতীয় সিনট্যাক্সটি আমার কাছে অনেক বেশি পঠনযোগ্য বলে মনে হয় তবে আমার একমাত্র অভিযোগ হ'ল এই বাক্যবিন্যাসটি modবৈশ্বিক পরিমণ্ডলে পরিবর্তনশীলটিকে ছেড়ে যায় । যদি আমার কাছে অন্য কোনও ভেরিয়েবলের নাম modথাকে তবে এটি পরবর্তী এক (এবং বৈশ্বিক ভেরিয়েবলগুলির সাথে সম্পর্কিত অন্যান্য সমস্যাগুলি) দিয়ে ওভাররাইড হয়ে যাবে।

সুতরাং আমার প্রশ্ন, এটি কি সেরা উপায়? অথবা এরকম কিছু করা ভাল কি ?:

(function(){
    var mod = angular.module('mymod', []);
    mod.controller('myctrl', ['dep1', function(dep1){ ... }]);
    mod.service('myservice', ['dep2', function(dep2){ ... }]);
    ...
})();

নাকি যত্ন নেওয়ার পক্ষেও যথেষ্ট ব্যাপার? "সেরা অনুশীলনগুলি" মডিউল ঘোষণার জন্য কী তা জানতে আগ্রহী। আগাম ধন্যবাদ.

Comments

আমি

— কৌনিক

Answer 1

মডিউল ঘোষণা করার 'সেরা' উপায়

যেহেতু কৌণিক বৈশ্বিক স্কোপটিতে রয়েছে এবং মডিউলগুলি তার পরিবর্তনশীলটিতে সংরক্ষণ করা হয় আপনি এর মাধ্যমে মডিউলগুলি অ্যাক্সেস করতে পারবেন angular.module('mymod'):

// one file
// NOTE: the immediately invoked function expression 
// is used to exemplify different files and is not required
(function(){
   // declaring the module in one file / anonymous function
   // (only pass a second parameter THIS ONE TIME as a redecleration creates bugs
   // which are very hard to dedect)
   angular.module('mymod', []);
})();


// another file and/or another anonymous function
(function(){   
 // using the function form of use-strict...
 "use strict";
  // accessing the module in another. 
  // this can be done by calling angular.module without the []-brackets
  angular.module('mymod')
    .controller('myctrl', ['dep1', function(dep1){
      //..
    }])

  // appending another service/controller/filter etc to the same module-call inside the same file
    .service('myservice', ['dep2', function(dep2){ 
    //... 
    }]);

  // you can of course use angular.module('mymod') here as well
  angular.module('mymod').controller('anothermyctrl', ['dep1', function(dep1){
      //..
  }])
})();

অন্য কোনও গ্লোবাল ভেরিয়েবলের প্রয়োজন নেই।

অবশ্যই এটি সমস্ত পছন্দগুলির উপর নির্ভর করে তবে আমি মনে করি এটি সর্বোত্তম অনুশীলনের মতো

1. আপনি বৈশ্বিক সুযোগ দূষিত করতে হবে না
2. আপনি আপনার মডিউলগুলি সর্বত্র অ্যাক্সেস করতে পারেন এবং তাদের এবং তাদের ফাংশনগুলিকে ইচ্ছামত বিভিন্ন ফাইলগুলিতে বাছাই করতে পারেন
3. আপনি "কঠোর ব্যবহার" এর ফাংশন-ফর্মটি ব্যবহার করতে পারেন;
4. ফাইলগুলির লোডিং ক্রমটি ততটা গুরুত্বপূর্ণ নয়

আপনার মডিউল এবং ফাইল বাছাই করার জন্য বিকল্প

মডিউলগুলি ঘোষণা এবং অ্যাক্সেস করার এই উপায় আপনাকে খুব নমনীয় করে তোলে। আপনি ফাংশন-টাইপ (যেমন অন্য উত্তরে বর্ণিত) বা রুটের মাধ্যমে মডিউলগুলি বাছাই করতে পারেন:

/******** sorting by route **********/    
angular.module('home')...
angular.module('another-route')...
angular.module('shared')...

আপনি কীভাবে শেষ পর্যন্ত এটি সাজান তা ব্যক্তিগত স্বাদ এবং প্রকল্পের স্কেল এবং ধরণের বিষয়। আমি ব্যক্তিগতভাবে একই ফোল্ডারের ভিতরে থাকা মডিউলটির সমস্ত ফাইল (নির্দেশ, নিয়ন্ত্রণকারী, পরিষেবাদি এবং ফিল্টারগুলির সাব-ফোল্ডারগুলিতে অর্ডার করা) সহ সমস্ত ভিন্ন টেস্ট-ফাইলগুলি অন্তর্ভুক্ত করতে চাই, কারণ এটি আপনার মডিউলগুলি আরও পুনরায় ব্যবহারযোগ্য করে তোলে। সুতরাং মাঝারি আকারের প্রকল্পগুলিতে আমি বেস-মডিউলটি দিয়ে শেষ করি, যার মধ্যে সমস্ত মৌলিক রুট এবং তাদের নিয়ন্ত্রক, পরিষেবা, নির্দেশাবলী এবং আরও কম কম সাব-মডিউল অন্তর্ভুক্ত থাকে, যখন আমি মনে করি তারা অন্যান্য প্রকল্পের জন্যও কার্যকর হতে পারে, যেমন :

/******** modularizing feature-sets **********/
/controllers
/directives
/filters
/services
/my-map-sub-module
/my-map-sub-module/controllers
/my-map-sub-module/services
app.js
...

angular.module('app', [
  'app.directives',
  'app.filters',
  'app.controllers',
  'app.services',
  'myMapSubModule'
]);

angular.module('myMapSubModule',[
   'myMapSubModule.controllers',
   'myMapSubModule.services',
   // only if they are specific to the module
   'myMapSubModule.directives',
   'myMapSubModule.filters'
]);

খুব বড় প্রকল্পগুলির জন্য, আমি মাঝে মাঝে উপরে বা কিছু নির্বাচিত প্রধান রুটগুলি এমনকি রাস্তার এবং কিছু নির্বাচিত উপাদানগুলির সংমিশ্রণ অনুসারে রুটগুলি দ্বারা গ্রুপিং মডিউলগুলি শেষ করি, তবে এটি সত্যই নির্ভর করে।

সম্পাদনা: কারণ এটি সম্পর্কিত এবং আমি খুব সম্প্রতি এটিতে ছুটে এসেছি: ভাল যত্ন নিন যে আপনি কেবল একবারই মডিউল তৈরি করেছেন (কৌণিক.মডিউল-ফাংশনে দ্বিতীয় প্যারামিটার যুক্ত করে)। এটি আপনার অ্যাপ্লিকেশনটিকে বিশৃঙ্খলা করবে এবং এটি সনাক্ত করা খুব শক্ত।

মডিউলগুলি বাছাইয়ের জন্য 2015 সম্পাদনা: পরে কৌণিক-অভিজ্ঞতার দেড় বছর পরে, আমি যুক্ত করতে পারি যে আপনার অ্যাপ্লিকেশনটির মধ্যে আলাদাভাবে নামযুক্ত মডিউলগুলি ব্যবহারের সুবিধাগুলি কিছুটা সীমাবদ্ধ কারণ এএমডি এখনও কৌণিক এবং পরিষেবাদি, নির্দেশিকা এবং ফিল্টারগুলির সাথে সত্যিই ভাল কাজ করে না বিশ্বব্যাপী কৌণিক প্রেক্ষাপটের ভিতরে যেভাবেই পাওয়া যায় ( যেমন উদাহরণ হিসাবে এখানে )। এখনও একটি শব্দার্থক এবং কাঠামোগত সুবিধা আছে এবং এটি কোডের একক লাইনের সাথে মন্তব্য করা বা বাইরে মডিউলটি অন্তর্ভুক্ত / বাদ দিতে সক্ষম হতে পারে।

সাধারণত সাধারণত একে অপরের উপর নির্ভরশীল হওয়ায় এটি টাইপ করে উপ-মডিউলগুলি পৃথক করার পক্ষে প্রায়শই বোঝা যায় না । (যেমন: 'মাইম্যাপসডমডিউলকন্ট্রোলার')।

Comments

আপনার আইআইএফই (তাত্ক্ষণিকভাবে অনুরোধ করা ফাংশন এক্সপ্রেশন) দরকার নেই, ওরফে বেনামে স্ব সম্পাদনকারী ফাংশন

— প্লাস-

তুমি ঠিক বলছো. আপনি কেবল তখনই প্রয়োজন যখন আপনি "কঠোরভাবে ব্যবহার করুন" এর ফাংশন-ফর্মটি প্রয়োগ করতে চান; আঘাত না যদিও।

— হুগো ডের হাঞ্জিজেজ

বেশিরভাগ ক্ষেত্রে আপনি 'use strict';নিজের উপাদানটির ভিতরেও রাখতে পারেন। module.controller(function () { 'use strict'; ... });

— জ্যাকসন

আমি বাস্তবায়ন পছন্দ করি, তবে আমি শৃঙ্খলাবদ্ধ হওয়ার কোনও মজাও পাই না, তাই আমি এটির সাথে মিশ্রণ করছি বেতেরবা যা করছেন

— মিরকো

এএমডি ব্যবহার করার সময়, অ্যাপ্লিকেশন নামের একটি একক মডিউলই যথেষ্ট। প্রয়োজনীয় স্টেটমেন্ট মোছার মাধ্যমে একটি এএমডি মডিউল বাদ দিতে পারে। এবং আমাদের আর কোনও নিয়ামক এবং পরিষেবা নিবন্ধকরণ করার দরকার নেই।

— জেমস

Answer 2

আমি জনপাপা দ্বারা কৌণিক- স্টাইলগাইড পছন্দ করি এবং এই প্রশ্নের সাথে সম্পর্কিত কিছু বিধি এখানে রয়েছে:

বিধি: নামকরণ বনাম বেনামি কার্যাদি

বেনামে ফাংশন ব্যবহার করা এড়িয়ে চলুন:

// dashboard.js
angular
  .module('app')
  .controller('Dashboard', function() { })

পরিবর্তে, নামযুক্ত ফাংশন ব্যবহার করুন:

// dashboard.js
angular
  .module('app')
  .controller('Dashboard', Dashboard);

function Dashboard() { }

লেখক যেমন বলেছেন: This produces more readable code, is much easier to debug, and reduces the amount of nested callback code.

বিধি: প্রতি ফাইলের জন্য 1 উপাদান সংজ্ঞায়িত করুন।

একটি ফাইলে একাধিক উপাদান এড়িয়ে চলুন:

angular
  .module('app', ['ngRoute'])
  .controller('SomeController', SomeController)
  .factory('someFactory', someFactory);

function SomeController() { }

function someFactory() { }

নিয়মিত, মডিউলটি সংজ্ঞায়িত করতে একটি ফাইল ব্যবহার করুন:

// app.module.js
angular
  .module('app', ['ngRoute']);

একটি ফাইল কেবল একটি উপাদান সংজ্ঞায়িত করতে মডিউলটি ব্যবহার করে

// someController.js
angular
  .module('app')
  .controller('SomeController', SomeController);

function SomeController() { }

এবং অন্য একটি উপাদান অন্য উপাদান সংজ্ঞায়িত করতে

// someFactory.js
angular
  .module('app')
  .factory('someFactory', someFactory);

function someFactory() { }

অবশ্যই, মডিউল, নিয়ন্ত্রক এবং পরিষেবাগুলির জন্য আরও অনেক বিধি রয়েছে যা যথেষ্ট দরকারী এবং পড়ার জন্য মূল্যবান।

এবং ya_dimon মন্তব্য করার জন্য ধন্যবাদ, উপরের কোডটি আইআইএফইতে মোড়ানো উচিত, উদাহরণস্বরূপ:

(function (window, angular) {
  angular.module('app')
   .controller('Dashboard', function () { });
})(window, window.angular);

Comments

ভাল উত্তর এবং দুর্দান্ত লিঙ্ক।

— এলেসিলেডিল

আমার কাছে যদি বিভিন্ন জাভাস্ক্রিপ্ট ফাইলগুলিতে বিভিন্ন কন্ট্রোলার থাকে তবে এটি বেশি সংখ্যক ফাইলের লোড প্রয়োজন যেমন আরও সার্ভার হিট?

— বিগনেশ সুব্রহ্মণ্যিয়ান

এগুলিকে গল্প বা গ্রুর্ট, ভিগনেশ, এবং ব্যক্তিগতভাবে আমি গল্প পছন্দ করে তাদের সাথে মার্জ / অগ্লিফাই / নতুন নামকরণ করা বেশ সহজ।

— অ্যাকিংসও

আপনি যোগ করতে ভুলে গেছেন যে এই সমস্ত স্নিপেটগুলি আইআইএফইতে থাকা উচিত, অন্যথায় আপনার বিশ্বব্যাপী "সামান্য কারখানা ()" এর মতো ফাংশন রয়েছে। নামের সংঘর্ষের সুযোগ রয়েছে। (এবং আপনাকে এসআইএআইআইএফই প্রয়োজন হবে না)

— ইয়া_ডিমন

Answer 3

আমি সম্প্রতি এই কনড্রামও ছিল। আপনি যেমন শৃঙ্খলিত বাক্য গঠন ব্যবহার করেছিলেন ঠিক তেমনই আমি শুরু করেছিলাম, তবে দীর্ঘকালীন সময়ে এটি বড় প্রকল্পগুলির সাথে অনর্থক হয়ে যায়। সাধারণত আমি একটি নিয়ামক মডিউল, একটি পরিষেবা মডিউল এবং আরও আলাদা আলাদা ফাইলগুলিতে তৈরি করতাম এবং সেগুলিকে অন্য একটি ফাইলে পাওয়া আমার মূল অ্যাপ্লিকেশন মডিউলে ইনজেকশন করতাম। উদাহরণ স্বরূপ:

// My Controllers File
angular.module('my-controllers',[])
    .controller('oneCtrl',[...])
    .controller('twoCtrl',[...]);

// My Services File
angular.module('my-services',[])
    .factory('oneSrc',[...])
    .facotry('twoSrc',[...]);

// My Directives File
angular.module('my-directives',[])
    .directive('oneDrct',[...])
    .directive('twoDrct',[...]);

// My Main Application File
angular.module('my-app',['my-controllers','my-services','my-directives',...]);

কিন্তু প্রকল্পটি বাড়ার সাথে সাথে এই ফাইলগুলির একটি একটিরও বড় আকারের পথ পাচ্ছিল। তাই আমি প্রতিটি নিয়ামক বা পরিষেবার ভিত্তিতে এগুলি পৃথক ফাইলগুলিতে বিভক্ত করার সিদ্ধান্ত নিয়েছি। আমি দেখেছি যে angular.module('mod-name').ইনজেকশন অ্যারে ব্যবহার না করে, এটি কাজ করার জন্য আপনার যা প্রয়োজন। একটি ফাইলে বিশ্বব্যাপী ভেরিয়েবল ঘোষণা করা এবং অন্য যেটিতে সহজেই পাওয়া যায় তা আশা করা ঠিক কাজ করে না বা অপ্রত্যাশিত ফলাফল হতে পারে।

সুতরাং সংক্ষেপে আমার অ্যাপ্লিকেশনটি এরকম কিছু লাগছিল:

// Main Controller File
angular.module('my-controllers',[]);

// Controller One File
angular.module('my-controllers').controller('oneCtrl',[...]);

//Controller Two File
angular.module('my-controllers').controller('twoCtrl',[...]);

আমি সার্ভিস ফাইলে এটিও করেছি, আপনি যে মূল অ্যাপ্লিকেশন মডিউল ফাইলটি এখনও একই মডিউলগুলিতে ইনজেকশন করতে চান তা পরিবর্তন করার দরকার নেই।

Comments

পরিষেবা / নির্দেশ / নিয়ন্ত্রণকারীদের জন্য পৃথক মডিউল তৈরি করার বিষয়টি কী?

— ফিলিপ সোবকজাক

বড় প্রকল্পগুলিতে যখন কন্ট্রোলার / ফিল্টার / নির্দেশিকা / পরিষেবাগুলি সমস্ত একসাথে ইন্টারলিভ করা থাকে তখন জিনিসগুলি পাওয়া শক্ত হয়ে যেতে পারে। জিনিসগুলিকে সংগঠিত রাখার এটি কেবল একটি উপায়।

— মেকনরোয়

@ ফিলিপসোবাকজাক সে পরিষেবা / নির্দেশ / নিয়ন্ত্রণকারীদের জন্য পৃথক মডিউল তৈরি করছে না। বরং তিনি একবার ব্যবহার করেই মডিউলটি তৈরি করেছেনangular.module('my-controllers',[]); (দ্রষ্টব্য যে তিনি [] কেবলমাত্র ঘোষণার জন্য নির্দিষ্ট করে দিচ্ছেন)। অন্য ফাইলগুলিতে তিনি কেবল এটি পুনরায় ব্যবহার করছেন। ফাইলগুলির পৃথকীকরণ প্রজেক্টটি বজায় রাখা তুলনামূলকভাবে সহজ করে তোলে, বিশেষত বড়গুলি।

— ডেভনার 4'16

Answer 4

অন্য একটি অনুশীলন হ'ল স্টাফ কন্ট্রোলার, নির্দেশিকা ইত্যাদি তাদের নিজস্ব মডিউলগুলিতে করা এবং সেই মডিউলগুলি আপনার "প্রধান" একটিতে ইনজেক্ট করুন:

angular.module('app.controllers', [])
  .controller('controller1', ['$scope', function (scope) {
    scope.name = "USER!";
  }]);

angular.module('app.directives', [])
  .directive('myDirective', [function () {
    return {
      restrict: 'A',
      template: '<div>my directive!</div>'
    }
  }]);

angular.module('app', [
  'app.controllers',
  'app.directives'
]);

বিশ্বব্যাপী সুযোগে কিছুই অবশিষ্ট নেই।

http://plnkr.co/edit/EtzzPRyxWT1MkhK7KcLo?p=preview

Comments

আপনি কেন মডিউল নাম হিসাবে app.controllersinsted ব্যবহার করছেন controllers, কোন সুবিধা আছে? আমি Angularjs এ একজন নবাগত

— সিজো বিজয়ন

Answer 5

আমি আমার ফাইল এবং আমার মডিউলগুলি ভাগ করতে চাই।

এটার মতো কিছু:

app.js

var myApp = angular.module('myApp', ['myApp.controllers', 'myApp.directives', 'myApp.services']);

myApp.config(['$routeProvider', function($routeProvider) {
    /* routes configs */
    $routeProvider.when(/*...*/);
}]);

directives.js

var myDirectives = angular.module('myApp.directives', []);

myDirectives.directive( /* ... */ );

service.js,

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

myServices.factory( /* ... */ );

আমি "শৃঙ্খলিত শৈলীর" খুব বড় অনুরাগী নই, তাই আমি সর্বদা আমার পরিবর্তনশীলটি লিখতে পছন্দ করি।

Comments

আমি এটি এইভাবেই করছিলাম তবে প্রতিটি পরিষেবাদি.জেএস বা কন্ট্রোলআরজেএস ফাইল বড় আকারের প্রকল্পে দ্রুত গতিতে পায়, শেষ পর্যন্ত আপনাকে প্রতিটি পরিষেবা বা নিয়ামককে পৃথক ফাইলের বাইরে ভাঙতে হবে।

— মেকনরোয়ে

নিবন্ধন করুন জিনিসটি আরও বড় হয়ে ওঠার পরে, আমি নির্দেশটিকে ছোট মডিউলগুলিতে বিভক্ত করতে এবং তারপরে "মূল" নির্দেশিক মডিউলটিতে ইনজেকশন করতে চাই।

— 13:53 এ বেতারবাবা

Answer 6

আমি Angularjs স্টাইল গাইড অনুসরণ করার পরামর্শ দিই ।
তারা আপনার অ্যাপ্লিকেশনকে আরও আধুনিককরণ করতে নামকরণের কনভেনশন থেকে সমস্ত ধারণা পরিচালনা করে।

কৌণিক 2 এর জন্য, আপনি কৌনিক 2 স্টাইল গাইড পরীক্ষা করতে পারেন

Answer 7

আমার জন্য, শৃঙ্খলা সবচেয়ে কমপ্যাক্ট উপায়:

angular.module("mod1",["mod1.submod1"])

 .value("myValues", {
   ...
 })

 .factory("myFactory", function(myValues){
   ...
 })

 .controller("MainCtrl", function($scope){

   // when using "Ctrl as" syntax
   var MC = this;
   MC.data = ...;
 })
 ;

এইভাবে আমি সহজেই মডিউলগুলির মধ্যে উপাদানগুলি সরাতে পারি, কখনই একই মডিউলটি দু'বার ঘোষণা করার দরকার নেই, কোনও গ্লোবাল ভেরিয়েবলের দরকার নেই।

এবং যদি ফাইলটি খুব দীর্ঘ হয়ে যায়, সমাধানটি সহজ - দুটি ফাইলে বিভক্ত করুন, প্রতিটি শীর্ষে নিজের নিজস্ব মডিউল ঘোষণা করছেন। আরও স্বচ্ছতার জন্য, আমি প্রতি ফাইলের জন্য একটি অনন্য মডিউল রাখার চেষ্টা করি এবং এটির নামটি ফাইলের পুরো পথের সাথে সাদৃশ্যপূর্ণ রাখার চেষ্টা করি। এইভাবেও আমাকে ছাড়া কোনও মডিউল লেখার দরকার নেই [], এটি একটি সাধারণ ব্যথার বিষয়।