Alihkan status ke substrat default dengan UI-Router di AngularJS

Saya membuat halaman berbasis tab yang menampilkan beberapa data. Saya menggunakan UI-Router di AngularJs untuk mendaftarkan status.

Tujuan saya adalah membuka satu tab default pada pemuatan halaman. Setiap tab memiliki sub tab, dan saya ingin sub tab default terbuka saat mengganti tab.

Saya sedang menguji dengan onEnterfungsi dan di dalam yang saya gunakan $state.go('mainstate.substate');tetapi tampaknya tidak berfungsi karena masalah efek loop (di state.go ke substate itu memanggil status induknya dan seterusnya, dan itu berubah menjadi loop).

$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'}
})

Di sini saya membuat demo plunker .

Untuk saat ini semuanya berfungsi, kecuali saya tidak memiliki tab default terbuka dan itulah yang saya butuhkan.

Terima kasih atas saran, pendapat, dan ide Anda.

Pembaruan: 1.0 Maju Mendukung redirectTo di luar kotak.

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

Saya membuat contoh di sini .

Solusi ini berasal dari "Komentar" yang bagus untuk masalah pengalihan menggunakan .when() ( https://stackoverflow.com/a/27131114/1679310 ) dan solusi yang sangat keren untuk itu (oleh Chris T, tetapi pos aslinya adalah oleh yahyaKacem)

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

Jadi pertama-tama mari kita kembangkan main dengan pengaturan redirection:

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

Dan tambahkan hanya beberapa baris ini untuk dijalankan

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'})
      }
    });
}]);

Dengan cara ini kita dapat menyesuaikan status kita dengan pengalihan default ... Periksa di sini

EDIT: Menambahkan opsi dari komentar oleh @Alec untuk menjaga riwayat browser.

Bahkan jika solusi yang diusulkan oleh Radim ini benar-benar berfungsi , saya perlu mengingat setiap sub tab (status) tab.

Jadi saya menemukan solusi lain yang melakukan hal yang sama tetapi juga mengingat setiap substrat tab.

Yang harus saya lakukan adalah menginstal ui-router-extras dan menggunakan fitur pengalihan status dalam :

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

Terima kasih!

Pada versi 1.0 dari ui-router, ini mendukung redirectToproperti. Sebagai contoh:

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

Sejak versi 1.0 dari ui-router, hook default telah diperkenalkan menggunakan IHookRegistry.onBefore () seperti yang ditunjukkan dalam contoh Substate Default Berbasis Data di http://angular-ui.github.io/ui-router/feature-1.0/ interfaces / transisi.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);
});

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

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

    })

Jika seseorang datang ke sini untuk mendapatkan jawaban tentang cara menerapkan pengalihan sederhana untuk suatu status dan, seperti yang terjadi pada saya, tidak memiliki kesempatan untuk menggunakan router baru ...

Jelas sekali lagi jika Anda bisa, jawaban @bblackwo bagus:

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

Jika Anda tidak bisa, alihkan saja secara manual:

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

Saya harap ini membantu!