कोणीय 2 के साथ किस प्रकार की फ़ोल्डर संरचना का उपयोग किया जाना चाहिए?

Question

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

इन सभी को देखकर, विधि # 3 बहुत अधिक है कि मैं अपने कोणीय 1 एप्लिकेशन को कैसे कर रहा था।

विधि 1: कोणीय 2-क्विकार्टार्ट

स्रोत: https://angular.io/guide/quickstart

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

विधि 2: एनजी-बुक 2

स्रोत: https://www.ng-book.com/2/ (फाइलों को देखने के लिए भुगतान करना होगा)

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

विधि 3: mgechev / angular2-seed

स्रोत: https://github.com/mgechev/angular2-seed

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

Comments

मुझे लगता है कि विधि 2 सबसे अधिक कुशल है क्योंकि सभी घटकों, सेवाओं, आदि को बाद में फ़ाइलों को खोजने के लिए आसान बनाने के लिए अलग-अलग फ़ोल्डरों में रखा जाना चाहिए। यह एक बहुत ही जटिल ऐप में सबसे कुशल तरीका है।

— ब्रायन

उत्तर @Bryan के लिए धन्यवाद, आपको क्या लगता है कि टाइपिंग फ़ोल्डर का कारण क्या है? अन्य 2 विधियों में से कोई भी इसका उपयोग नहीं करता है। इसके अलावा, क्या आपके पास मुख्य फ़ाइल के लिए app.ts बनाम main.ts पर एक राय है?

— मैरिन पेटकोव

इसलिए मैं जो बीज उपयोग कर रहा हूं वह हाल ही में स्टाइल गाइड में गया है जो यहां मेथड 3 है। मैं उलझन में हूँ कि यह तराजू कैसे है, और एक साझा फ़ोल्डर क्यों है? इस ढांचे का पूरा बिंदु नहीं है ताकि किसी भी घटक / निर्देश / पाइप / सेवा को किसी के द्वारा साझा किया जा सके? मेरे लिए यह समझना मुश्किल है कि निर्देश / पाइप आसानी से कैसे खोजे जा सकते हैं .. शैली गाइड प्रारूप के साथ आपको बस यह जानना होगा कि यह कहाँ स्थित है, या उस फ़ोल्डर में हर उस चीज़ को देखें जो आपने सोचा था कि आप केवल ग्राहकों के लिए उपयोग करेंगे और अब आप यह अन्य सामान के लिए की जरूरत है।

— गैरी

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

— मारिन पेटकोव

हमारी टीम हाल ही में इस निर्णय प्रक्रिया से गुजरी

— TheUtherSide

Answer 1

आधिकारिक गाइडलाइन अभी है। mgechev/angular2-seedइसके साथ भी संरेखण था। # 857 देखें ।

https://angular.io/guide/styleguide#overall-structural-guidelines

Comments

मुझे नहीं मिल रहा है कि जहां दस्तावेज़ फ़ोल्डर नाम से पहले "+" चिह्न लगाने का सुझाव देता है। मुझे याद नहीं है कि इसका क्या मतलब है, क्या कोई स्पष्टीकरण है?

— फेसुंडोफ्लोरेस

प्रत्येक index.tsफ़ाइल का उद्देश्य क्या है ? क्या यह रूटिंग के लिए है?

— निकी

@FacundoGFlores इसका मतलब है कि घटक आलसी लोडेड हैं।

— चार्ली_प्ल

Index.ts फ़ाइलों के लिए @Nicky उद्देश्य आयात को आसान बनाने के लिए है, आपको प्रत्येक फ़ाइल से आयात नहीं करना है, लेकिन फ़ोल्डर से: उदाहरण के लिए 'ऐप / हीरो / हीरो' से {हीरो, तलवार} आयात करें

— charlie_pl

ऊपर की छवि अब तक पुरानी है। उदाहरण के लिए, यह "src" फ़ोल्डर नहीं दिखाता है, जो "ऐप" फ़ोल्डर का माता-पिता बन जाता है।

— क्रिस्टोफ

Answer 2

मुझे लगता है कि फंक्शनलिटीज द्वारा प्रोजेक्ट को तैयार करना एक व्यावहारिक तरीका है। यह परियोजना को आसानी से स्केलेबल और रखरखाव योग्य बनाता है। और यह परियोजना के प्रत्येक भाग को कुल स्वायत्तता में काम करता है। मुझे पता है कि आप इस संरचना के बारे में क्या सोचते हैं: ANGULAR TYPESCRIPT परियोजना संरचना - ANGULAR 2

स्रोत: http://www.angulartypescript.com/angular-typescript-project-structure/

Answer 3

मैं इस एक का उपयोग करने जा रहा हूँ। @Marin द्वारा दिखाए गए तीसरे के समान।

app
|
|___ images
|
|___ fonts
|
|___ css
|
|___ *main.ts*
|   
|___ *main.component.ts*
|
|___ *index.html*
|
|___ components
|   |
|   |___ shared
|   |
|   |___ home
|   |
|   |___ about
|   |
|   |___ product
|
|___ services
|
|___ structures

Comments

यह उत्तर पुराना है। मैं mgechev/angular2-seedअपने 3 प्रोजेक्ट्स के लिए अब github का उपयोग कर रहा हूं। यह बढ़िया है!!!

— सावरकर

सावरकर का जवाब यहाँ सबसे अच्छा है, हालाँकि मैं एक एसेट्स फ़ॉरेस्ट बनाकर आगे जाऊँगा जहाँ js, css, images, फोंट ... आदि रहते हैं।

