मॉड्यूल के गतिशील सेट के साथ एक AngularJS ऐप विकसित करना

Question 1

मेरे पास एक जटिल लेआउट के साथ एक एप्लिकेशन है जहां उपयोगकर्ता (ड्रैग / ड्रॉप) विजेट (100+ विजेट के पूर्वनिर्धारित सेट से चुनकर) रख सकता है जहां हर विजेट एक कस्टम कार्यान्वयन है जो डेटा का एक सेट प्रदर्शित करता है (REST कॉल का उपयोग करके लाया गया) एक विशिष्ट तरीके से। मैंने ब्लॉग पोस्ट, स्टैन्कवरफ़्लो प्रश्न और आधिकारिक AngularJS डॉक्स के कई टन पढ़े हैं, लेकिन मैं यह पता नहीं लगा सकता कि मुझे अपनी आवश्यकताओं को संभालने के लिए अपने आवेदन को कैसे डिज़ाइन करना चाहिए। डेमो ऐप्स को देखते हुए, एक एकल मॉड्यूल (एनजी-ऐप) है और इसका निर्माण करते समय .js फ़ाइल में निर्भर मॉड्यूल को इसकी निर्भरता के रूप में घोषित किया जाता है, हालांकि मेरे पास विगेट्स का एक बड़ा सेट है और किसी तरह उन सभी का वर्णन करना उचित नहीं है। वहाँ। मुझे निम्नलिखित प्रश्नों के लिए शर्करा की आवश्यकता है:

मुझे अपना ऐप और विजेट कैसे डिज़ाइन करने चाहिए - क्या मेरे पास एक अलग एंगुलरजेएस मॉड्यूल होना चाहिए या प्रत्येक विजेट मुख्य मॉड्यूल के लिए एक निर्देश होना चाहिए?
यदि मैं अपने विजेट को निर्देश के रूप में डिजाइन करता हूं, तो क्या एक निर्देश के भीतर निर्भरता को परिभाषित करने का एक तरीका है। Ie कहना है कि मेरा निर्देश इसके कार्यान्वयन में एनजी-कैलेंडर का उपयोग करता है?
यदि मैं प्रत्येक विजेट को एक अलग मॉड्यूल के रूप में डिजाइन करता हूं, तो क्या मुख्य मॉड्यूल की निर्भरता के रूप में विजेट मॉड्यूल को गतिशील रूप से जोड़ने का एक तरीका है?
मुझे नियंत्रकों को कैसे डिज़ाइन करना चाहिए - प्रति विजेट एक नियंत्रक शायद?
यदि मुझे दृश्य में एक ही प्रकार से एकाधिक विजेट हैं, तो मुझे राज्य (गुंजाइश) को कैसे अलग करना चाहिए?
क्या AngularJS के साथ पुन: प्रयोज्य विगेट्स डिजाइन करने के लिए बेस्टप्रैक्टिस हैं?

संपादित करें

उपयोगी संदर्भ:

Question 2

ये सिर्फ सामान्य सलाह हैं।

मुझे अपना ऐप और विजेट कैसे डिज़ाइन करने चाहिए - क्या मेरे पास एक अलग एंगुलरजेएस मॉड्यूल होना चाहिए या प्रत्येक विजेट मुख्य मॉड्यूल के लिए एक निर्देश होना चाहिए?

आप विगेट्स के बारे में बात कर रहे हैं, उन्हें कई मॉड्यूल में विभाजित करना स्वाभाविक लगता है। कुछ विजेट्स अन्य विजेट्स की तुलना में सामान्य रूप से अधिक हो सकते हैं। कुछ बहुत सामान्य हो सकते हैं और अन्य परियोजनाओं में फिट हो सकते हैं, अन्य अधिक विशिष्ट हैं।

यदि मैं अपने विजेट को निर्देश के रूप में डिजाइन करता हूं, तो क्या एक निर्देश के भीतर निर्भरता को परिभाषित करने का एक तरीका है। Ie कहना है कि मेरा निर्देश इसके कार्यान्वयन में एनजी-कैलेंडर का उपयोग करता है?

