কৌণিক-রুট এবং কৌণিক-ইউআই-রাউটারের মধ্যে পার্থক্য কী?


1080

আমি আমার বড় অ্যাপ্লিকেশনগুলিতে অ্যাঙ্গুলারজেএস ব্যবহার করার পরিকল্পনা করছি । সুতরাং আমি সঠিকভাবে সঠিক মডিউলগুলি ব্যবহার করার জন্য প্রক্রিয়াটি করছি in

এনজিআরউট (কৌণিক-রুট.জেএস) এবং ইউআই-রাউটার (কৌণিক-ইউআই-রাউটার.জেএস) মডিউলগুলির মধ্যে পার্থক্য কী ?

অনেক নিবন্ধে যখন এনজিআরউট ব্যবহৃত হয়, রুটটি $ রুটপ্রোভাইডার দিয়ে কনফিগার করা হয় । তবে, যখন ইউআই-রাউটারের সাথে ব্যবহৃত হয় , রুটটি $ statePovider এবং $ urlRouterProvider দিয়ে কনফিগার করা হয় ।

উন্নত পরিচালনা ও এক্সটেনসিবিলিটির জন্য আমার কোন মডিউল ব্যবহার করা উচিত?


11

উত্তর:


1112

ইউআই-রাউটার একটি তৃতীয় পক্ষের মডিউল এবং এটি খুব শক্তিশালী। এটি সাধারণ এনজিআরউটের পাশাপাশি অনেকগুলি অতিরিক্ত ক্রিয়াকলাপকে সমর্থন করে।

এনজিআরউটের মাধ্যমে ইউআই-রাউটারটি বেছে নেওয়ার কিছু সাধারণ কারণ এখানে রয়েছে:

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

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

  • ডেকোরেটরটির ধারণাটিও রয়েছে যা অ্যাক্সেস করার চেষ্টা করা URL এর উপর ভিত্তি করে আপনার রুটগুলিকে গতিশীলভাবে তৈরি করার অনুমতি দেওয়ার জন্য ব্যবহার করা যেতে পারে। এর অর্থ হ'ল হাত দেওয়ার আগে আপনাকে আপনার সমস্ত রুট নির্দিষ্ট করতে হবে না।

  • রাজ্যগুলি আপনাকে বিভিন্ন রাজ্য সম্পর্কে বিভিন্ন তথ্য ম্যাপ করতে এবং অ্যাক্সেস করতে দেয় এবং আপনি সহজেই রাষ্ট্রগুলির মধ্যে তথ্য পাস করতে পারেন $stateParams

  • আপনি সহজেই নির্ধারণ করতে পারেন যদি আপনি একটি রাষ্ট্র বা একটি রাষ্ট্র আপনার টেমপ্লেট মধ্যে UI 'তে উপাদান (বর্তমান রাষ্ট্রের গৌণ হাইলাইট) সমন্বয় অভিভাবক রয়েছে মাধ্যমে $stateনামঃ ui-রাউটার আপনি এটি আপনার মধ্যে সেটিং মাধ্যমে প্রকাশ করতে পারে, যার দ্বারা সরবরাহিত $rootScopeউপর run

সংক্ষেপে, ইউআই-রাউটারটি আরও বৈশিষ্ট্যযুক্ত এনজিআরটার, শিটগুলির নিচে এটি বেশ আলাদা। এই অতিরিক্ত বৈশিষ্ট্য বৃহত্তর অ্যাপ্লিকেশনগুলির জন্য খুব দরকারী।

অধিক তথ্য:


134
সামগ্রিকভাবে এটি সেরা ব্যাখ্যা, তবে একটি মূল বিষয়টির জন্য: "সামগ্রিকভাবে, আরও বৈশিষ্ট্যযুক্ত ইউআই-রাউটারটি এনজিআউটার"। এটি এর চেয়ে অনেক বেশি মৌলিক: ngRouteকেবলমাত্র আপনাকে ইউআরএল রুটে নিয়ন্ত্রণকারী এবং টেম্পলেটগুলি অর্পণ করতে দেয়, অন্যদিকে মৌলিক বিমূর্ততা ui.routerরাষ্ট্রগুলি, যা আরও শক্তিশালী ধারণা।
নাট আবেলে

