AngularJS में , जैसा कि आप जानते हैं, नियमित तरीकों से बहु-स्तरीय मार्ग बनाने का कोई तरीका नहीं है, जिसमें मार्गों के निचले स्तरों को फिर से लोड करने से शीर्ष-स्तरीय तत्वों का फिर से निर्माण नहीं होगा। मानक
$route सेवा दृश्य, नियंत्रक और इसके दायरे को पृष्ठ URL में पूरी तरह से बदल देती है।
इस समस्या को हल करने के लिए, कई तृतीय-पक्ष समाधान लिखे गए हैं, जिसमें प्रसिद्ध
ui-रूटर भी शामिल है । कई कारणों से, मेरी कुछ परियोजनाओं में से कोई भी समाधान नहीं हुआ, और मैंने अपनी खुद की लाइब्रेरी लिखी, जिसे मैं यहां प्रस्तुत करता हूं:
कोणीय-मार्ग-खंड ।
वह क्या करने की अनुमति देता है?
यहां डेमो:
कोणीय- route-segment.com/src/exampleउदाहरण के स्रोत गितुब पर
उदाहरण निर्देशिका में।
पुस्तकालय मानक
$route सेवा के प्रतिस्थापन के रूप में कार्य करता है। प्रत्येक मार्ग को एक बिंदु के माध्यम से सूचीबद्ध
खंडों की श्रेणीबद्ध वृक्ष जैसी श्रृंखला के रूप में दर्शाया गया है, जिनमें से प्रत्येक को व्यक्तिगत रूप से कॉन्फ़िगर किया जा सकता है।
angular.module('app').config(function ($routeSegmentProvider) { $routeSegmentProvider. when('/section1', 's1.home'). when('/section1/prefs', 's1.prefs'). when('/section1/:id', 's1.itemInfo.overview'). when('/section1/:id/edit', 's1.itemInfo.edit'). when('/section2', 's2'). segment('s1', { templateUrl: 'templates/section1.html', controller: MainCtrl}). within(). segment('home', { templateUrl: 'templates/section1/home.html'}). segment('itemInfo', { templateUrl: 'templates/section1/item.html', controller: Section1ItemCtrl, dependencies: ['id']}). within(). segment('overview', { templateUrl: 'templates/section1/item/overview.html'}). segment('edit', { templateUrl: 'templates/section1/item/edit.html'}). up(). segment('prefs', { templateUrl: 'templates/section1/prefs.html'}). up(). segment('s2', { templateUrl: 'templates/section2.html', controller: MainCtrl});
यह पेड़ के माध्यम से जाने के बिना, एक अन्य वाक्यविन्यास का उपयोग करने की अनुमति है:
$routeSegmentProvider.segment('s1', { templateUrl: 'templates/section1.html', controller: MainCtrl}); $routeSegmentProvider.within('s1').segment('home', { templateUrl: 'templates/section1/home.html'}); $routeSegmentProvider.within('s1').segment('itemInfo', { templateUrl: 'templates/section1/item.html', controller: Section1ItemCtrl, dependencies: ['id']});
निर्देश
app-view-segment (नियमित
ng-view ) का उपयोग करते हुए, पेज के डोम में स्थान को इंगित किया जाता है, जहां खंडों के प्रत्येक स्तर को प्रदान किया जाना चाहिए:
index.html <ul> <li><a href="/section1">Section 1</a></li> <li><a href="/section2">Section 2</a></li> </ul> <div id="contents" app-view-segment="0"></div>
section1.html (
div#contents तत्व
div#contents में लोड किया जाएगा)
<h4>Section 1</h4> Section 1 contents. <div app-view-segment="1"></div>
, .
, , . , .
, , .