अन्य मॉड्यूल पर निर्भरता मॉड्यूल स्तर पर की जाती है, लेकिन कोई समस्या नहीं है यदि मॉड्यूल Aमॉड्यूल Bऔर दोनों पर निर्भर करता है Aऔर Bमॉड्यूल पर निर्भर करता है C। कोणीय में विजेट बनाने के लिए निर्देश एक प्राकृतिक विकल्प हैं। यदि एक निर्देश दूसरे निर्देश पर निर्भर करता है, तो आप उन्हें एक ही मॉड्यूल में परिभाषित करते हैं, या एक मॉड्यूलर स्तर पर निर्भरता बनाते हैं।

यदि मैं प्रत्येक विजेट को एक अलग मॉड्यूल के रूप में डिजाइन करता हूं, तो क्या मुख्य मॉड्यूल की निर्भरता के रूप में विजेट मॉड्यूल को गतिशील रूप से जोड़ने का एक तरीका है?

मुझे यकीन नहीं है कि आप ऐसा क्यों करना चाहेंगे, और मुझे यकीन नहीं है कि यह कैसे करना है। कोणीय में उपयोग किए जाने से पहले निर्देश और सेवाओं को प्रारंभ नहीं किया जाता है। यदि आपके पास निर्देशों (विजेट्स) की एक विशाल लाइब्रेरी है और जानते हैं कि आप शायद उनमें से कुछ का उपयोग करेंगे, लेकिन उन सभी में से नहीं - लेकिन आप नहीं जानते कि आवेदन शुरू होने पर आपको किन-किन चीज़ों का उपयोग करना होगा जो आप वास्तव में "आलसी" कर सकते हैं लोड "आपके निर्देश आपके मॉड्यूल लोड होने के बाद। मैंने यहाँ एक उदाहरण बनाया है

लाभ यह है कि यदि आपके पास बहुत सारे कोड हैं, तो भी आप अपने आवेदन को तेजी से लोड करने के लिए प्राप्त कर सकते हैं, क्योंकि आपको स्क्रिप्ट को लोड करने की आवश्यकता नहीं है। नुकसान यह है कि एक नया निर्देश लोड होने पर पहली बार काफी विलंब हो सकता है।

मुझे नियंत्रकों को कैसे डिज़ाइन करना चाहिए - प्रति विजेट एक नियंत्रक शायद?

एक विजेट को संभवतः अपने स्वयं के नियंत्रक की आवश्यकता होगी। नियंत्रकों को आम तौर पर छोटा होना चाहिए, यदि वे बड़े हो जाते हैं तो आप विचार कर सकते हैं कि क्या कोई कार्यक्षमता है जो एक सेवा में बेहतर फिट होगी।

यदि मुझे दृश्य में एक ही प्रकार से एकाधिक विजेट हैं, तो मुझे राज्य (गुंजाइश) को कैसे अलग करना चाहिए?

बिना संदेह के गुंजाइश चर की आवश्यकता वाले विजेट के पास अपने अलग-अलग स्कोप ( scope:{ ... }निर्देश कॉन्फ़िगरेशन में) हैं।

क्या AngularJS के साथ पुन: प्रयोज्य विगेट्स डिजाइन करने के लिए बेस्टप्रैक्टिस हैं?

गुंजाइश को अलग करें, निर्भरता को आवश्यक न्यूनतम तक रखें। एंगुलर में सर्वोत्तम प्रथाओं के बारे में मिस्को का वीडियो देखें

ब्रायन फोर्ड ने कोणीय में एक विशाल एप्लिकेशन लिखने के बारे में एक लेख भी लिखा है

Question 3

यह प्रश्न मेरे लिए भी बहुत महत्वपूर्ण है। AngularJS होमपेज पर इस पर कुछ उदाहरण हैं (आप उन्हें विगेट्स कह सकते हैं) इसलिए मैं उनके सोर्स कोड को आज़माने और देखने के लिए गया कि उन्होंने अपने विजेट्स को अलग कैसे किया।

सबसे पहले, वे कभी भी "एनजी-ऐप" विशेषता घोषित नहीं करते हैं। वे उपयोग करते हैं