23
এই উত্তরে ফাইল আকারে পার্থক্য চিহ্নিত করা কারও কারও পক্ষে প্রাসঙ্গিক হতে পারে। এখনই হিসাবে ngRoute: 35.9 কেবি / 4.4 কেবি / 2.5 কেবি এবং ui-router: 162.9 কেবি / 30.4 কেবি / 11.6 কেবি (আনমিনিড / মিনিফাইড / জিজেপড)।
অ্যালেক্স রস

35
আমরা কি 2015 সালে 162kb সম্পর্কে গুরুতরভাবে চিন্তিত?
ক্যাটফিশ

27
@ ক্যাটফিশ কেন নয়? খারাপ ইন্টারনেট সংযোগ সহ বিশ্বের অনেক জায়গাতেই রয়েছে, এটি সম্পর্কে চিন্তা করা খুব গুরুত্বপূর্ণ!
ব্রুনো ক্যাসালি

4
@tfrascaroli আমি দ্বিমত পোষণ করছি - কোনও ব্যবহারকারী যদি প্রথমবার আপনার অ্যাপ্লিকেশনটি লোড করে, পৃষ্ঠার লোড বারগুলি বাউন্সের হারের সাথে দৃ corre়তার সাথে সম্পর্কযুক্ত । পৃষ্ঠায় আরও ১৩০ কেবি যোগ করার আগে আমি অবশ্যই খরচ / উপকারটি বিবেচনা করব।
অ্যান্টনি ম্যানিং-ফ্র্যাঙ্কলিন

131

এনজিআরউট হল একটি মডিউল যা অ্যাঙ্গুলারজেএস টিম দ্বারা বিকাশ করা হয়েছিল যা আগে অ্যাঙ্গুলারজেএস কোরের অংশ ছিল।

ইউআই-রাউটার একটি ফ্রেমওয়ার্ক যা রাউটিং সক্ষমতা উন্নত ও উন্নত করতে অ্যাংুলারজেএস প্রকল্পের বাইরে তৈরি করা হয়েছিল।

ইউআই-রাউটার ডকুমেন্টেশন থেকে :

AngularUI রাউটারটি AngularJS এর ​​জন্য একটি রাউটিং কাঠামো, যা আপনাকে আপনার ইন্টারফেসের অংশগুলি একটি রাষ্ট্রীয় মেশিনে সংগঠিত করতে দেয়। অ্যাংুলার কোরের $ রুট পরিষেবাটির বিপরীতে, যা ইউআরএল রুটের চারপাশে সংগঠিত হয়, ইউআই-রাউটারগুলি রাজ্যগুলির চারপাশে সংগঠিত হয়, যা বিকল্পভাবে রুটগুলির পাশাপাশি অন্য আচরণও সংযুক্ত থাকতে পারে।

রাজ্যগুলি আপনাকে আবেদনের ইন্টারফেসটি শক্তিশালীভাবে পরিচালনা করতে দেয়, নামযুক্ত, নেস্টেড এবং সমান্তরাল দর্শনগুলিতে বাধ্য।

এগুলির কোনওটিই ভাল নয়, আপনাকে আপনার প্রকল্পের জন্য সবচেয়ে উপযুক্ত চয়ন করতে হবে।

তবে, আপনি যদি আপনার প্রয়োগটিতে জটিল মতামত রাখার পরিকল্পনা করেন এবং আপনি "রাষ্ট্র" ধারণাটি মোকাবেলা করতে চান। আমি আপনাকে ইউআই রাউটার চয়ন করার পরামর্শ দিচ্ছি।


