Chuyển hướng một trạng thái đến địa chỉ mặc định với UI-Router trong AngularJS

Tôi đang tạo một trang dựa trên tab hiển thị một số dữ liệu. Tôi đang sử dụng UI-Router trong AngularJs để đăng ký trạng thái.

Mục đích của tôi là mở một tab mặc định khi tải trang. Mỗi tab đều có các tab phụ và tôi muốn mở một tab phụ mặc định khi thay đổi tab.

Tôi đã thử nghiệm với onEnterchức năng và bên trong tôi đang sử dụng $state.go('mainstate.substate');nhưng có vẻ như nó không hoạt động do các vấn đề về hiệu ứng vòng lặp (trên state.go để cấp dưới nó gọi trạng thái mẹ của nó, v.v. và nó biến thành một vòng lặp).

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

Ở đây tôi đã tạo một bản demo plunker .

Hiện tại, mọi thứ đều hoạt động, ngoại trừ việc tôi không mở tab mặc định và đó chính xác là những gì tôi cần.

Cảm ơn bạn đã đề xuất, ý kiến ​​và ý tưởng của bạn.

Cập nhật: 1.0 Trở đi Hỗ trợ chuyển hướng Đi ra khỏi hộp.

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

Tôi đã tạo một ví dụ ở đây .

Giải pháp này đến từ một "Nhận xét" hay cho sự cố chuyển hướng bằng cách sử dụng .when() ( https://stackoverflow.com/a/27131114/1679310 ) và giải pháp thực sự tuyệt vời cho nó (bởi Chris T, nhưng bài đăng gốc là của yahyaKacem)

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

Vì vậy, trước tiên hãy mở rộng main với cài đặt chuyển hướng:

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

Và chỉ thêm vài dòng này vào chạy

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

Bằng cách này, chúng tôi có thể điều chỉnh bất kỳ trạng thái nào của chúng tôi với chuyển hướng mặc định của nó ... Kiểm tra nó ở đây

CHỈNH SỬA: Đã thêm tùy chọn từ nhận xét của @Alec để lưu giữ lịch sử trình duyệt.

Trên thực tế, ngay cả khi giải pháp này do Radim đề xuất đã thực hiện chính xác công việc, tôi cần phải nhớ từng tab phụ (trạng thái) của tab.

Vì vậy, tôi đã tìm thấy một giải pháp khác làm điều tương tự nhưng cũng ghi nhớ mọi tab phụ.

Tất cả những gì tôi phải làm là cài đặt ui-router-extras và sử dụng tính năng chuyển hướng trạng thái sâu :

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

Cảm ơn bạn!

Kể từ phiên bản 1.0 của ui-router, nó hỗ trợ một thuộc redirectTotính. Ví dụ:

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

Kể từ phiên bản 1.0 của ui-router, một hook mặc định đã được giới thiệu bằng cách sử dụng IHookRegistry.onBefore () như được minh họa trong ví dụ Data Driven Default Substate trong http://angular-ui.github.io/ui-router/feature-1.0/ interface / transfer.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");

    })

Nếu ai đó đến đây để tìm câu trả lời về cách triển khai chuyển hướng đơn giản cho một trạng thái và, như điều đó đã xảy ra với tôi, không có cơ hội sử dụng bộ định tuyến mới ...

Rõ ràng một lần nữa nếu bạn có thể, câu trả lời @bblackwo thật tuyệt:

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

Nếu bạn không thể thì chỉ cần chuyển hướng thủ công:

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

Tôi hy vọng nó sẽ giúp!