AngularJS - перенаправление родительского маршрута на детский маршрут

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 (не имея контента), я не знаю, как перенаправить его на 1-й дочерний шаблон. Есть идеи ?

Answer 1

Вы никогда не хотите, чтобы на самом деле идти в государственную Accueil? Если это так чистое решение было бы сделать родительское состояние аннотацию и изменить URL-адрес 1-го ребенка до «», как показано ниже:

$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 вы будете идти к section1, и добавьте/section2, чтобы перейти к разделу2

Answer 2

решение (дизайн в UI-маршрутизатор) объясняется здесь:

• Angular UI-Router $urlRouterProvider .when not working *anymore*
• Angular UI-Router $urlRouterProvider .when not working when I click <a ui-sref="...">

мы можем использовать .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

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

в действии в вилке выше plunkr что @yahyaKacem публикуемую: