$ রুটপ্রোভাইডার এবং $ রাষ্ট্রপ্রভাইডারের মধ্যে পার্থক্য কী?

Question

AngularJS এর মধ্যে $routeProviderএবং এর $stateProviderমধ্যে পার্থক্যটি ব্যাখ্যা করুন ।

কোনটি সেরা অনুশীলন?

Answer 1

উভয়ই এসপিএ (একক পৃষ্ঠা অ্যাপ্লিকেশন) এ রাউটিংয়ের উদ্দেশ্যে ব্যবহৃত হিসাবে একই কাজ করে।

1. কৌণিক রাউটিং - প্রতি $ রুটপ্রভাইডার ডক্স

কন্ট্রোলার এবং দর্শন (HTML পার্টিয়াল) এর URL গুলি। এটি। অবস্থান.url () দেখে এবং একটি বিদ্যমান রুট সংজ্ঞাতে পাথ মানচিত্রের চেষ্টা করে।

এইচটিএমএল

<div ng-view></div>

উপরের ট্যাগটি কৌণিকের (কনফিগারেশন ফেজ) $routeProvider.when()আপনি উল্লিখিত শর্তটি থেকে টেমপ্লেট রেন্ডার করবে.config

সীমাবদ্ধতা: -

• পৃষ্ঠাটিতে কেবলমাত্র ng-viewপৃষ্ঠায় একক থাকতে পারে
• যদি আপনার এসপিএর পৃষ্ঠায় একাধিক ছোট উপাদান থাকে যা আপনি কিছু শর্তের ভিত্তিতে রেন্ডার করতে চেয়েছিলেন, $routeProviderব্যর্থ হয়। (যে অর্জন করা, আমরা মত নির্দেশনা ব্যবহার করতে হবে ng-include, ng-switch, ng-if, ng-showতাদের স্পা আছে, যা খারাপ দেখায়)
• পিতা-মাতার এবং সন্তানের সম্পর্কের মতো দুটি রুটের মধ্যে আপনি সম্পর্ক স্থাপন করতে পারবেন না।
• ইউআরএল প্যাটার্নের ভিত্তিতে আপনি দর্শনটির একটি অংশ প্রদর্শন করতে এবং আড়াল করতে পারবেন না।

---

2. ইউআই-রাউটার - প্রতি $ রাজ্যপ্রভাইডার ডক্স

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

একাধিক ও নামযুক্ত দর্শন

আর একটি দুর্দান্ত বৈশিষ্ট্য হ'ল কোনও টেমপ্লেটে একাধিক ইউআই-ভিউ রাখার ক্ষমতা।

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

এইচটিএমএল

<div ui-view>
    <div ui-view='header'></div>
    <div ui-view='content'></div>
    <div ui-view='footer'></div>
</div>

বেশিরভাগ ui-routerশক্তি হ'ল এটি নেস্টেড রাষ্ট্র এবং দর্শনগুলি পরিচালনা করতে পারে।

পেশাদাররা

• আপনার ui-viewএকক পৃষ্ঠায় একাধিক থাকতে পারে
• বিভিন্ন দর্শন একে অপরের মধ্যে বাসা বেঁধে দেওয়া যেতে পারে এবং রাউটিং পর্বে রাষ্ট্রের সংজ্ঞা দিয়ে বজায় রাখা যায়।
• আমাদের এখানে সন্তান ও পিতামাতার সম্পর্ক থাকতে পারে, যেমন উত্তরাধিকার সূত্রে রাজ্যেও আপনি ভাইবোনদের অবস্থা নির্ধারণ করতে পারেন।
• আপনি ui-view="some"কেবলমাত্র @রাষ্ট্রের নাম সহ পরম রাউটিং ব্যবহার করে রাষ্ট্রের পরিবর্তন করতে পারেন ।
• @আপনি পরিবর্তনের জন্য ব্যবহার করে আপেক্ষিক রাউটিংয়ের অন্য উপায়টি হ'ল ui-view="some"। এটি ui-viewনেস্টেড কিনা তা পরীক্ষা করার পরিবর্তে প্রতিস্থাপন করবে will
• এখানে আপনি কোনও রাজ্যে উল্লিখিত ভিত্তিতে গতিশীলভাবে ui-srefএকটি hrefইউআরএল তৈরি করতে ব্যবহার করতে পারেন URL, এছাড়াও আপনি jsonবিন্যাসে একটি স্টেট প্যারাম দিতে পারেন ।

