কৌনিক 2 এর সাথে কোন ধরণের ফোল্ডার কাঠামো ব্যবহার করা উচিত?

Question

আমি একজন কৌণিক 1 বিকাশকারী যা কৌণিক 2 সম্পর্কে শিখতে শুরু করছি প্রশিক্ষণের উপাদানের উপর নির্ভর করে প্রচুর বিভিন্ন ফোল্ডার কাঠামো পদ্ধতি রয়েছে। আমি নীচের প্রত্যেকটির তালিকা বদ্ধ করতে যাচ্ছি এবং আমি জনগণের মতামত পেতে চাই যা আমি ব্যবহার করব এবং কেন করব। এছাড়াও, যদি এমন কোনও পদ্ধতি থাকে যা তালিকাভুক্ত না হয় তবে আপনি মনে করেন যে এটি আরও ভাল কাজ করে তবে দয়া করে এটিকে তালিকাবদ্ধ করতে নির্দ্বিধায় অনুভব করুন।

এই সমস্ত কিছু দেখে, পদ্ধতি # 3টি অনেকটা আমি কীভাবে আমার কৌনিক 1 অ্যাপ্লিকেশনগুলি করছিলাম।

পদ্ধতি 1: কৌণিক 2-কুইকস্টার্ট

সূত্র: https://angular.io/guide/quickstart

ফোল্ডার কাঠামো:

পদ্ধতি 2: এনজি-বুক 2

সূত্র: https://www.ng-book.com/2/ (ফাইলগুলি দেখতে অর্থ প্রদান করতে হবে)

ফোল্ডার কাঠামো:

পদ্ধতি 3: মজেচেভ / কৌণিক 2-বীজ

সূত্র: https://github.com/mgechev/angular2- সীড

ফোল্ডার কাঠামো:

Comments

আমি অনুভব করি যে পদ্ধতি 2টি সবচেয়ে কার্যকর কারণ ফাইলগুলি পরে খুঁজে পাওয়া সহজ করার জন্য সমস্ত উপাদান, পরিষেবা ইত্যাদি আলাদা আলাদা ফোল্ডারে রাখা উচিত। এটি একটি খুব জটিল অ্যাপ্লিকেশন মধ্যে সবচেয়ে দক্ষ পদ্ধতি।

— ব্রায়ান

@ ব্রায়ান উত্তরের জন্য ধন্যবাদ, টাইপিং ফোল্ডারের কারণ কী বলে আপনি মনে করেন? অন্য 2 টি পদ্ধতির কোনওটিই এটি ব্যবহার করে না। এছাড়াও, মূল ফাইলটির জন্য আপনার app.ts বনাম main.ts সম্পর্কে কোনও মতামত রয়েছে?

— মেরিন পেটকভ

সুতরাং আমি সম্প্রতি বীজটি ব্যবহার করেছি শৈলী নির্দেশিকা যা এখানে পদ্ধতি 3। আমি কীভাবে এই স্কেলগুলি বিভ্রান্ত করছি, এবং কেন সেখানে একটি ভাগ করা ফোল্ডার রয়েছে? এই কাঠামোর পুরো পয়েন্টটি কি তাই কোনও উপাদান / নির্দেশ / পাইপ / পরিষেবা যে কেউ ভাগ করে নিতে পারে? কীভাবে সহজেই নির্দেশাবলী / পাইপগুলি সন্ধান করতে হয় তা আমার পক্ষে বুঝতে অসুবিধা হয় .. স্টাইল গাইড বিন্যাসের সাহায্যে আপনাকে কেবল এটি কোথায় রয়েছে তা জানতে হবে, বা সেই পরিষেবাটির জন্য প্রতিটি ফোল্ডারে সন্ধান করুন যা আপনি ভেবেছিলেন যে আপনি কেবল গ্রাহকদের জন্য ব্যবহার করবেন এবং এখন আপনি অন্যান্য জিনিস জন্য এটি প্রয়োজন।

— গ্যারি

@ গ্যারি - সুতরাং বীজধারীর জন্য ভাগ করা ফোল্ডারটি আমার গ্রহণযোগ্যতা হ'ল ভাগযুক্তের যে কোনও কিছুই একই ফোল্ডার স্তরে বা যে কোনও উপ ফোল্ডারে অবস্থিত শ্রেণিতে ব্যবহৃত হতে পারে। আপনি যে কোনও ক্লাস ব্যবহার করতে পারেন? অবশ্যই আপনি তা করতে পারেন তবে তারপরে যখন কেউ নতুন আপনার কোড দেখায় তখন তারা জানতে পারবে না কী চলছে। ভাগ করা ভিতরে বিভিন্ন উপাদান / ফোল্ডারগুলির মধ্যে ব্যবহৃত ক্লাস স্থাপন করে এটি পরিষ্কারভাবে প্রোগ্রামারকে জানতে দেয় যে এটি একাধিক জায়গায় ব্যবহৃত হয়েছে।

— মেরিন পেটকভ

