CODEWITHSUNDEEP
angularjsangular-ui-router
Rohit Rane
Rohit Rane

Reputation: 2930

Angular UI-Router Unable to create a nested state for parent state with url '/' but succeeding incase of parent with url '/something'?

If I am defining a router configuration as :

export function routerConfig($stateProvider, $urlRouterProvider, $locationProvider) {
  'ngInject';
  $locationProvider.html5Mode(true);

  $stateProvider
    .state('myapp', {
      url: '/',
      templateUrl: 'app/main/main.html',
      controller: 'MainController',
      controllerAs: 'main'
    })
    .state('searchResults', {
      url: '/search',
      parent: 'myapp',
      templateUrl: 'app/search-results/search-results.html',
      controller: 'SearchResultsController',
      controllerAs: 'srchRes'

    });

  $urlRouterProvider.otherwise('/');
}

When I try hitting http://localhost/search , I am getting redirected to http://localhost. I don't know the reason why?

But this code is working :

export function routerConfig($stateProvider, $urlRouterProvider, $locationProvider) {
  'ngInject';
  $locationProvider.html5Mode(true);

  $stateProvider
    .state('myapp', {
      url: '/myapp',
      templateUrl: 'app/main/main.html',
      controller: 'MainController',
      controllerAs: 'main'
    })
    .state('searchResults', {
      url: '/search',
      parent: 'myapp',
      templateUrl: 'app/search-results/search-results.html',
      controller: 'SearchResultsController',
      controllerAs: 'srchRes'

    });

  $urlRouterProvider.otherwise('/');
}

Now when I do http://localhost/myapp/search is working perfectly.

Can't nested states be created out of states with the "url" property set to "/" root?

Upvotes: 0

Views: 29

Answers (1)

Austin
Austin

Reputation: 1291

I believe that the url property is optional and if you remove it from the parent you should be able to navigate to the child without any issues

Upvotes: 1

Related Questions