Question

父模板Accueil（没有内容）有两个子模板section1和section2。这是用于路由的代码：

    $urlRouterProvider.otherwise('/accueil/section1');
    $stateProvider
        .state('accueil', {
            url: '/accueil',
            templateUrl: 'pages/accueil.html'
        })
        .state('accueil.section1', {
            url: '/section1',
            templateUrl: 'templates/section1.html'
        });
        .state('accueil.section2', {
            url: '/section2',
            templateUrl: 'templates/section2.html',
            controller: 'sectionCtrl'
        })

如果我转到/accueil/secion1或/accueil/section2，这可以正常工作。问题是，当我转到/accueil（没有内容）时，我不知道如何将其重定向到第一个子模板。有什么想法吗？

Answer 1

此处解释了解决方案（在UI-Router中设计）：

我们可以使用.when()，例如：

$urlRouterProvider
  .when('/accueil', ['$state', 'myService', function ($state, myService) {
        $state.go('accueil.section1');
}])
.otherwise('/app');

但是对于UI-Router 0.2.13，有一种不同的方法：

var onChangeConfig = ['$rootScope', '$state',
 function ($rootScope, $state) {

  $rootScope.$on('$stateChangeStart', function (event, toState) {    
    if (toState.name === "accueil") { 
      event.preventDefault();
      $state.go('accueil.section1');
    }
  });

}]

此处还讨论了0.2.13 https://github.com/angular-ui/ui-router/issues/1584

的建议

the plunker

http://plnkr.co/edit/dcN7Qra6nY9ZTOGjgCvJ?p=preview

示例

  $stateProvider.state('profile' , {
      url: "/about",
      templateUrl: "profile.html",
      redirectTo: 'profile.about'
  });

 app.run($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
  }

在@yahyaKacem张贴的上述插件的叉子中看到它的实际效果：

Answer 2

你真的不想真正去州政府吗？如果是这样，最干净的解决方案是使父状态为摘要，并将第一个孩子的URL更改为＆＃39;＆＃39;＆＃39;，如下所示：

$urlRouterProvider.otherwise('/accueil');
$stateProvider
    .state('accueil', {
        url: '/accueil',
        templateUrl: 'pages/accueil.html',
        abstract: true
    })
    .state('accueil.section1', {
        url: '',
        templateUrl: 'templates/section1.html'
    });
    .state('accueil.section2', {
        url: '/section2',
        templateUrl: 'templates/section2.html',
        controller: 'sectionCtrl'
    })

现在，如果您只是导航到/ accueil，您将转到第1部分，并附加/ section2以转到第2部分

AngularJS - 将父路由重定向到子路由

2 个答案: