कोणीय यूआई-राउटर का उपयोग करके अभिभावक दृश्य में एकाधिक दृश्य - कोणीय, घोंसला, कोणीय-यूई-राउटर, राज्य

मैं 3 बाल दृश्य (हेडर, मुख्य सामग्री क्षेत्र और एक पाद लेख) के साथ दृश्य बनाने के लिए एंगुलरजेस यूआई-राउटर का उपयोग कर रहा हूं।

मैंने पैरेंट व्यू के लिए रूट-स्टेट को परिभाषित किया है, लेकिन मुझे नहीं पता कि मैं राज्य को कैसे परिभाषित कर सकता हूं कि वह बच्चे के विचारों को स्वचालित रूप से लोड कर सके।

 $stateProvider
.state("index",
{
url: "/index",
templateUrl: "AngularJS/Templates/indexView.html",
controller: "indexController"
});

और मेरा indexView.html ऐसा दिखता है:

<div class="row">
<div class="col-md-6 col-md-offset-3">
<a ui-sref="index.detail">Here</a>
<div data-ng-controller="indexController as vm">
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>

</div>
</div>

मैं उम्मीद करता हूं कि ऐसा कुछ काम करता है, लेकिन यह नहीं करता है:

.state("index",
{
url: "/index",
templateUrl: "AngularJS/Templates/indexView.html",
controller: "indexController"
views: {
"header": {
templateUrl: "/AngularJS/Templates/headerView.html",
controller: "HeaderController"
},
"content": {
templateUrl: "/AngularJS/Templates/contentView.html",
controller: "ContentController"
},
"footer": {
templateUrl: "/AngularJS/Templates/footerView.html",
controller: "FooterController"
}
}
});

किसी भी सहायता के लिए धन्यवाद।

उत्तर:

एक काम करने वाले प्लंकर के साथ एक समान प्रश्नोत्तर है:

यूई-राउटर में बाएंबार के साथ लेआउट के लिए नेस्टेड राज्य या विचार?

आप लगभग वहाँ हैं। बस, पहला दृश्य (अनामित) दूसरों के लिए लक्ष्य होगा .. इसलिए हमने थोड़ा अलग वाक्यविन्यास का उपयोग किया है

.state("index",
{
url: "/index",
//templateUrl: "AngularJS/Templates/indexView.html",
//controller: "indexController"
views: {
"": {
templateUrl: "AngularJS/Templates/indexView.html",
controller: "indexController"
},
"header@index": {
templateUrl: "/AngularJS/Templates/headerView.html",
controller: "HeaderController"
},
"content@index": {
templateUrl: "/AngularJS/Templates/contentView.html",
controller: "ContentController"
},
"footer@index": {
templateUrl: "/AngularJS/Templates/footerView.html",
controller: "FooterController"
}

हम क्या देख सकते हैं (परिवर्तन) है

• सभी विचारों के अंदर परिभाषित किया जाना चाहिए views : {}, अज्ञात सहित। क्यूं कर? क्योंकि यदि कोई ऑब्जेक्ट दृश्य है ... इनलाइन टेम्पलेट छोड़ा गया है
• भाई विचारों को पूर्ण नाम प्रत्यय के साथ बढ़ाया जाता है @index - जो कहता है, कि उनका लक्ष्य रूट index.html में नहीं है, लेकिन वर्तमान स्थिति के पहले से लोड किए गए विचारों में से एक के अंदर है