अनुशंसित स्केलेबल AngularJS परियोजना संरचना?

Question

मैंने कई AngularJS प्रोजेक्ट टेम्पलेट्स को देखा है: आधिकारिक वेबसाइट पर Yeoman जेनरेट किया गया है, और AngularFun।

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

करके स्केलेबल मेरा मतलब है

• अपनी फ़ाइलों में नियंत्रकों, निर्देशों, फिल्टर, आदि विभाजित करने के लिए सक्षम किया जा रहा;
• ब्राउज़र को सबकुछ लोड करने के बजाय इन फ़ाइलों को मांग पर लोड करने में सक्षम होना;
• सामान्य, क्रॉस-प्रोजेक्ट घटक (जैसे सामान्य निर्देश, फ़िल्टर या सेवाएं) रखने में सक्षम होना।

Answer 1

आप एक डेमो आवेदन पर एक नज़र है कि पावेल कोज़लोवस्की और मैं एक साथ लगा रहे हैं ले जा सकते हैं: https://github.com/angular-app/angular-app।

यह मांग पर फ़ाइलों को लोड करने के लिए कोई समर्थन प्रदान नहीं करता है लेकिन आप देख सकते हैं कि हम अलग-अलग फ़ाइलों में मॉड्यूल थूकते हैं और प्रथम श्रेणी घटक के रूप में परीक्षण सेट अप करते हैं। हमारे पास एक बिल्ड प्रक्रिया है (ग्रंट का उपयोग करके) जो जेएस फाइलों को रिहा करता है (और रिलीज पर छोटा करता है) और यूनिट चला सकता है और अंत परीक्षणों को समाप्त कर सकता है।

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

यह एक कार्यात्मक क्षेत्र के खिलाफ विकास को आसान बनाता है क्योंकि सभी प्रासंगिक आइटम एक ही स्थान पर हैं।

प्रोजेक्ट फ़ाइलों को वितरित करने के लिए एक साधारण नोडजेएस सर्वर पर निर्भर करता है (एचटीएमएल 5 मोड गहरी लिंकिंग का समर्थन करता है) और प्रमाणीकरण और प्राधिकरण सेवाएं भी प्रदान करता है।

Answer 2

मैं कहूंगा कि आपके सभी बिंदुओं को कम से कम एंगुलर में किसी भी संशोधन के बिना, आसानी से प्राप्त किया जा सकता है।

• अपनी फ़ाइलों में नियंत्रकों, निर्देशों, फिल्टर, आदि विभाजित करने के लिए सक्षम किया जा रहा;

इस, पाठ्यक्रम बुनियादी कोणीय के साथ किया की हो सकती है के रूप में आप चाहते हैं के रूप में आप नियंत्रक/सेवाओं के साथ के रूप में कई स्क्रिप्ट टैग शामिल कर सकते हैं। बेशक यह स्केलेबल नहीं है, इसलिए सबसे अच्छा विकल्प एएमडी मॉड्यूल का उपयोग करेगा, जैसे कि RequJS। यह बीज इस प्रकार का कॉन्फ़िगरेशन है में से एक है: https://github.com/elsom25/angular-requirejs-html5boilerplate-seed

• बल्कि ब्राउज़र लोड सब कुछ कर रही है की तुलना में मांग पर इन फ़ाइलों को लोड करने में सक्षम किया जा रहा है;

रूप pkozlowski टिप्पणी में सुझाव दिया है, वहाँ पहले से ही है और इस समस्या से कुछ विवरण के साथ प्रवेश, आपको लगता है कि मैं भी इस को हल करने के काम कर रहा था, और वास्तव में कुछ परिणाम था देखेंगे।I have a working example of loading controllers, templates and directives on demand using RequireJS और मार्ग कॉन्फ़िगरेशन के पैरामीटर को हल करें।

• पिछले अंक का समाधान करने के बाद RequireJs मॉड्यूल का उपयोग कर हासिल किया यह आसानी से हो सकता है आम, पार परियोजना घटकों (जैसे आम निर्देशों, फिल्टर या सेवाओं)

करने में सक्षम किया जा रहा।

---