1
এফডাব্লুআইডাব্লু আমি কৌণিকের জন্য ইউআই-রাউটারের বিরুদ্ধে মাথা ঘুরতে বেশ কয়েক ঘন্টা ব্যয় করেছি। ডকুমেন্টেশনটি অত্যন্ত দুঃখজনক অবস্থানে রয়েছে, এটি এখন বছরের পর বছর স্পষ্টভাবেই বাতিল হয়ে গেছে। টিউটোরিয়ালে গুরুত্বপূর্ণ গাইডের ভাঙা লিংক, নামবিহীন প্যাকেজগুলি, আপনি এটির নাম দিন। অবশেষে আমি এই সমস্যাটি স্ট্যাকওভারফ্লো / প্রশ্নগুলি / 23585065/… সনাক্ত করতে না পারার পরে ছেড়ে দিয়েছি (সম্ভবত আরও অনেক লোকের সাথে)। এখন ngRoute চেষ্টা করা হচ্ছে ...
UnionP

71

এনজিআরউট একটি কৌণিক কোর মডিউল যা মূল পরিস্থিতিতে জন্য ভাল। আমি বিশ্বাস করি যে তারা আসন্ন প্রকাশে আরও শক্তিশালী বৈশিষ্ট্য যুক্ত করবে।

ইউআরএল: https://docs.angularjs.org/api/ngRoute

ইউআই-রাউটার একটি অবদানযুক্ত মডিউল যা এনজিআউটের সমস্যাগুলি অতিক্রম করে। প্রধানত নেস্টেড / জটিল দৃষ্টিভঙ্গি।

ইউআরএল: https://github.com/angular-ui/ui-router

ইউআই-রাউটার এবং এনজিআউটের মধ্যে কিছু পার্থক্য

http://www.amasik.com/angularjs-ngroute-vs-ui-router/

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


52

এনজিআরউট মূল কৌণিক জেএস কাঠামোর অংশ।

ইউআই-রাউটার একটি সম্প্রদায় গ্রন্থাগার যা ডিফল্ট রাউটিং ক্ষমতাগুলি উন্নত করার চেষ্টা করার জন্য তৈরি করা হয়েছে।

ইউআই-রাউটার কনফিগার / সেটআপ সম্পর্কে এখানে একটি ভাল নিবন্ধ:

http://www.ng-newsletter.com/posts/angular-ui-router.html


35

আপনি যদি এনজিআরউটের দৃষ্টান্তের মধ্যে প্রয়োগ করা নেস্টেড ভিউগুলির কার্যকারিতাটি ব্যবহার করতে চান তবে কৌণিক-রুট-বিভাগটি চেষ্টা করুন - এটির পরিবর্তে পরিবর্তে এনজিআরট বাড়ানো।


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

23
প্রাসঙ্গিকতাটি সহজ: কৌণিক-রুট + কৌণিক-রুট-বিভাগ = কৌণিক-ইউআই-রাউটার। সুতরাং, পার্থক্যটি হল: কৌণিক-ইউআই-রাউটার - কৌণিক-রুট = কৌণিক-রুট-সেগমেন্ট :)
আর্ট

1
আমি এটি একটি কার্যকর উত্তর মনে করি। কৌণিক-route-seament.com ইউআই রাউটার ব্যবহারের ওভারহেড চান না তাদের জন্য অবশ্যই একটি ভাল পছন্দ। এছাড়াও @ সত্যই, লোকেরা এই গ্রন্থাগারগুলি তৈরি করতে কঠোর পরিশ্রম করে, এটি প্রচার করা কোনও খারাপ জিনিস নয়
ফিলিপ

19

সাধারণত ইউআই-রাউটার একটি রাষ্ট্র ব্যবস্থায় কাজ করে ... এটি একটি সহজ উদাহরণ দিয়ে বোঝা যায়:

ধরা যাক আমাদের কাছে একটি মিউজিক লাইব্রেরির একটি বড় অ্যাপ্লিকেশন রয়েছে (যেমন ..গানা বা সাভান বা অন্য কোনও)। এবং পৃষ্ঠার নীচে, আপনার কাছে একটি সঙ্গীত প্লেয়ার রয়েছে যা পৃষ্ঠার সমস্ত রাজ্যে জুড়ে রয়েছে।