function bootstrap() {
      if (window.prettyPrint && window.$ && $.fn.popover && angular.bootstrap &&
          hasModule('ngLocal.sk') && hasModule('ngLocal.us') && hasModule('homepage') && hasModule('ngResource')) {
            $(function(){
              angular.bootstrap(document, ['homepage', 'ngLocal.us']);
            });
      }
    }

यह सुनिश्चित करने के लिए कि सब कुछ सही ढंग से लोड किया गया है। नीट विचार, लेकिन यह अजीब है कि वे एनजी-ऐप विशेषता को आप पर इतना जोर देते हैं, फिर खुद भी इसका उपयोग न करें। वैसे भी यहां होमपेज मॉड्यूल है जिसे वे ऐप के साथ लोड करते हैं - http://angularjs.org/js/homepage.js

एक निर्देश में appRun कहा जाता है

  .directive('appRun', function(fetchCode, $templateCache, $browser) {
    return {
      terminal: true,
      link: function(scope, element, attrs) {
        var modules = [];

        modules.push(function($provide, $locationProvider) {
          $provide.value('$templateCache', {
            get: function(key) {
              var value = $templateCache.get(key);
              if (value) {
                value = value.replace(/\#\//mg, '/');
              }
              return value;
            }
          });
          $provide.value('$anchorScroll', angular.noop);
          $provide.value('$browser', $browser);
          $locationProvider.html5Mode(true);
          $locationProvider.hashPrefix('!');
        });
        if (attrs.module) {
          modules.push(attrs.module);
        }

        element.html(fetchCode(attrs.appRun));
        element.bind('click', function(event) {
          if (event.target.attributes.getNamedItem('ng-click')) {
            event.preventDefault();
          }
        });
        angular.bootstrap(element, modules);
      }
    };
  })

मैं एक उदाहरण के रूप में ToDo सूची का उपयोग करूँगा। Html के लिए, उनके पास है

<div app-run="todo.html" class="well"></div>

और फिर पृष्ठ के निचले भाग में उनके पास है

<script type="text/ng-template" id="todo.html">
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <span>{{remaining()}} of {{todos.length}} remaining</span>
    [ <a href="" ng-click="archive()">archive</a> ]
    <ul class="unstyled">
      <li ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.done">
        <span class="done-{{todo.done}}">{{todo.text}}</span>
      </li>
    </ul>
    <form ng-submit="addTodo()">
      <input type="text" ng-model="todoText"  size="30"
             placeholder="add new todo here">
      <input class="btn-primary" type="submit" value="add">
    </form>
  </div>
</script>

उनके पास भी है

<style type="text/css" id="todo.css"> //style stuff here </style>
<script id="todo.js"> //controller stuff here </script>

कोड का उपयोग किया जाता है, लेकिन ऐप चलाने के लिए उन स्क्रिप्ट पर आईडी विशेषताएँ महत्वपूर्ण नहीं हैं। यह एप्लिकेशन के बाईं ओर स्रोत कोड प्रदर्शन के लिए है।

मूल रूप से, उनके पास एक निर्देश है जिसे appRun कहा जाता है जो एक फ़ंक्शन भ्रूण का उपयोग करता है

  .factory('fetchCode', function(indent) {
    return function get(id, spaces) {
      return indent(angular.element(document.getElementById(id)).html(), spaces);
    }
  })

कोड लाने के लिए। फिर वे एक नया एप्लिकेशन बनाने के लिए कोणीय.बूटस्ट्रैप () का उपयोग करते हैं। ऐप-रन के दौरान वे मॉड्यूल भी लोड कर सकते हैं। जावास्क्रिप्ट प्रोजेक्ट उदाहरण की तरह आरंभिक है

<div app-run="project.html" module="project" class="well"></div>

उम्मीद है कि यह मदद करता है। मुझे अभी भी यकीन नहीं है कि "सर्वश्रेष्ठ" तकनीक क्या है, लेकिन ऐसा प्रतीत होता है जैसे कि AngularJS होमपेज बस प्रत्येक उदाहरण / विजेट के लिए पूरी तरह से अलग कोणीय एप्लिकेशन (एनजी-ऐप) का उपयोग करता है। मुझे लगता है कि मैं ऐसा ही करने जा रहा हूं, AJAX के साथ सामान प्राप्त करने के लिए भ्रूणकोड फ़ंक्शन को छोड़कर।