কৌণিক জেএস ফোল্ডার কাঠামো [বন্ধ]


186

একটি বৃহত এবং স্কেলযোগ্য AngularJS অ্যাপ্লিকেশনটির জন্য আপনি কীভাবে একটি ফোল্ডার কাঠামো বিন্যাস করবেন?


একটি পরামর্শ github.com/jofftiquez/angular-app-starter-pack
CENT1PEDE

উত্তর:


251

এখানে চিত্র বর্ণনা লিখুন

প্রকার অনুসারে বাছাই করুন

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

বৈশিষ্ট্য অনুসারে বাছাই করুন (পছন্দসই)

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

একটি ভাল লিখিত ব্লগ পোস্ট: http://www.jhnpapa.net/angular-growth-st संरचना/

উদাহরণ অ্যাপ: https://github.com/angular-app/angular-app


22
আপনি নিজের পোস্ট পোস্ট করার পরে উত্তর দিচ্ছেন?
Jakub

34
@ জাকুব আপনি যখন প্রশ্ন তৈরি করবেন তখন "উইকিতে অবদান রেখে নিজের নিজের প্রশ্নের উত্তর দিন" বলে একটি বিকল্প রয়েছে।
মাইকেল জে। ক্যালকিনস

3
@ মিশেলক্যালকিনস, আমি ধারণাটি পছন্দ করি। আমি আপনার কিছু ইউটিউব টুটগুলি কৌনিক উপর খুব ভাল করে দেখেছি, দুর্দান্ত
রনি

5
@ রনি আমি কেবল মনে করি এটি অ্যাঙ্গুলারজেএস-এর সবচেয়ে শক্ত শেখার বক্ররেখার অন্যতম পদক্ষেপ তাই আশা করি এটি লোকদের সাহায্য করবে। আমার মনে হয় আমি ব্লগ পড়ার পরে 10 টি ভিন্ন লেআউটের মতো পেরিয়েছি এবং কী নয়।
মাইকেল জে। ক্যালকিনস

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

32

কয়েকটি অ্যাপ্লিকেশন তৈরির পরে, কিছু সিম্ফনি-পিএইচপি, কিছু। নেট এমভিসি, কিছু আরওআর, আমি খুঁজে পেয়েছি যে আমার জন্য সবচেয়ে ভাল উপায় অ্যাঙ্গুলারজেএস জেনারেটরের সাথে ইয়েমেন.ইও ব্যবহার করা ।

এটি সর্বাধিক জনপ্রিয় এবং সাধারণ কাঠামো এবং সেরা রক্ষণাবেক্ষণ।

এবং সর্বাধিক গুরুত্বপূর্ণভাবে, সেই কাঠামোটি রেখে, এটি আপনাকে আপনার ক্লায়েন্টের সাইড কোডটি পৃথক করতে এবং এটিকে সার্ভার-সাইড প্রযুক্তিতে (সমস্ত ধরণের বিভিন্ন ফোল্ডার কাঠামো এবং বিভিন্ন সার্ভার-সাইড টেম্প্লেটিং ইঞ্জিনগুলি) তৈরি করতে সহায়তা করে।

আপনি নিজের এবং অন্যদের কোডটি সহজেই সদৃশ করতে এবং পুনরায় ব্যবহার করতে পারেন।

এখানে এটি গ্রুর্ট বিল্ডের আগে: (তবে ইওমেন জেনারেটরটি ব্যবহার করুন, কেবল এটি তৈরি করবেন না!)

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

1
এটি কোডের ব্লক রুটগুলির কনফিগারেশন কোথায় হওয়া উচিত? angular.module('myApp').config(function($routeProvider) { ... });
স্পোর্টস

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

30

আমি Angularjs কাঠামো সম্পর্কে এই এন্ট্রি পছন্দ করি

এটি একটি কৌণিক বিকাশকারী দ্বারা রচিত, সুতরাং আপনাকে একটি ভাল অন্তর্দৃষ্টি দেওয়া উচিত

এখানে একটি অংশ:

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
    └── ...

1
প্রশ্নটি ফোল্ডার কাঠামো সম্পর্কে এবং যদিও লিঙ্কটি অন্যান্য উপায়ে আকর্ষণীয়, তবে এটি এই প্রশ্নের জন্য টেবিলে নতুন কিছু এনেছে না।
জনসি


সুতরাং আপনি স্ক্রিপ্ট টাইপ দ্বারা ফোল্ডার সংগঠিত করেছেন।
টিউডর

4

ফোল্ডারগুলি কাঠামোর কাঠামোর দ্বারা নয়, তবে অ্যাপ্লিকেশনটির কার্যকারিতার কাঠামোর দ্বারা সংগঠিত করার পদ্ধতিও রয়েছে। একটি গিথুব স্টার্টার অ্যাঙ্গুলার / এক্সপ্রেস অ্যাপ্লিকেশন রয়েছে যা এই নামক কৌণিক অ্যাপ্লিকেশনটিকে চিত্রিত করে ।


এটি প্রায়শই খুব বড় প্রকল্পগুলির জন্য একটি ভাল পদ্ধতির। দুর্ভাগ্যক্রমে আমরা এখনও ফোল্ডার কাঠামোর সাথে আটকে আছি ... ট্যাগিং আরও ভাল হবে তাই এটি এতটা গুরুত্বপূর্ণ না এবং ট্যাগগুলির উপর নির্ভর করে আমাদের একাধিক মতামত থাকতে পারে।
ক্রিস্টোফ রাউসি 21'16

3

আমি আমার তৃতীয় অ্যাঙ্গুলার অ্যাপ্লিকেশনটিতে আছি এবং এখন পর্যন্ত প্রতিবার ফোল্ডারের কাঠামো উন্নত হয়েছে। আমি এখনই আমার সরল রাখি।

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

আমি একক অ্যাপ্লিকেশনগুলির জন্য এটি ভাল খুঁজে পাই। আমার সত্যিই এখনও কোনও প্রকল্প হয়নি যেখানে আমার একাধিক প্রয়োজন।


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

আমি কি এই ভেবেই ঠিক আছি যে অ্যাঙ্গুলার জেএসের কোনও এসপ নেট ওয়েব প্রকল্প বা উইন্ডোজের ডেস্কটপ অ্যাপ্লিকেশনের মতো কোনও প্রমিত প্রকল্প ফোল্ডার কাঠামো বা প্রকল্পের টেম্পলেট নেই?

1
@ dotNetBlackBelt এটি সঠিক। কৌণিকের ক্ষেত্রে এটির কোনও মান নেই। এটি পোস্ট করার পরে, আমি কীভাবে আমার ফোল্ডারগুলি সেটআপ করব তার মধ্যে পরিবর্তন করেছি। আমার শেষ প্রকল্পটি আমি কমপক্ষে গিয়েছিলাম এই ওপিটির শীর্ষস্থানীয় উত্তরটি কী
রনি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.