এখন ধরা যাক আপনি প্লে করতে কয়েকটি গানে ক্লিক করুন। এই ক্ষেত্রে, পুরো পৃষ্ঠাটি পুনরায় লোড করার পরিবর্তে কেবল সেই সঙ্গীত প্লেয়ারের অবস্থার পরিবর্তন করা উচিত। এটি ইউআই-রাউটার দ্বারা সহজেই পরিচালনা করা যায়।

এনজিআরটে থাকাকালীন আমরা কেবল দৃশ্য এবং নিয়ামকটি সংযুক্ত করি।


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

আমি পুরোপুরি একমত. এই রাষ্ট্রীয় মেশিনটি কোথায় ব্যবহার করা দরকার তা এখনও কোনও ব্যাখ্যা খুঁজে পাচ্ছেন না
কুশলভম

18

কৌণিক 1.x

এনজি-রুট :

এনজি-রুটটি রাউটিংয়ের জন্য কৌণিক জেএস টিম দ্বারা বিকাশ করা হয়েছে।

এনজি-রুট: ইউআরএল (অবস্থান) ভিত্তিক রাউটিং।

উদা:

$routeProvider
    .when("/home", {
        templateUrl : "home.html"
    })

UI- রুট :

ইউআই-রাউটারটি তৃতীয় পক্ষের মডিউল দ্বারা বিভক্ত।

ইউআই রাউটার: রাষ্ট্র ভিত্তিক রাউটিং

উদা:

 $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })

-> ইউআই-রাউটার নেস্টেড ভিউগুলিকে অনুমতি দেয়

-> ইউ-রাউটার এনজি-রুটের চেয়ে বেশি শক্তিশালী

এনজি-রাউটার , ইউআই-রাউটার


13

এনজিআরউট একটি কৌণিক দল দ্বারা নির্মিত একটি মডিউল যা বুনিয়াদি ক্লায়েন্ট-সাইড রাউটিং কার্যকারিতা সরবরাহ করে। এই মডিউলটি রাউটিংয়ের জন্য মোটামুটি শক্তিশালী বেস সরবরাহ করে, এবং এই ব্লগ পোস্টে উদাহরণ হিসাবে যেমন শক্ত রাউটিং কার্যকারিতা দিতে বেশ সহজেই তৈরি করা যায় (ওয়ার্ড বেল এবং বেন নাদেল, লেখকের মধ্যে মন্তব্য ট্রেইলটি পড়তে ভুলবেন না - তারা একটি কৌণিক পেশাদারদের দম্পতি)

ইউআই-রাউটার url কেন্দ্রিক রুট থেকে অ্যাপ্লিকেশন "স্টেটস" এ ফোকাস স্থানান্তর করে, যা ইউআরএলে প্রতিবিম্বিত হতে পারে বা নাও পারে।

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

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

নামযুক্ত দর্শনগুলি ইউআই-রাউটারের আরও একটি অতিরিক্ত বৈশিষ্ট্য। এনজিআরউটের সাহায্যে আপনার কেবলমাত্র একটি পৃষ্ঠায় একক এনজিভিউ নির্দেশিকা থাকতে পারে, যেখানে ইউআই-রাউটারে নামযুক্ত দর্শনগুলি সহ আপনি একাধিক ইউআই-ভিউ নির্দেশিকা নির্দিষ্ট করতে পারেন এবং তারপরে প্রতিটি রাজ্য নাম দর্শনের টেমপ্লেট এবং নিয়ামককে প্রভাবিত করতে সক্ষম হয়। এর একটি দুর্দান্ত সাধারণ উদাহরণটি হ'ল আপনার অ্যাপ্লিকেশনটির মূল বিষয়বস্তুটি প্রাথমিক দৃষ্টিভঙ্গি হবে এবং তারপরে একটি পাদচরণ বারও থাকবে যা আলাদা ইউআই-ভিউ হবে। এই দৃশ্যে, পাদলেখের নিয়ামককে আর রাষ্ট্র / রুটের পরিবর্তনগুলি শুনতে হয় না।

এনজিআরট এবং ইউআই-রাউটারের একটি ভাল তুলনা এই পডকাস্ট পর্বে পাওয়া যাবে ।

