javascript - tutorial - node js
आंशिक और टेम्पलेट्स का जटिल घोंसला (4)
अद्यतन: github.com/angular-ui/ui-router
उपखंडों के लिए यह एनजी में तारों का लाभ उठाने जितना आसान है- इसमें शामिल हैं:
<ul id="subNav">
<li><a ng-click="subPage='section1/subpage1.htm'">Sub Page 1</a></li>
<li><a ng-click="subPage='section1/subpage2.htm'">Sub Page 2</a></li>
<li><a ng-click="subPage='section1/subpage3.htm'">Sub Page 3</a></li>
</ul>
<ng-include src="subPage"></ng-include>
या यदि आप सभी जगहों पर उप पृष्ठों के लिंक हैं तो आप एक ऑब्जेक्ट बना सकते हैं:
$scope.pages = { page1: 'section1/subpage1.htm', ... };
<ul id="subNav">
<li><a ng-click="subPage='page1'">Sub Page 1</a></li>
<li><a ng-click="subPage='page2'">Sub Page 2</a></li>
<li><a ng-click="subPage='page3'">Sub Page 3</a></li>
</ul>
<ng-include src="pages[subPage]"></ng-include>
या आप $routeParams
का भी उपयोग कर सकते हैं
$routeProvider.when('/home', ...);
$routeProvider.when('/home/:tab', ...);
$scope.params = $routeParams;
<ul id="subNav">
<li><a href="#/home/tab1">Sub Page 1</a></li>
<li><a href="#/home/tab2">Sub Page 2</a></li>
<li><a href="#/home/tab3">Sub Page 3</a></li>
</ul>
<ng-include src=" '/home/' + tab + '.html' "></ng-include>
आप प्रत्येक आंशिक के शीर्ष-स्तर पर एक एनजी-नियंत्रक भी डाल सकते हैं
मेरे प्रश्न में एंगुलरजेएस एप्लिकेशन में टेम्पलेट्स (जिसे आंशिक भी कहा जाता है) के जटिल घोंसले से निपटने के बारे में बताया गया है।
मेरी स्थिति का वर्णन करने का सबसे अच्छा तरीका एक छवि है जिसे मैंने बनाया है:
जैसा कि आप देख सकते हैं कि इसमें घोंसले वाले मॉडल के साथ काफी जटिल अनुप्रयोग होने की संभावना है।
एप्लिकेशन एकल पृष्ठ है, इसलिए यह एक index.html लोड करता है जिसमें डीओएम में ng-view
विशेषता के साथ एक div तत्व होता है।
सर्कल 1 के लिए , आप देखते हैं कि एक प्राथमिक नेविगेशन है जो उचित टेम्पलेट्स को ng-view
में लोड करता है। मैं मुख्य ऐप मॉड्यूल में $routeParams
पास करके ऐसा कर रहा हूं। मेरे ऐप में क्या है इसका एक उदाहरण यहां दिया गया है:
angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when("/job/:jobId/zones/:zoneId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/zone_edit.html' }).
when("/job/:jobId/initial_inspection", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/initial_inspection.html' }).
when("/job/:jobId/zones/:zoneId/rooms/:roomId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/room_edit.html' })
}]);
सर्कल 2 में, ng-view
में लोड किया गया टेम्पलेट एक अतिरिक्त उप-नेविगेशन है । इस उप-नौसेना को इसके नीचे के क्षेत्र में टेम्पलेट लोड करने की आवश्यकता है - लेकिन चूंकि एनजी-व्यू का उपयोग पहले से ही किया जा रहा है, मुझे यकीन नहीं है कि यह करने के बारे में कैसे जाना है।
मुझे पता है कि मैं पहले टेम्पलेट के भीतर अतिरिक्त टेम्पलेट्स शामिल कर सकता हूं, लेकिन ये टेम्पलेट्स बहुत जटिल होने जा रहे हैं। मैं एप्लिकेशन को अपडेट करना आसान बनाने के लिए सभी टेम्पलेट्स को अलग रखना चाहता हूं और अपने बच्चों तक पहुंचने के लिए पैरेंट टेम्पलेट पर निर्भरता नहीं है।
सर्कल 3 में , आप चीजें और अधिक जटिल हो सकते हैं। ऐसी संभावना है कि उप-नेविगेशन टेम्पलेट्स में 2 उप-नेविगेशन होगा जिसमें सर्कल 4 के क्षेत्र में अपने टेम्पलेट्स को लोड करने की आवश्यकता होगी
टेम्पलेट्स के इस तरह के जटिल घोंसले से निपटने के लिए एक एंगुलरजेएस ऐप की संरचना करने के बारे में कोई कैसे जाता है जबकि उन्हें एक दूसरे से अलग रखते हुए?
आप इस उद्देश्य के लिए इस लाइब्रेरी को भी चेकआउट कर सकते हैं:
http://angular-route-segment.com
ऐसा लगता है कि आप क्या खोज रहे हैं, और यूई-राउटर से उपयोग करना बहुत आसान है। डेमो साइट से :
जे एस:
$routeSegmentProvider.
when('/section1', 's1.home').
when('/section1/:id', 's1.itemInfo.overview').
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'}).
शीर्ष-स्तरीय एचटीएमएल:
<ul>
<li ng-class="{active: $routeSegment.startsWith('s1')}">
<a href="/section1">Section 1</a>
</li>
<li ng-class="{active: $routeSegment.startsWith('s2')}">
<a href="/section2">Section 2</a>
</li>
</ul>
<div id="contents" app-view-segment="0"></div>
नेस्टेड एचटीएमएल:
<h4>Section 1</h4>
Section 1 contents.
<div app-view-segment="1"></div>
कोणीय यूई-राउटर नेस्टेड विचारों का समर्थन करता है। मैंने अभी तक इसका उपयोग नहीं किया है लेकिन बहुत ही आशाजनक दिखता है।
खैर, चूंकि आप वर्तमान में केवल एक ngView निर्देश कर सकते हैं ... मैं नेस्टेड निर्देश नियंत्रण का उपयोग करता हूं। यह आपको उनके बीच templating और विरासत (या अलग) scopes स्थापित करने की अनुमति देता है। इसके बाहर मैं एनजी-स्विच का उपयोग करता हूं या यहां तक कि केवल एनजी-शो का चयन करता हूं कि यह चुनने के लिए कि मैं कौन से नियंत्रण प्रदर्शित कर रहा हूं, जो कि $ रूटमैम से क्या आ रहा है।
संपादित करें यहां कुछ उदाहरण छद्म कोड है जो आपको एक विचार देने के लिए है कि मैं किस बारे में बात कर रहा हूं। एक नेस्टेड उप नेविगेशन के साथ।
मुख्य ऐप पेज यहां दिया गया है
<!-- primary nav -->
<a href="#/page/1">Page 1</a>
<a href="#/page/2">Page 2</a>
<a href="#/page/3">Page 3</a>
<!-- display the view -->
<div ng-view>
</div>
उप नेविगेशन के लिए निर्देश
app.directive('mySubNav', function(){
return {
restrict: 'E',
scope: {
current: '=current'
},
templateUrl: 'mySubNav.html',
controller: function($scope) {
}
};
});
उप नेविगेशन के लिए टेम्पलेट
<a href="#/page/1/sub/1">Sub Item 1</a>
<a href="#/page/1/sub/2">Sub Item 2</a>
<a href="#/page/1/sub/3">Sub Item 3</a>
एक मुख्य पृष्ठ के लिए टेम्पलेट (प्राथमिक नौसेना से)
<my-sub-nav current="sub"></my-sub-nav>
<ng-switch on="sub">
<div ng-switch-when="1">
<my-sub-area1></my-sub-area>
</div>
<div ng-switch-when="2">
<my-sub-area2></my-sub-area>
</div>
<div ng-switch-when="3">
<my-sub-area3></my-sub-area>
</div>
</ng-switch>
एक मुख्य पृष्ठ के लिए नियंत्रक। (प्राथमिक नौसेना से)
app.controller('page1Ctrl', function($scope, $routeParams) {
$scope.sub = $routeParams.sub;
});
एक उप क्षेत्र के लिए निर्देश
app.directive('mySubArea1', function(){
return {
restrict: 'E',
templateUrl: 'mySubArea1.html',
controller: function($scope) {
//controller for your sub area.
}
};
});