AngularJS: कई एनजी ऐप्स के साथ एक वेब एप्लिकेशन को संरचित करना

40

Blogosphere में AngularJS ऐप स्ट्रक्चरिंग दिशानिर्देशों जैसे (और अन्य) के विषय पर कई लेख हैं:

हालाँकि, दिशानिर्देशों और सर्वोत्तम प्रथाओं के लिए मेरे पास अभी तक एक परिदृश्य है, यह मामला है जहां आपके पास कई "मिनी-स्पा" ऐप वाले एक बड़े वेब एप्लिकेशन हैं, और मिनी-स्पा ऐप सभी एक निश्चित मात्रा में कोड साझा करते हैं।

मैं ng-appएक ही पृष्ठ पर कई घोषणाएँ करने की कोशिश करने के मामले की बात नहीं कर रहा हूँ ; बल्कि, मेरा मतलब है कि एक बड़ी साइट के अलग-अलग हिस्से हैं जिनकी अपनी, अनूठी ng-appघोषणा है।

जैसा कि स्कॉट एलन ने अपने OdeToCode ब्लॉग में लिखा है:

एक परिदृश्य जिसे मैंने बहुत अच्छी तरह से संबोधित नहीं किया है, वह परिदृश्य है जहां एक से अधिक वेब एप्लिकेशन में कई एप्लिकेशन मौजूद हैं और क्लाइंट पर कुछ साझा कोड की आवश्यकता होती है।

क्या इस परिदृश्य से बचने, या इस परिदृश्य की अच्छी नमूना संरचनाओं को लेने के लिए कोई अनुशंसित दृष्टिकोण है, जिसे आप इंगित कर सकते हैं?

अद्यतन -
9/10/2015 एक दिलचस्प संगठन रणनीति के साथ एक परियोजना MEAN.JS और उसके मॉड्यूल फ़ोल्डर है।
https://github.com/meanjs/mean
https://github.com/meanjs/mean/tree/master/meanules

एक अन्य उदाहरण ASP.NET संगीत स्टोर SPA उदाहरण से है। https://github.com/aspnet/MusicStore https://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa/ng-apps

design web-applications angularjs

— mg1075
स्रोत

5

आपने किसके साथ जाने का फैसला किया है? मैं उसी स्थिति में हूं जहां मैं चाहता हूं कि एप्लिकेशन का अलगाव कई छोटे स्व-निहित ऐप्स में टूट जाए

— स्टीफन पैटन

8

यहां वह डिज़ाइन है, जिसके साथ मैं काम करता हूं। मुझे यह उन दो बड़ी परियोजनाओं पर उपयोगी लगा जो मैंने बनाई थी और अब तक किसी भी सड़क ब्लॉक को हिट नहीं किया है।

फ़ोल्डर संरचना

your-project/
  apps/
    global.html
    app1/
      index.html
      app1.module.js
      app1.js
      parts/
        foo.js
        foo.html
        ...
    app2/
  libs
    lib1/
      lib1.module.js
      parts/
        directive1.js
        directive1.html
    lib2/
  third-party/

apps/app1/index.htmlजब कोई अनुरोध /app1आता है, तो खोजने के लिए अपने सर्वर वेब ढांचे को कॉन्फ़िगर करें । यदि आवश्यक हो तो अपने सर्वर तकनीक का उपयोग करके अनुकूल URL (जैसे के the-first-application/बजाय app1/और उन्हें मैप करें) का उपयोग करें।
आपका सर्वर प्रौद्योगिकी को शामिल करना चाहिए global.htmlमें index.htmlहै क्योंकि यह शामिल विक्रेता भी शामिल है (नीचे देखें)।
संबंधित एप्लिकेशन द्वारा आवश्यक संपत्ति शामिल करें index.html(नीचे देखें)।
ng-appजड़ और जड़ को <div ui-view></div>अंदर रखो index.html।
हर ऐप और काम एक अलग कोणीय मॉड्यूल है।
हर ऐप में एक <app-name>.module.jsफ़ाइल मिलती है जिसमें कोणीय मॉड्यूल परिभाषा और निर्भरता सूची होती है।
हर ऐप में एक <app-name>.jsफाइल मिलती है जिसमें मॉड्यूल का कॉन्फिगर और ब्लॉक रन होता है, और राउटिंग कॉन्फिगं का हिस्सा होता है।
प्रत्येक एप्लिकेशन को एक partsफ़ोल्डर मिलता है जिसमें एप्लिकेशन के नियंत्रक, विचार, सेवाएं और निर्देश एक संरचना में होते हैं जो विशिष्ट एप्लिकेशन के लिए समझ में आता है । मैं विचार नहीं करते उप फ़ोल्डरों की तरह controllers/, views/आदि उपयोगी है, क्योंकि वे बड़े पैमाने नहीं है, लेकिन YMMV।
ऐप के रूप में लीब्स उसी संरचना का पालन करते हैं, लेकिन चीजों को छोड़ देते हैं जिनकी उन्हें (स्पष्ट रूप से) आवश्यकता नहीं है।

