$ मार्गप्रॉइडर और $ स्टेटप्रोविडर के बीच अंतर क्या है?

Question

कृपया AngularJS में $routeProviderऔर उसके बीच अंतर स्पष्ट करें $stateProvider।

सबसे अच्छा अभ्यास कौन सा है?

Answer 1

दोनों एसपीए (एकल पृष्ठ अनुप्रयोग) में मार्ग के प्रयोजनों के लिए उपयोग किए जाते हैं।

1. कोणीय मार्ग - प्रति $ मार्गप्रोविद डॉक्स

नियंत्रकों और विचारों के URL (HTML partials)। यह $ location.url देखता है () और मौजूदा मार्ग की परिभाषा में पथ को मैप करने का प्रयास करता है।

एचटीएमएल

<div ng-view></div>

उपरोक्त टैग उस टेम्पलेट से रेंडर करेगा, $routeProvider.when()जिसे आपने .configकोणीय के (कॉन्फ़िगरेशन चरण) में उल्लेखित किया था

सीमाएं: -

• पृष्ठ में केवल ng-viewपृष्ठ पर एकल हो सकता है
• यदि आपके एसपीए के पेज पर कई छोटे घटक हैं जो आप कुछ शर्तों के आधार पर प्रस्तुत करना चाहते थे, तो $routeProviderविफल हो जाता है। (है कि प्राप्त करने के लिए, हम जैसे निर्देशों उपयोग करने की आवश्यकता ng-include, ng-switch, ng-if, ng-showउन्हें एसपीए में है करने के लिए है, जो बुरा लग रहा है)
• आप माता-पिता और बच्चे के रिश्ते जैसे दो मार्गों के बीच संबंध नहीं रख सकते।
• आप url पैटर्न के आधार पर दृश्य का एक भाग नहीं दिखा और छिपा सकते हैं।

---

2. औई -राउटर - प्रति $ राज्यप्रोविडर डॉक्स

AngularUI Router, 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जाँचने के बजाय प्रतिस्थापित करेगा कि यह नेस्टेड है या नहीं।
• यहां आप एक राज्य में उल्लिखित के आधार पर गतिशील रूप से ui-srefएक hrefURL बनाने के लिए उपयोग कर सकते हैं URL, साथ ही आप jsonप्रारूप में एक राज्य परमान भी दे सकते हैं ।

अधिक जानकारी के लिए कोणीय यूआई-राउटर

राज्यों के साथ विभिन्न नेस्टेड दृश्य के साथ बेहतर लचीलेपन के लिए, मैं आपको जाना पसंद करूंगा ui-router

Comments

क्या कोई कृपया मुझे दिखा सकता है और कोड में इस रेंप्रोविडर और स्टेटप्रोइडर का अंतर और समानता दिखा सकता है?

— bleyk

@bleykFaust कोड्स से आपका क्या तात्पर्य है? मैंने जो उत्तर दिया, वह सरल शब्दों में है .. क्या हिस्सा आपको समझ में नहीं आता है?

— पंकज पारकर

@PankajParkar, मैं रूटप्रोइडर का उपयोग कर रहा हूं, मुझे आश्चर्य है कि मैं इसे स्टेटप्रोवाइडर में कैसे बदल सकता हूं?

— bleyk

@bleykFaust तो यह जो करने के लिए आप में .. क्या यह उत्तर राज्यों अंतर दिखना चाहिए का जवाब नहीं है $stateProviderऔर$routeProvider

— पंकज पारकर

क्या यह मार्गों का उपयोग करके किसी पृष्ठ को पूर्व-लोड करने की आवश्यकता को हल कर सकता है?

— Martian2049

Answer 2

राउटर के अपने एनजी-राउटर को ध्यान URLsमें रखा जाता है, राउटिंग के दौरान, यूआई-राउटर statesयूआरएल के अलावा लेता है।

राज्य नामित, नेस्टेड और समानांतर विचारों के लिए बाध्य हैं, जिससे आप अपने एप्लिकेशन के इंटरफ़ेस को शक्तिशाली रूप से प्रबंधित कर सकते हैं।

एनजी-राउटर में रहते समय, आपको <a href="">टैग के माध्यम से लिंक प्रदान करते समय यूआरएल के बारे में बहुत सावधान रहना होगा , यूआई-राउटर में आपको केवल ध्यान stateमें रखना होगा। आप जैसे लिंक प्रदान करते हैं <a ui-sref="">। ध्यान दें कि यदि आप <a href="">यूआई-राउटर में उपयोग करते हैं , तो भी जैसे आप एनजी-राउटर में करेंगे, यह अभी भी काम करेगा।

इसलिए, भले ही आप किसी दिन अपने URL को बदलने का निर्णय लेते हैं, फिर भी आपका stateवही रहेगा और आपको केवल URL बदलने की आवश्यकता है .config।

जबकि एनकाउंटर का उपयोग सरल ऐप बनाने के लिए किया जा सकता है, यूआई-राउटर जटिल एप्लिकेशन के लिए विकास को बहुत आसान बनाता है। यहाँ इसकी विकी है।

Answer 3

$ मार्ग: इसका उपयोग नियंत्रकों और दृश्यों (HTML partials) के लिए गहरी-लिंकिंग URL के लिए किया जाता है और मार्ग की मौजूदा परिभाषा से पथ को मैप करने के लिए $ location.url () देखता है।

जब हम ngRoute का उपयोग करते हैं, तो मार्ग $ मार्गप्रोपाइडर से कॉन्फ़िगर किया गया है और जब हम ui- राउटर का उपयोग करते हैं, तो मार्ग $ stateProvider और $ 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'
        });