मैं सोच रहा हूं कि एक agularjs-आलसी बीज परियोजना शुरू करना एक अच्छा विचार होगा? क्या इसके लिए कोई मांग है? हम इसे आगे ले जा सकते हैं और सामान्य कॉन्फ़िगरेशन के बाहर मार्ग कॉन्फ़िगरेशन को ले जा सकते हैं, मान लीजिए कि आपके पास एक दृश्य है। जेसन फ़ाइल (आदर्श रूप से एक सेवा जो जेसन के साथ प्रतिक्रिया करती है) जिन दृश्यों को आप अपने आवेदन में शामिल करना चाहते हैं:

{ 
    "views" : { 
     .... 
     "account" : {    
      "path" : "/account" // route path 
      "name" : "Account", // view name 
      "partial" : "views/account/account.html", // partial file 
      "controller" : "account/main" // RequireJS module 
      "directives" : [ "directives/version", "directives/menu" ] // directives used in the view 
     } 
     .... 
    } 
} 

इस तरह से आप कर सकते थे:

• जुदाई और निर्माण में विचारों का विकास इस json के आधार पर आवेदन
• bootstrap कुछ सामान्य निर्देशों और घटक
• जब बूटस्ट्रैप प्रवेश के बाद आप कर सकते थे विचारों को फ़िल्टर उपयोगकर्ता ngView अंदर
• सब कुछ देखने के लिए अनुमति दी है कि मांग पर लोड किया जाएगा

बेशक

अपने आवेदन तो वास्तव में बड़ा होना चाहिए ताकि इस अतिरिक्त काम भावना बनाया होगा सब करने के;)

Answer 3

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

बस सोचा कि मैं खुलासा करता हूं कि हम ओपन सोर्स hawtio प्रोजेक्ट में क्या कर रहे हैं जो AngularJS पर आधारित है। हमने मॉड्यूलरिटी को थोड़ी चरम पर ले लिया है :) hawtio plugins का उपयोग करता है जिसे चलने वाले सर्वर में रनटाइम पर खोजा जा सकता है (उदाहरण के लिए रनटाइम पर यूआई फ़ंक्शंस को तैनात और अवांछित करें)। तो कुछ आरईएसटी क्वेरी या जेएमएक्स पहचान के आधार पर हम गतिशील रूप से और प्लगइन को हटा सकते हैं।

उदा। यहाँ हैं सब हमारे current default plugins

लेआउट के संदर्भ में, प्रत्येक प्लगइन कोड (जे एस), एचटीएमएल partials (html) और कुछ और (जैसे सीएसएस/img निर्देशिका) जो यह चीजों को अच्छा रखने के लिए आसान हो जाता है के लिए अपने स्वयं निर्देशिका है और मॉड्यूलर। जैसे यहां camel plugin है जिसका अपना HTML, जेएस और आईएमजी फ़ोल्डर्स है।

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

हम अब तक स्रोत फ़ाइलों के लिए बहुत उपयोगी naming conventions के साथ नहीं आए हैं :)। हमें प्रति फ़ाइल एक फ़ाइल लिखना सरल लगता है; लेकिन fooPlugin.ts फ़ाइल और helpers.ts फ़ाइल के अलावा (सामान्य मॉड्यूल विशिष्ट सहायक कार्यों के लिए) हमें अब तक कोई अन्य सार्थक नामकरण सम्मेलन नहीं मिला है।

Answer 4

आपको एनजी-बॉयलरप्लेट का प्रयास करना चाहिए।बड़ा AngularJS परियोजनाओं के लिए सबसे होनहार किकस्टार्ट टेंपलेट: http://joshdmiller.github.io/ng-boilerplate/#/home

Answer 5

इस परियोजना लगता है होनहार http://vesparny.github.io/ng-kickstart

यह आप एक कस्टम ग्रंट काम करने के लिए धन्यवाद livereloading के रूप में सुविधा के द्वारा अपने codebase विभाजित है और अपने कोड पुन: प्रयोज्य रखने के लिए, साथ ही साथ में सक्षम बनाता है उसके लिए।

प्रोजेक्ट यूनिट परीक्षण उन्मुख है और एक कस्टम "डिस्ट टास्क" के साथ आता है जो आपको एक अनुकूलित, उत्पादन तैयार रिलीज बनाने देता है।

Answer 6

चेतावनी: लापरवाही प्लग।

आपको निश्चित रूप से generator-angular-xl देखें।

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