আরও তথ্যের জন্য কৌণিক ইউআই-রাউটার

রাজ্যগুলির সাথে বিভিন্ন নেস্টেড ভিউয়ের সাথে আরও ভাল নমনীয়তার জন্য, আমি আপনাকে যেতে পছন্দ করব ui-router

Comments

কেউ দয়া করে আমাকে এবং কোডগুলির মধ্যে এই রুটপ্রোভাইডার এবং স্টেটপ্রোভাইডারটির পার্থক্য এবং সমতুল্যতা প্রদর্শন করতে পারেন?

— ব্লেইক

@bleykFaust কোডগুলি বলতে কী বোঝ? আমি যে উত্তরটি ব্যাখ্যা করেছি তা সহজ ভাষায় .. আপনি কোন অংশটি বুঝতে পারছেন না?

— পঙ্কজ পার্কার

@ পঙ্কজপ্রিকার, আমি রুটপ্রোভাইডার ব্যবহার করছি, আমি অবাক হয়েছি কীভাবে আমি এটিকে স্টেটপ্রোভাইডারে পরিবর্তন করতে পারি?

— ব্লেইক

@bleykFaust তারপরে এটি আপনার উত্তর যা উচিত তা উত্তর নয় .. এই উত্তরটি পার্থক্য জানিয়েছে $stateProviderএবং$routeProvider

— পঙ্কজ পার্কার

এটি কি রুটগুলি ব্যবহার করে কোনও পৃষ্ঠা প্রাক-লোড করার প্রয়োজনটিকে সমাধান করতে পারে?

— মার্টিয়ান2049

Answer 2

কৌনিকের নিজস্ব এনজি-রাউটারটি URLsরাউটিংয়ের সময় বিবেচনা করে, ইউআই-রাউটারটি statesইউআরএলগুলি ছাড়াও নেয় ।

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

এনজি-রাউটারে থাকাকালীন, <a href="">ট্যাগের মাধ্যমে লিঙ্ক সরবরাহ করার সময় আপনাকে ইউআরএল সম্পর্কে খুব সতর্কতা অবলম্বন করতে হবে , ইউআই -রাউটারে আপনাকে কেবল মাথায় রাখতে হবে state। আপনি যেমন লিঙ্ক সরবরাহ <a ui-sref="">। মনে রাখবেন যে <a href="">আপনি ইউআই-রাউটারে যেমন ব্যবহার করেন, ঠিক তেমনই আপনি এনজি-রাউটারে করেন তবে এটি এখনও কার্যকর হবে।

তাই, এমনকি আপনি যদি কোন একদিন আপনার URL পরিবর্তন করার সিদ্ধান্ত নেন, আপনার stateএকই থাকবে এবং আপনি শুধুমাত্র URL টি পরিবর্তন করতে হবে .config।

যদিও এনজিআরটার সাধারণ অ্যাপ্লিকেশনগুলি তৈরি করতে ব্যবহার করা যেতে পারে, ইউআই-রাউটার জটিল অ্যাপ্লিকেশনগুলির জন্য বিকাশকে আরও সহজ করে তোলে। এখানে এর উইকি

Answer 3

$ রুট: রুটের বিদ্যমান সংজ্ঞা থেকে পথটি মানচিত্রের জন্য এটি নিয়ন্ত্রণকারী এবং দর্শনগুলি (এইচটিএমএল পার্টিয়াল) এবং ঘড়ি $ লোকেশন.আরএল () এর সাথে গভীর সংযোগের URLগুলির জন্য ব্যবহৃত হয়।

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

<div ng-view></div>
    $routeProvider
        .when('/contact/', {
            templateUrl: 'app/views/core/contact/contact.html',
            controller: 'ContactCtrl'
        });


<div ui-view>
    <div ui-view='abc'></div>
    <div ui-view='abc'></div>
   </div>
    $stateProvider
        .state("contact", {
            url: "/contact/",
            templateUrl: '/app/Aisel/Contact/views/contact.html',
            controller: 'ContactCtrl'
        });