कोणीय यूई-राउटर: नेस्टेड विचार बनाम एकाधिक विचार

Question

ui-router कोणीय के मानक राउटर के लिए एक शानदार विकल्प है; यह nested states and views और multiple views का समर्थन करता है।

हालांकि, मैं थोड़ा उलझन में हूं, हालांकि, दोनों के बीच अंतर से। ऐसा लगता है कि कई विचारों को लगभग हमेशा "उच्च-आदेश" घटक के घोंसला वाले विचारों के रूप में सोचा और कार्यान्वित किया जा सकता है। उदाहरण के लिए, यदि हम एक साइडबार और सामग्री बॉक्स के साथ एक ऐप पर विचार करते हैं, तो हम उन्हें दो "समांतर" विचारों के रूप में मॉडल कर सकते हैं या साइडबार को मूल दृश्य और सामग्री-फलक को अपने घोंसले वाले बच्चे के दृश्य के रूप में चुन सकते हैं जो चयनित साइडबार आइटम पर निर्भर करता है ।

रीडमी ही विभाजन का सुझाव लगता है वास्तव में स्पष्ट नहीं है:

प्रो टिप: एक ओर जहां कई समानांतर बार देखा गया एक शक्तिशाली सुविधा हैं, आप अक्सर अपने इंटरफेस द्वारा अधिक प्रभावी रूप से प्रबंधित कर सकेंगे अपने विचारों को घोंसला, और नेस्टेड राज्यों के साथ उन विचारों को जोड़ना।

मुझे कई विचारों और घोंसला वाले विचारों का उपयोग कब करना चाहिए? क्या कुछ मानदंड हैं जो आपको अधिकतर समय चुनने में मदद कर सकते हैं जो राज्यों को मॉडल करने के लिए सही तरीका है, नेस्टेड बनाम एकाधिक?

Answer 1

मेरी समझ में, ऐसे कई दृश्य मुख्य रूप से लेआउट उद्देश्य के लिए है, जबकि नेस्टेड विचारों अभिभावक बच्चों श्रेणीबद्ध विचारों के लिए कर रहे हैं। मामले आपको एक उदाहरण के रूप में उल्लेख का उपयोग करना:

साइडबार और सामग्री दो अलग-अलग विचारों के रूप में व्यवस्थित किया जा सकता है:

$stateProvider.state('main', { 
     abstract: true, 
     url: '/main', //base url for the app 
     views: { 
     '': { 
       //this serves as a main frame for the multiple views 
       templateUrl: 'path/to/the/main/frame/template.html' 
     }, 
     'sideBar@main': { 
      templateUrl: 'path/to/the/sidebar/template.html' 
      }, 
     'content@main': { 
      templateUrl: 'path/to/the/content/template.html' 
     } 
     } 
}); 

निम्नलिखित फ्रेम हो सकती है path/to/the/main/frame/template.html टेम्पलेट:

<div class="row"> Header section </div> 
<div class="row> 
    <div class="col-sm-4"><div ui-view="sideBar"></div></div> 
    <div class="col-sm-8"><div ui-view="content"></div></div> 
</div> 

फिर साइडबार या सामग्री टेम्पलेट्स में, आप अपने बच्चों के सबव्यू/आंशिक घोंसले कर सकते हैं।

Answer 2

नेस्टेड राज्यों को घोंसले और समानांतर दोनों दृश्यों के साथ उपयोग किया जा सकता है।

नेस्टेड राज्यों के बारे में कुछ नोट करने के लिए बस।

नेस्टेड राज्य कहता है कि आप माता-पिता से बच्चे के दृश्य में आसानी से डेटा साझा/प्राप्त कर सकते हैं।

जैसे:।

चलें कहते हैं कि तुम कुछ पृष्ठों की आवश्यकता है कि एक उपयोगकर्ता में लॉग इन किया है है

$stateProvider 
.state('admin', { 
    url: '/admin' 
    resolve: { authenticate: authenticate } 
}) 
.state('admin.users', { 
    url: '/users' 
}) 

function authenticate(Auth) { 
    if (Auth.isLoggedIn()) { 
     // Resolve the promise successfully 
     return $q.when(); 
    } else { 
     $timeout(function() { 
      // This code runs after the authentication promise has been rejected. 
      // Go to the log-in page 
      $state.go('login', {}, {reload:true}); 
     }); 
     // Reject the authentication promise to prevent the state from loading 

    return $q.reject(); 
}  

अब हर राज्य है कि व्यवस्थापक का एक बच्चा राज्य authenticate सेवा पारित करने के लिए है (भले ही आप सीधे admin/users/ पर नेविगेट करें)।

तो मूल रूप से संकल्प में आप कुछ भी डाल सकते हैं और सभी बच्चे राज्य उस से प्राप्त होंगे।

समानांतर विचारों के लिए आपके पास अपने लेआउट पर पूर्ण नियंत्रण है।
@TonyGW के उदाहरण एक ही समय में अपने अनुप्रयोग में उन दोनों का उपयोग कर सकते, मैं नेस्टेड राज्यों और समानांतर विचारों मतलब है और आप भी समानांतर नेस्टेड दृश्य हो सकते हैं महान

आप है। यह वास्तव में आपके लेआउट लेआउट की संरचना पर निर्भर करता है।

यदि आप बच्चे के राज्यों को मूल स्थिति के एचटीएमएल के अंदर दिखाना चाहते हैं तो आपको नेस्टेड विचारों का उपयोग करना होगा।