আমাদের দলটি সম্প্রতি এই সিদ্ধান্ত প্রক্রিয়াটি পেরেছে

— TheUtherSide

Answer 1

সরকারী নির্দেশিকা এখন সেখানে আছে। mgechev/angular2-seedএটির সাথেও প্রান্তিককরণ ছিল। দেখতে # 857 ।

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

Comments

ফোল্ডারের নামের আগে ডকুমেন্টেশন যেখানে "+" চিহ্ন রাখার পরামর্শ দেয় তা আমি খুঁজে পাচ্ছি না। আমি এর অর্থ কি মনে করতে পারছি না, এর কোন ব্যাখ্যা আছে কি?

— FacundoGFlores

প্রতিটি index.tsফাইলের উদ্দেশ্য কী ? এটা রাউটিং জন্য বোঝানো হয়?

— নিকি

@ ফ্যাকুন্ডোজি ফ্লোরস এর অর্থ এটি উপাদানগুলি অলস বোঝা ed

— charlie_pl

ইনডেক্স.টি ফাইলের জন্য নিকি উদ্দেশ্য হ'ল আমদানি সহজ করা, আপনাকে প্রতিটি ফাইল থেকে আমদানি করতে হবে না, তবে ফোল্ডার থেকে: উদাহরণস্বরূপ 'অ্যাপ / নায়ক / নায়ক' থেকে আমদানি করুন {হিরো, তরোয়াল, শিল্ড

— চার্লি_পিএল

উপরের চিত্রটি এখনই পুরানো। উদাহরণস্বরূপ, এটি "এসসিআর" ফোল্ডারটি দেখায় না, যা "অ্যাপ্লিকেশন" ফোল্ডারের পিতা-মাতা হয়।

— ক্রিস্টোফ

Answer 2

আমি মনে করি প্রকল্পের কার্যকারিতা দ্বারা কাঠামোগত করা একটি ব্যবহারিক পদ্ধতি। এটি প্রকল্পটিকে স্কেলযোগ্য এবং সহজেই রক্ষণাবেক্ষণযোগ্য করে তোলে। এবং এটি প্রকল্পের প্রতিটি অংশকে মোট স্বায়ত্তশাসনে কাজ করে। নীচে এই কাঠামো সম্পর্কে আপনি কী ভাবছেন তা আমাকে জানতে দিন: অ্যাঙ্গুলার টাইপস্রিপ্ট প্রকল্পের স্ট্রাকচার - অ্যাঙ্গুলার 2

উত্স: http://www.angulartypescript.com/angular-typescript-project-st संरचना/

Answer 3

আমি এটি ব্যবহার করতে যাচ্ছি। @ মারিন দেখানো তৃতীয়টির সাথে খুব মিল।

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

Comments

এই উত্তরটি পুরানো। আমি mgechev/angular2-seedএখন আমার 3 টি প্রকল্পের জন্য গিথুব থেকে ব্যবহার করছি । এটি আসাধারন!!!

— সাভারতকর

সাভারতকারের উত্তরটি এখানে সেরা, তবে আমি জেএস, সিএসএস, চিত্র, ফন্ট ... ইত্যাদি যেখানে থাকে সেখানে একটি সম্পদ ফোল্ডার তৈরি করে আরও এগিয়ে যাব।

— ভিসোগোসো

Answer 4

সুতরাং আরও তদন্ত করার পরে আমি পদ্ধতি 3 (মজেচেভ / কৌণিক 2-বীজ) এর কিছুটা সংশোধিত সংস্করণ দিয়ে শেষ করেছিলাম।

আমি মূলত উপাদানগুলি একটি প্রধান স্তরের ডিরেক্টরিতে স্থানান্তরিত করেছি এবং তারপরে প্রতিটি বৈশিষ্ট্যই এর অভ্যন্তরে থাকবে।

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

আমি ইদানীং এনজি ক্লিপ ব্যবহার করছি এবং আমার কোডটি গঠনের জন্য ভাল উপায় খুঁজে পাওয়া সত্যিই শক্ত ছিল।

আমি এখনও অবধি সবচেয়ে দক্ষতার সাথে দেখা করেছি ম্রহোলেক সংগ্রহশালা ( 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: মজেচেভ / কৌণিক 2-বীজ)

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

অফিসিয়াল ডক্স অনুসরণ করা ভাল।
https://angular.io/guide/styleguide#application-structure-and-ngmodules

Answer 8

আমি নিম্নলিখিত কাঠামোর পরামর্শ দিচ্ছি, যা কিছু বিদ্যমান কনভেনশন লঙ্ঘন করতে পারে।

আমি পথে নামটি বাড়াবাড়ি কমাতে সচেষ্ট ছিলাম এবং নামকরণকে সাধারণভাবে ছোট রাখার চেষ্টা করছিলাম।

সুতরাং কোনও অ্যাপ্লিকেশন / উপাদানগুলি / হোম / হোম ডটকম্পোনেন্ট.টিস | এইচটিএমএল | সিএসএস নেই।

পরিবর্তে এটি এর মতো দেখাচ্ছে:

|-- 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