— vicgoyso

Answer 4

इसलिए अधिक जांच करने के बाद मैंने मेथड 3 (mgechev / angular2-seed) के थोड़े संशोधित संस्करण के साथ जाना समाप्त कर दिया।

मैंने मूल रूप से एक मुख्य स्तर की निर्देशिका होने के लिए घटकों को स्थानांतरित किया और फिर प्रत्येक सुविधा इसके अंदर होगी।

Answer 5

शायद इस संरचना की तरह कुछ:

|-- app
     |-- modules
       |-- home
           |-- [+] components
           |-- pages
              |-- home
              |-- home.component.ts|html|scss|spec
           |-- home-routing.module.ts
           |-- home.module.ts
     |-- core
       |-- authentication
           |-- authentication.service.ts|spec.ts
       |-- footer
           |-- footer.component.ts|html|scss|spec.ts
       |-- guards
           |-- auth.guard.ts
           |-- no-auth-guard.ts
           |-- admin-guard.ts 
       |-- http
           |-- user
               |-- user.service.ts|spec.ts
           |-- api.service.ts|spec.ts
       |-- interceptors
           |-- api-prefix.interceptor.ts
           |-- error-handler.interceptor.ts
           |-- http.token.interceptor.ts
       |-- mocks
           |-- user.mock.ts
       |-- services
           |-- srv1.service.ts|spec.ts
           |-- srv2.service.ts|spec.ts
       |-- header
           |-- header.component.ts|html|scss|spec.ts
       |-- core.module.ts
       |-- ensureModuleLoadedOnceGuard.ts
       |-- logger.service.ts
     |-- shared
          |-- components
              |-- loader
                  |-- loader.component.ts|html|scss|spec.ts
          |-- buttons
              |-- favorite-button
                  |-- favorite-button.component.ts|html|scss|spec.ts
              |-- collapse-button
                  |-- collapse-button.component.ts|html|scss|spec.ts
          |-- directives
              |-- auth.directive.ts|spec.ts
          |-- pipes
              |-- capitalize.pipe.ts
              |-- safe.pipe.ts
     |-- configs
         |-- app-settings.config.ts
         |-- dt-norwegian.config.ts
     |-- scss
          |-- [+] partials
          |-- _base.scss
          |-- styles.scss
     |-- assets

Answer 6

मैं हाल ही में एनजी क्ली का उपयोग कर रहा हूं, और मेरे कोड को तैयार करने का एक अच्छा तरीका खोजना वास्तव में कठिन था।

अब तक मैंने जो सबसे कुशल देखा है वह mrholek रिपॉजिटरी ( https://github.com/mrholek/CoreUI-Angular ) से आता है ।

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

इसके अलावा, यह संरचना समूह आयात के लिए उपयोगी है जब इसकी आवश्यकता होती है और किसी एकल फ़ाइल के लिए आयात की 30 पंक्तियाँ होने से बचती हैं।

src
|
|___ app
|
|   |___ components/shared
|   |   |___ header
|   |
|   |___ containers/layout
|   |   |___ layout1
|   |
|   |___ directives
|   |   |___ sidebar
|   |
|   |___ services
|   |   |___ *user.service.ts* 
|   | 
|   |___ guards
|   |   |___ *auth.guard.ts* 
|   |
|   |___ views
|   |   |___ about  
|   |
|   |___ *app.component.ts*
|   |
|   |___ *app.module.ts*
|   |
|   |___ *app.routing.ts*
|
|___ assets
|
|___ environments
|
|___ img
|   
|___ scss
|
|___ *index.html*
|
|___ *main.ts*

Answer 7

यदि प्रोजेक्ट छोटा है और छोटा रहेगा, तो मैं संरचना के आधार पर सिफारिश करूंगा (विधि 2: एनजी-बुक 2)

app
|- components
|  |- hero
|  |- hero-list
|  |- villain
|  |- ...
|- services
|  |- hero.service.ts
|  |- ...
|- utils
|- shared

यदि प्रोजेक्ट बढ़ेगा तो आपको अपने फोल्डर को डोमेन द्वारा संरचना करना चाहिए (विधि 3: mgechev / angular2-seed)

app
|- heroes
|  |- hero
|  |- hero-list
|  |- hero.service.ts
|- villains
|  |- villain
|  |- ...
|- utils
|- shared

आधिकारिक डॉक्स का पालन करने के लिए बेहतर है।
https://angular.io/guide/styleguide#application-structure-and-ngmodules

Answer 8

मैं निम्नलिखित संरचना का सुझाव देता हूं, जो कुछ मौजूदा सम्मेलनों का उल्लंघन कर सकती है।

मैं मार्ग में नाम अतिरेक को कम करने का प्रयास कर रहा था, और सामान्य रूप से नामकरण कम रखने की कोशिश कर रहा था।

तो कोई / app / Components / home / home.component.ts | html | css नहीं है।

इसके बजाय यह इस तरह दिखता है:

|-- app
    |-- users
        |-- list.ts|html|css
        |-- form.ts|html|css
    |-- cars
        |-- list.ts|html|css
        |-- form.ts|html|css
        |-- configurator.ts|html|css
    |-- app.component.ts|html|css
    |-- app.module.ts
    |-- user.service.ts
    |-- car.service.ts
|-- index.html
|-- main.ts
|-- style.css