एंगुलरजेएस में यूआई-राउटर के साथ डिफ़ॉल्ट रूप से बदले जाने की स्थिति को पुनर्निर्देशित करें

Question 1

मैं एक टैब आधारित पेज बना रहा हूं जो कुछ डेटा दिखाता है। मैं राज्यों को पंजीकृत करने के लिए AngularJs में UI-Router का उपयोग कर रहा हूं।

मेरा उद्देश्य पृष्ठ लोड पर एक डिफ़ॉल्ट टैब खोलना है। प्रत्येक टैब में उप टैब होते हैं, और मैं टैब बदलते समय एक डिफ़ॉल्ट उप टैब खोलना चाहता हूं।

मैं onEnterफ़ंक्शन के साथ परीक्षण कर रहा था और अंदर मैं उपयोग कर रहा हूं, $state.go('mainstate.substate');लेकिन यह लूप इफेक्ट के मुद्दों के कारण काम नहीं कर रहा है (स्टेट पर। इसे बदलने के लिए इसकी मूल स्थिति और इतने पर कॉल करता है, और यह लूप में बदल जाता है)।

$stateProvider

.state('main', {
  url: '/main',
  templateUrl: 'main.html',
  onEnter: function($state) {
    $state.go('main.street');
  }
})

.state('main.street', {
  url: '/street',
  templateUrl: 'submenu.html',
  params: {tabName: 'street'}
})

यहाँ मैंने एक प्लंकर डेमो बनाया ।

अभी के लिए सब कुछ काम करता है, सिवाय इसके कि मेरे पास डिफ़ॉल्ट टैब खुला नहीं है और मुझे वही चाहिए जो मुझे चाहिए।

आपके सुझाव, राय और विचारों के लिए धन्यवाद।

Question 2

अद्यतन: 1.0 बाद में बॉक्स से बाहर रीडायरेक्ट का समर्थन करता है।

https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#redirectto

मैंने यहां एक उदाहरण बनाया ।

यह समाधान पुनर्निर्देशन .when() ( https://stackoverflow.com/a/27131114/1679310 ) और इसके लिए वास्तव में अच्छा समाधान (क्रिस टी द्वारा, लेकिन मूल पोस्ट yahkKacem द्वारा ) का उपयोग करके एक मुद्दे पर एक अच्छी "टिप्पणी" से आया है।

https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373

तो पहले मुख्य रूप से पुनर्निर्देशन सेटिंग के साथ विस्तार करें:

$stateProvider
    .state('main', {
      url: '/main',
      templateUrl: 'main.html',
      redirectTo: 'main.street',
    })

और केवल कुछ पंक्तियों को चलाने में जोड़ें

app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params, {location: 'replace'})
      }
    });
}]);

इस तरह हम अपने किसी भी राज्य को उसके डिफ़ॉल्ट पुनर्निर्देशन के साथ समायोजित कर सकते हैं ... इसे यहां देखें

EDIT: ब्राउज़र इतिहास को संरक्षित करने के लिए @Alec द्वारा टिप्पणी से जोड़ा गया विकल्प।

Question 3

वास्तव में, भले ही रेडिम द्वारा प्रस्तावित इस समाधान ने बिल्कुल काम किया हो, मुझे हर टैब के उप टैब (राज्य) को याद रखने की आवश्यकता थी।

तो मुझे एक और समाधान मिला जो एक ही काम करता है लेकिन यह भी याद है कि हर टैब सब्स्टिट्यूट है।

मुझे बस इतना करना है कि यूआई-राउटर-एक्स्ट्रा स्थापित करना और गहरी राज्य पुनर्निर्देशित सुविधा का उपयोग करना है :

$stateProvider
  .state('main.street', {
     url: '/main/street',
     templateUrl: 'main.html',
     deepStateRedirect: { default: { state: 'main.street.cloud' } },
  });

धन्यवाद!

Question 4

Ui-रूटर के संस्करण 1.0 के रूप में यह एक redirectToसंपत्ति का समर्थन करता है । उदाहरण के लिए:

.state('A', {
  redirectTo: 'A.B'
})

Question 5

Ui- राउटर के संस्करण 1.0 के बाद से, IHookRegistry.onBefore () उदाहरण के रूप में http://angular-ui.github.io/ui-router-feature-1.0/ में डेटा चालित डिफ़ॉल्ट सब्सट्रेट का उपयोग करके एक डिफ़ॉल्ट हुक पेश किया गया है । इंटरफेस / transition.ihookregistry.html # onbefore

// state declaration
{
  name: 'home',
  template: '<div ui-view/>',
  defaultSubstate: 'home.dashboard'
}

var criteria = {
  to: function(state) {
    return state.defaultSubstate != null;
  }
}
$transitions.onBefore(criteria, function($transition$, $state) {
  return $state.target($transition$.to().defaultSubstate);
});

Question 6

app.config(function($stateProvider,$urlRouterProvider){

    $urlRouterProvider.when("/state","/state/sub-state");

    })

Question 7

यदि कोई व्यक्ति किसी राज्य के लिए एक सरल पुनर्निर्देशन को लागू करने के बारे में एक जवाब के लिए यहां आता है और जैसा कि मेरे साथ हुआ है, तो नए राउटर का उपयोग करने का अवसर नहीं है ...

जाहिर है अगर आप फिर से कर सकते हैं, तो @bblackwo का जवाब शानदार है:

$stateProvider.state('A', {
  redirectTo: 'B',
});

यदि आप तब इसे मैन्युअल रूप से पुनर्निर्देशित नहीं कर सकते हैं:

$stateProvider.state('A', {
  controller: $state => {
    $state.go('B');
  },
});

मुझे उम्मीद है यह मदद करेगा!