एकाधिक मॉड्यूल के साथ ui-राउटर के साथ राज्य का प्रबंधन कैसे करें

Question

मेरे पास 3 कॉलम वाला एक ऐप पृष्ठ है। मध्य स्तंभ मुख्य गतिविधि है और हमेशा प्रदर्शित होता है। दोनों तरफ कॉलम विजेट सूचियां हैं, जिनके पास अपने स्वयं के नियंत्रक और राज्य हैं, और या तो छुपा या अप्रयुक्त हो सकते हैं, और उनके भीतर कई विचार भी हो सकते हैं। आदर्श रूप में, मैं की तरह इस यूआरएल मार्गों कल्पना: - मुख्य गतिविधि दिखाया गया है, दोनों पैनलों

/ऐप्स/1234 छिपा हुआ -

/एप्लिकेशन मुख्य गतिविधि दिखाया गया है, लेकिन 1234 इकाई

के लिए जानकारी से पता चलता

/ऐप्स/1234/leftpanel - मुख्य गतिविधि 1234 इकाई के साथ दिखाया गया है, और leftpanel खुला है

/ऐप्स/1234/leftpanel/सूची - मुख्य गतिविधि 1234 इकाई के साथ दिखाया गया है, और leftpanel सूची दृश्य

दिखा रहा है

/ऐप/बाएं पैनेल/सूची - मुख्य एसी टिविटी डिफ़ॉल्ट स्थिति दिखा रहा है, बाएं पैनेल अभी भी सूची दिखा रहा है

क्या यह यूई-राउटर के साथ सेटअप करना संभव है? मैं इस उदाहरण देखा है:

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

से पता चलता है जो कई मॉड्यूल के बीच $ stateProvider का उपयोग कैसे करें, लेकिन मैं अभी भी नहीं दिखाई दे रहा है कि कैसे इस परिदृश्य काम

Answer 1

मैं हल किया बनाने के लिए मुद्दा। मैंने इसके बारे में कोणीय-यूई गिथब पर भी पोस्ट किया, और उनकी प्रतिक्रिया मूल रूप से थी, "ठीक है, यह मामला वास्तव में राउटर के लिए डिज़ाइन नहीं किया गया है, इसलिए यदि आप" फैनसीयर "राज्य प्रबंधन चाहते हैं, तो डेटा को पैरामीटर में रखें और उन्हें स्वयं देखें और आपको जो भी तर्क चाहिए उसे लागू करें "। मैंने थोड़ी सी महसूस की कि यूई-राउटर के लिए यह डिजाइन किया गया था, इसलिए मैंने इसे पूरा करने के लिए इसे थोड़ा बढ़ाया (कोई स्रोत कोड परिवर्तन नहीं)। समाधान अमूर्त राज्यों का एक संयोजन है, एक नकली "ऑफ" राज्य, राउटर यूआरएल में पैरामीटर, और $ urlRouterProvider सेवा का विस्तार।

पहले विस्तार $ urlRouterProvider:

urlRouterProvider.when(/^((?!leftpanel).)*$/, ['$state', '$location', function ($state, $location) { 
//we've got just /app or /app/3434, nothing that contains /leftpanel, so turn off  
$state.transitionTo("off"); 
    }]); 

तब कि "बंद" राज्य जोड़ें:

appModule.constant('LEFT_PANEL_STATES', function() { 

var leftPanelRoot = { 
    name: 'root.leftpanel', //mandatory 
    template: '', 
    url: "/app/:primaryId/leftpanel", 
    views:{ 
     'container@': { 
      templateUrl: "partials/leftpanel_container_partial.html", 
      controller:"LeftPanelRootCtrl", 
      resolve: { 
      //etc 
      } 
     } 
    }, 
    "abstract":true //makes this view only viewable from one of its child states 
}; 

var leftPanelItemsList = { 
    name: 'root.leftpanel.itemslist', //mandatory 
    parent: leftPanelRoot, //mandatory 
    url: "/items-list", 
    views:{ 
     'childview@root.leftpanel': { 
      templateUrl: "partials/leftpanel_items_list.html", 
      controller:"LeftPanelItemsListCtrl", 
      resolve: { 
      //etc 
      } 
     } 
    }}; 


var leftPanelListDetail = { 
name:"root.leftpanel.itemslist.detail", 
parent:leftPanelItemsList, 
url:"/:id/detail", 
views:{ 
    "detail":{ 
    templateUrl:"partials/leftpanel_item_detail.html", 
    controller:"LeftPanelItemListDetailCtrl" 
    } 
}}; 

    var leftPanelExtendedDetailList = { 
name:"root.leftpanel.itemslist.extendedlist", 
parent:leftPanelItemsList, 
url:"/:id/extendedDetail/list", 
views:{ 
    "extendeddetaillist":{ 
    templateUrl:"partials/leftpanel_extended_detail_list.html", 
    controller:"LeftPanelExtendedDetailListCtrl" 
    } 
}};