AngularJS फ़ोल्डर संरचना [बंद]

Question

आप एक बड़े और स्केलेबल AngularJS एप्लिकेशन के लिए एक फ़ोल्डर संरचना कैसे लेआउट करते हैं?

Comments

एक सुझाव github.com/jofftiquez/angular-app-starter-pack

— CENT1PEDE

Answer 1

प्रकार के आधार पर छाँटें

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

फ़ीचर द्वारा क्रमबद्ध (पसंदीदा)

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

एक अच्छी तरह से लिखा ब्लॉग पोस्ट: http://www.johnpapa.net/angular-growth-structure/

उदाहरण ऐप: https://github.com/angular-app/angular-app

Comments

क्या आप इसे पोस्ट करने के बाद अपने प्रश्न का सही उत्तर दे रहे हैं?

— जैकब

जब आप सवाल बनाते हैं तो @Jakub "विकी का योगदान देने वाले आपके अपने प्रश्न का उत्तर" नामक एक विकल्प होता है।

— माइकल जे। कैलकिंस

@ मायकिलकल्किंस, मुझे विचार पसंद है। मैं सिर्फ अपने youtube tuts में से कुछ को कोणीय पर भी देखता हूँ, अच्छा

— Ronnie

@ रॉनी मुझे सिर्फ इतना याद है कि एंगुलरजेएस के लिए सबसे कठिन सीखने के चरणों में से एक है, इसलिए उम्मीद है कि यह लोगों की मदद करेगा। मुझे लगता है कि मैं ब्लॉग पढ़ने के बाद 10 अलग-अलग लेआउट की तरह गया और क्या नहीं।

— माइकल जे। कैलकिंस

यहाँ एक समुदाय-संचालित कोणीयJS सर्वोत्तम अभ्यास पृष्ठ है। उनका फ़ाइल संरचना सुझाव दो उदाहरणों में आपके दोनों विचारों का एक संयोजन है। मुझे दूसरा उदाहरण बेहतर लगता है क्योंकि यह फीचर द्वारा छांटने के विचार के पीछे है।

— जॉन

Answer 2

कुछ अनुप्रयोगों के निर्माण के बाद, कुछ में सिम्फनी-पीएचपी, कुछ .NET एमवीसी, कुछ आरओआर, मैंने पाया है कि मेरे लिए सबसे अच्छा तरीका एंगुलरजेएस जनरेटर के साथ येओमन.आईओ का उपयोग करना है ।

यह सबसे लोकप्रिय और आम संरचना है और सबसे अच्छी तरह से बनाए रखा है।

और सबसे महत्वपूर्ण बात, उस संरचना को रखकर, यह आपके क्लाइंट साइड कोड को अलग करने और सर्वर-साइड तकनीक (सभी प्रकार के अलग-अलग फ़ोल्डर संरचनाओं और अलग-अलग सर्वर-साइड टेंपलेटिंग इंजनों) को अज्ञेय बनाने में आपकी मदद करता है।

इस तरह से आप आसानी से अपना और दूसरों का कोड डुप्लिकेट और पुन: उपयोग कर सकते हैं।

यहाँ यह ग्रन्ट बिल्ड से पहले है: (लेकिन तुर्क जनरेटर का उपयोग करें, बस इसे न बनाएं!)

/app
    /scripts
            /controllers
            /directives
            /services
            /filters
            app.js
    /views
    /styles
    /img
    /bower_components
    index.html
bower.json

और ग्रंट बिल्ड के बाद (कंकट, कुसुइल, रेव, आदि ...):

    /scripts
        scripts.min.js (all JS concatenated, minified and grunt-rev)
        vendor.min.js  (all bower components concatenated, minified and grunt-rev)
    /views
    /styles
        mergedAndMinified.css  (grunt-cssmin)
    /images
    index.html  (grunt-htmlmin)

Comments

यह कोड के रूट ब्लॉक का कॉन्फ़िगरेशन कहां होना चाहिए? angular.module('myApp').config(function($routeProvider) { ... });

— खेल

+1 इसके अलावा, आप यह अनुकूलित कर सकते हैं कि जहां तुर्क अपना सामान रखे। IMHO, बड़े ऐप्स में फ़ीचर / मॉड्यूल के आधार पर छँटाई करना बेहतर है क्योंकि आप अन्य ऐप्स में फ़ीचर का आसानी से पुनः उपयोग कर सकते हैं।

— टिवी

Answer 3

मुझे कोणीय संरचना के बारे में यह प्रविष्टि पसंद है

यह एक कोणीयज डेवलपर्स द्वारा लिखा गया है, इसलिए आपको एक अच्छी जानकारी देनी चाहिए

यहाँ एक अंश है:

root-app-folder
├── index.html
├── scripts
│   ├── controllers
│   │   └── main.js
│   │   └── ...
│   ├── directives
│   │   └── myDirective.js
│   │   └── ...
│   ├── filters
│   │   └── myFilter.js
│   │   └── ...
│   ├── services
│   │   └── myService.js
│   │   └── ...
│   ├── vendor
│   │   ├── angular.js
│   │   ├── angular.min.js
│   │   ├── es5-shim.min.js
│   │   └── json3.min.js
│   └── app.js
├── styles
│   └── ...
└── views
    ├── main.html
    └── ...

Comments

प्रश्न फ़ोल्डर संरचना के बारे में है और यद्यपि लिंक अन्य तरीकों से दिलचस्प है, यह इस प्रश्न के लिए तालिका में कुछ भी नया नहीं लाता है।

— JohnC

यह

— योमन

इसलिए आपने स्क्रिप्ट के प्रकार से फ़ोल्डर व्यवस्थित किया है।

— ट्यूडर

Answer 4

फोल्डर को व्यवस्थित करने का तरीका भी ढांचा की संरचना से नहीं, बल्कि अनुप्रयोग के कार्य की संरचना से है। एक जीथब स्टार्टर एंगुलर / एक्सप्रेस एप्लिकेशन है जो इसे कोणीय-ऐप कहा जाता है ।

Comments

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

— क्रिस्टोफ रूसो

Answer 5

मैं अपने तीसरे एंगुलरज एप्लिकेशन पर हूं और फ़ोल्डर संरचना में अब तक हर बार सुधार हुआ है। मैं अभी अपने को सरल रखता हूं।

index.html (or .php)
/resources
  /css
  /fonts
  /images
  /js
    /controllers
    /directives
    /filters
    /services
  /partials (views)

मुझे लगता है कि सिंगल ऐप्स के लिए अच्छा है। मेरे पास वास्तव में एक परियोजना नहीं है, जहां मुझे कई की आवश्यकता होगी।

Comments

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

— जसीम अब्बास

क्या मैं यह सोचने में सही हूं कि Angular JS में कोई मानक प्रोजेक्ट फ़ोल्डर संरचना या प्रोजेक्ट टेम्प्लेट नहीं है, जैसे कि asp.net वेब प्रोजेक्ट या विंडोज़ डेस्कटॉप एप्लिकेशन?

@dotNetBlackBelt जो सही है। कोणीय होने पर कोई मानक नहीं है। इसे पोस्ट करने के बाद से, मैंने अपने फ़ोल्डरों को कैसे सेटअप किया है, इसमें बदलाव किए हैं। मेरा आखिरी प्रोजेक्ट मैं कमोबेश इस ओपी का शीर्ष उत्तर गया

— रॉनी