AngularJS: একাধিক এনজি-অ্যাপ্লিকেশন সহ একটি ওয়েব অ্যাপ্লিকেশন স্ট্রাকচারিং

40

এই ব্লগস্ফিয়ারে অ্যাংুলারজেএস অ্যাপের কাঠামোগত গাইডলাইন যেমন (এবং অন্যদের) বিষয়ে একাধিক নিবন্ধ রয়েছে:

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

আমি ng-appএকই পৃষ্ঠায় একাধিক ঘোষণা করার চেষ্টা করার ক্ষেত্রে উল্লেখ করছি না ; বরং, আমি বলতে চাইছি একটি বৃহত সাইটের বিভিন্ন বিভাগ যার নিজস্ব, অনন্য ng-appঘোষণা রয়েছে।

স্কট অ্যালেন যেমন তাঁর ওডিটোকোড ব্লগে লিখেছেন :

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

গ্রহণের জন্য কোনও প্রস্তাবিত পন্থা, সমস্যাগুলি এড়াতে সমস্যাগুলি বা এই দৃশ্যের ভাল নমুনা কাঠামো রয়েছে যা আপনি নির্দেশ করতে পারেন?

আপডেট - 9/10/2015
একটি আকর্ষণীয় সংস্থা কৌশল সহ একটি প্রকল্প হ'ল MEAN.JS এবং এর মডিউলগুলির ফোল্ডার।
https://github.com/meanjs/mean
https://github.com/meanjs/mean/tree/master/modules

আর একটি উদাহরণ এএসপি.নেট মিউজিক স্টোর এসপিএর উদাহরণ থেকে। https://github.com/aspnet/MusicStore https://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa/ng-apps

design web-applications angularjs

— mg1075
সূত্র

5

আপনি কি সাথে যেতে সিদ্ধান্ত নিয়েছেন? আমি একই অবস্থানে রয়েছি যেখানে আমি অ্যাপ্লিকেশনটি বিচ্ছিন্ন করে অনেকগুলি স্ব-সংযুক্ত অ্যাপ্লিকেশনগুলিতে বিভক্ত করতে চাই

— স্টিফেন প্যাটেন

8

আমি যে ডিজাইনের সাথে কাজ করি তা এখানে। আমি যে দুটি বৃহত প্রকল্প তৈরি করেছি তার জন্য এটি দরকারী বলে মনে করেছি এবং এখনও পর্যন্ত কোনও সড়ক ব্লককে আঘাত করি নি।

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

your-project/
  apps/
    global.html
    app1/
      index.html
      app1.module.js
      app1.js
      parts/
        foo.js
        foo.html
        ...
    app2/
  libs
    lib1/
      lib1.module.js
      parts/
        directive1.js
        directive1.html
    lib2/
  third-party/