ऐप के भीतर सेवाओं और निर्देशों के साथ शुरू करें जहां उनका उपयोग किया जाता है। जैसे ही आपको किसी अन्य ऐप में कुछ चाहिए, एक पुस्तकालय में रिफ्लेक्टर। केवल सभी-निर्देशों या सभी-सेवाओं के पुस्तकालयों को कार्यात्मक रूप से सुसंगत लाइब्रेरी बनाने का प्रयास करें।

संपत्ति

मैं रिलीज़ बिल्ड के लिए JS और CSS दोनों फ़ाइलों को छोटा करता हूं, लेकिन विकास के दौरान अघोषित फ़ाइलों के साथ काम करता हूं। यहाँ एक सेटअप है जो इसका समर्थन करता है:

वेंडर को प्रबंधित करें में विश्व स्तर पर शामिल हैं global.html। इस तरह, एसपीए के बीच नेविगेट करते समय भारी सामान को कैश से लोड किया जा सकता है। सुनिश्चित करें कि कैशिंग काम उचित रूप से करें।
प्रति-एसपीए परिसंपत्तियों में परिभाषित किया गया है index.html। इसमें केवल ऐप-विशिष्ट फ़ाइलों के साथ-साथ उपयोग किए गए लाइब्रेरी शामिल होने चाहिए।

ऊपर दिए गए फ़ोल्डर की संरचना में मिनिमाइज़ बिल्ड चरणों के लिए सही फ़ाइलें ढूंढना आसान है।

— theDmi
स्रोत

7

सिंगल पेज एप्स (एसपीए) का वास्तव में उस तरह से उपयोग करने का इरादा नहीं है जो आप एक बहुत बड़े एप्लिकेशन और मुख्य एक के भीतर कई मिनी एसपीए के साथ सुझा रहे हैं। सबसे बड़ी समस्या पृष्ठ लोड समय की होगी क्योंकि सब कुछ सामने लोड करना होगा।

इससे निपटने का एक तरीका एक नेविगेशन पृष्ठ का उपयोग करना है जो आपको व्यक्तिगत एसपीए में ले जाएगा। नेविगेशन पृष्ठ काफी हल्का होगा, और फिर आप केवल एक एसपीए को उस समय के आधार पर लोड करेंगे जो चुना गया था। आप अपने प्रत्येक एसपीए के भीतर नेविगेशन लिंक के साथ एक लिंक बार प्रदान कर सकते हैं ताकि उपयोगकर्ताओं को हमेशा नेविगेशन पृष्ठ पर वापस न जाना पड़े जब उन्हें दूसरे क्षेत्र में जाने की आवश्यकता हो।

इस दृष्टिकोण का उपयोग करके एसपीए में संपूर्ण जानकारी के साथ कुछ चुनौतियां पैदा हो सकती हैं। लेकिन हम कुछ एसपीए के बारे में बात कर रहे हैं जो करने का इरादा नहीं था। कुछ फ्रेमवर्क हैं जो क्लाइंट साइड डेटा दृढ़ता के साथ मदद कर सकते हैं। ब्रीज पहला है जो दिमाग में आता है, लेकिन अन्य हैं।

लेआउट के बारे में - कई प्रोग्रामर आपके विशेष जरूरतों के आधार पर बड़े प्रोजेक्ट लेआउट को संबोधित करते हैं। मैं इस एक और इस एक के पार आया । एसपीए के बारे में कुछ भी जादुई नहीं है जो आपके एप्लिकेशन लेआउट को प्रभावित करेगा जो उन प्रश्नों में पहले से ही उत्तर दिया गया है।

उस ने कहा, अलग-अलग दृष्टिकोण हैं जो विभिन्न परियोजनाओं के लिए सबसे अच्छा काम करते हैं। मैं कोणीय बीज परियोजना द्वारा प्रदान किए गए आधार लेआउट के साथ चिपके रहने की सलाह दूंगा। अपने कस्टम पैकेज और स्रोत कोड के लिए दिए गए से अलग फ़ोल्डर बनाएँ। और अपने स्रोत फ़ोल्डर के भीतर, एक परियोजना लेआउट का उपयोग करें जो आपकी आवश्यकताओं के लिए समझ में आता है।

— समुदाय
स्रोत

-1

यदि आपके आवेदन को एक ही पृष्ठ पर कई एनजी-ऐप घोषणाओं की आवश्यकता है, तो आपको नीचे दिखाए गए अनुसार मॉड्यूल नाम को इंजेक्ट करके मैन्युअल रूप से AngularJS मॉड्यूल बूट करना होगा:

angular.element(document).ready(function() {
  angular.bootstrap(document, ['TodoApp']);
});

यह प्लंकर विस्तृत करता है कि हम मैन्युअल रूप से AngularJS को बूट कैसे कर सकते हैं।

— बसवराज कबूर
स्रोत

5

mg1075 बहुत स्पष्ट था कि यह मामला नहीं है: "मैं एक ही पृष्ठ पर कई एनजी-ऐप घोषणाओं के लिए प्रयास करने के मामले का उल्लेख नहीं कर रहा हूं; बल्कि, मेरा मतलब है कि एक बड़ी साइट के विभिन्न अनुभागों का अपना, अद्वितीय एनजी है; -एप्प घोषणा

— सिनकोडेनाडा