AngularJS - Redirect parent route to child route

Question

Parent template Accueil (which has no content) has two child templates section1 and section2. This is the code used for the routing :

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

This works fine if I go to /accueil/secion1 or /accueil/section2. The problem is that when I go to /accueil (having no content) I don't know how to redirect it to the 1st child template. Any ideas ?

score 3 · Answer 1 · edited May 23 '17 at 12:32

The solution (by design in UI-Router) is explained here:

we can use .when(), something like:

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

But with UI-Router 0.2.13 there is a bit different approach:

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

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

}]

And there is also a suggestion for 0.2.13 discussed here https://github.com/angular-ui/ui-router/issues/1584

The plunker

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

And the example

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

See it in action in a fork of the above plunkr that @yahyaKacem posted:

I think I'm gonna go with @Joshua Ohana's answer :D – Mehdiway Mar 02 '15 at 12:29 — Mehdiway, Mar 02 '15 at 12:29

Joshua Ohana · Accepted Answer · 2015-03-02T12:28:26.173

3

Do you never want to actually go to state accueil? If so the cleanest solution would be to make the parent state abstract and change the url of the 1st child to '', as below:

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

Now if you navigate simply to /accueil you'll go to section1, and append a /section2 to get to section2

edited Mar 02 '15 at 12:28

answered Mar 02 '15 at 12:19

Joshua Ohana

5,613
12
56
112

Thanks for the answer. Though I had to change the default route to `.otherwise('/accueil');` for it to work since `/accueil/section1` doesn't exist anymore – Mehdiway Mar 02 '15 at 12:27
My previous comment doesn't make any sense now :D – Mehdiway Mar 02 '15 at 12:28

AngularJS - Redirect parent route to child route

2 Answers2