এটি আপনার সার্ভারে ওয়েব ফ্রেমওয়ার্ক কনফিগার করুন apps/app1/index.htmlযখন জন্য একটি অনুরোধ /app1যেমন আসে। বন্ধুত্বপূর্ণ URL গুলি ব্যবহার ( the-first-application/পরিবর্তে app1/এবং আপনার সার্ভারে প্রযুক্তি ব্যবহার করে তাদের ম্যাপ প্রয়োজনে।
আপনার সার্ভার প্রযুক্তি অন্তর্ভুক্ত করা আবশ্যক global.htmlমধ্যে index.htmlকারণ এটা রয়েছে বিক্রেতা অন্তর্ভুক্ত (নিচে দেখুন)।
এ সম্পর্কিত অ্যাপ্লিকেশন দ্বারা প্রয়োজনীয় সম্পদ অন্তর্ভুক্ত index.html(নীচে দেখুন)।
রাখুন ng-appএবং মূল <div ui-view></div>মধ্যে index.html।
প্রতিটি অ্যাপ্লিকেশন এবং lib একটি পৃথক কৌণিক মডিউল।
প্রতিটি অ্যাপ্লিকেশন <app-name>.module.jsএমন একটি ফাইল পায় যাতে কৌণিক মডিউল সংজ্ঞা এবং নির্ভরতা তালিকা থাকে।
প্রতিটি অ্যাপ্লিকেশন <app-name>.jsএমন একটি ফাইল পায় যাতে মডিউলগুলির কনফিগার এবং রান ব্লক এবং তার অংশ হিসাবে রাউটিং কনফিগার থাকে।
প্রতিটি অ্যাপ্লিকেশন partsএমন একটি ফোল্ডার পায় যা অ্যাপ্লিকেশনগুলির নিয়ন্ত্রক, ভিউ, পরিষেবাদি এবং নির্দিষ্ট অ্যাপ্লিকেশনটির জন্য অর্থবোধ করে এমন একটি কাঠামোর নির্দেশনাগুলিকে ধারণ করে । আমি বিবেচনা না উপ-ফোল্ডারের মত controllers/, views/ইত্যাদি সহায়ক, কারণ তারা আকার পরিবর্তন না, কিন্তু YMMV।
লিবস অ্যাপ্লিকেশনগুলির মতো একই কাঠামো অনুসরণ করে তবে এমন জিনিস ছেড়ে দেয় যা তাদের প্রয়োজন হয় না (স্পষ্টতই)।

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

সম্পদ

রিলিজ বিল্ডগুলির জন্য আমি জেএস এবং সিএসএস উভয় ফাইলকেই সংক্ষিপ্ত করে রাখি তবে উন্নয়নের সময় অবিযুক্ত ফাইলের সাথে কাজ করি। এখানে একটি সেটআপ যা এটি সমর্থন করে:

পরিচালনা করুন বিক্রেতা বিশ্বব্যাপী অন্তর্ভুক্ত global.html। এই ভাবে, এসপিএগুলির মধ্যে নেভিগেট করার সময় ভারী স্টাফ ক্যাশে থেকে লোড করা যায়। ক্যাশে যথাযথভাবে কাজ করে তা নিশ্চিত করুন।
প্রতি এসপিএ সম্পদগুলি সংজ্ঞায়িত করা হয় index.html। এটিতে কেবল অ্যাপ্লিকেশন-নির্দিষ্ট ফাইলগুলির পাশাপাশি ব্যবহৃত গ্রন্থাগারগুলি অন্তর্ভুক্ত করা উচিত।

উপরের ফোল্ডার কাঠামোটি মিনিফিকেশন বিল্ড স্টেপগুলির জন্য সঠিক ফাইলগুলি সন্ধান করা সহজ করে তোলে।

— theDmi
সূত্র

7

একক পৃষ্ঠাগুলি অ্যাপ্লিকেশন (এসপিএ) আপনি যেভাবে একটি বৃহত অ্যাপ্লিকেশন এবং মূল একের মধ্যে একাধিক মিনি-এসপিএ দিয়ে পরামর্শ দিচ্ছেন সেভাবে ব্যবহার করার জন্য এটি সত্যই নয়। সবচেয়ে বড় সমস্যা হ'ল পৃষ্ঠা লোড বার হ'ল সবকিছুকে সামনে আপ লোড করতে হবে।

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

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

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

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

— সম্প্রদায়
সূত্র

-1

যদি আপনার অ্যাপ্লিকেশনটির একই পৃষ্ঠায় একাধিক এনজি-অ্যাপ্লিকেশন ঘোষণার প্রয়োজন হয়, তবে আপনাকে ম্যানুয়ালি অ্যাংুলারজেএস মডিউলটি বুটস্ট্র্যাপ করতে হবে, মডিউলের নামটি ইনজেকশনের মাধ্যমে নীচের মত দেখানো হয়েছে:

angular.element(document).ready(function() {
  angular.bootstrap(document, ['TodoApp']);
});

আমরা ম্যানুয়ালি অ্যাঙ্গুলারজেএস কীভাবে বুটস্ট্রেপ করতে পারি তার বিশদভাবে এই নিমজ্জনকারীটি ব্যাখ্যা করে।

— বাসভরাজ কাবুরে
সূত্র

5

এমজি 1075 বেশ স্পষ্ট ছিল যে এটি নয়: "আমি একই পৃষ্ঠায় একাধিক এনজি-অ্যাপ্লিকেশন ঘোষণার চেষ্টা করার ক্ষেত্রে উল্লেখ করছি না, বরং আমি বলতে চাইছি একটি বৃহত সাইটের বিভিন্ন বিভাগ যার নিজস্ব, অনন্য এনজিও রয়েছে -অ্যাপ্লিকেশন ঘোষণা। "

— সিনকোনেডা