জিনিসগুলিকে আরও বিভ্রান্ত করার জন্য, নতুন "অফিসিয়াল" রাউটিং মডিউলের দিকে নজর রাখুন যে কৌণিক দলটি কৌণিকতার 1.5 এবং 2.0 এর সংস্করণ প্রকাশের প্রত্যাশা করে। এটি এনজিআরউট মডিউলটি প্রতিস্থাপন করবে। নতুন রাউটার মডিউলটির জন্য এখানে বর্তমান নথিপত্র রয়েছে - বাস্তবায়ন এখনও চূড়ান্ত হয়নি বলে এই পোস্টিংটি মোটামুটি কম। এই মডিউলটি কখন প্রকাশিত হবে এ সম্পর্কিত আরও তথ্যের জন্য এখানে দেখুন ।


11

এনজিআরউট একটি প্রাথমিক রাউটিং লাইব্রেরি, যেখানে আপনি যে কোনও রুটের জন্য কেবল একটি ভিউ এবং নিয়ামক নির্দিষ্ট করতে পারেন।

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

এটি AngularUI রাউটারের জন্য সেরা দিকনির্দেশনা।


10

আপনার জানতে হবে বেসিক জিনিস: এনজি-রাউটার ব্যবহার করে $location.path()এবং ইউআই-রাউটার ব্যবহার করে$state.go

আমাদের সমস্ত বৈশিষ্ট্য বিশ্রাম।


8

ইউআই রাউটার আপনার জীবনকে আরও সহজ করুন! আপনি এটিকে আপনার অ্যাপ্লিকেশনগুলিতে ইনজেকশনের মাধ্যমে এঙ্গুলারজেএস অ্যাপ্লিকেশনটিতে যুক্ত করতে পারেন ...

ng-route মূল AngularJS এর ​​অংশ হিসাবে আসে, সুতরাং এটি সহজ এবং আপনাকে আরও কম বিকল্প দেয় ...

এনজি-রুটটি আরও ভালভাবে বুঝতে এখানে দেখুন: https://docs.angularjs.org/api/ngRoute

এছাড়াও এটি ব্যবহার করার সময়, ব্যবহার করতে ভুলবেন না: এনজিভিউ ..

এনজি-ইউআই-রাউটার আলাদা তবে:

https://github.com/angular-ui/ui-router তবে আপনাকে আরও বিকল্প দেয় ...


6

AngularUI রাউটারটি AngularJS এর ​​জন্য একটি রাউটিং কাঠামো, যা আপনাকে আপনার ইন্টারফেসের অংশগুলি একটি রাষ্ট্রীয় মেশিনে সংগঠিত করতে দেয়। কৌণিক এনজিআরউট মডিউলে $ রুট পরিষেবাটির বিপরীতে, যা ইউআরএল রুটের চারপাশে সংগঠিত হয়, ইউআই-রাউটারগুলি রাজ্যগুলির চারপাশে সংগঠিত হয়, যা বিকল্পভাবে রুটগুলির পাশাপাশি অন্য আচরণের সাথে সংযুক্ত থাকতে পারে।

https://github.com/angular-ui/ui-router


4

এনজিআরউট হল একটি মডিউল যা অ্যাঙ্গুলার.জেএস টিম দ্বারা বিকাশ করা হয়েছিল যা আগে কৌণিক মূল অংশ ছিল।

ইউআই-রাউটার একটি ফ্রেমওয়ার্ক যা রাউটিং ক্যাপাবিলিটিগুলি উন্নত ও উন্নত করতে Angular.js প্রকল্পের বাইরে তৈরি করা হয়েছিল।


3

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


0

ng-View(AngularJS টিম দ্বারা বিকাশিত) প্রতি পৃষ্ঠায় কেবল একবার ব্যবহার করা যেতে পারে, যেখানে ui-View(তৃতীয় পক্ষের মডিউল) প্রতি পৃষ্ঠায় একাধিকবার ব্যবহার করা যেতে পারে।

ui-View অতএব সেরা বিকল্প।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.