CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Michael Tot Korsgaard
Michael Tot Korsgaard

Reputation: 4014

Nested states won't load

So I've tried making nested states, with no luck so far.

What I've got so far is this

search.route.js

angular.module('myApp')
.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when('/search', '/search/model');

    $stateProvider
        .state('search', {
            abstract: true,
            url: '/search'
        });
});

model.route.js

angular.module('myApp')
.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('search.model', {
            url: '/model',
            templateUrl: 'app/search/model/model.html',
            controller: 'modelController'
        });
});

if I use searchModel as state name and /search/model as url rather than search.model and /model it works fine.

EDIT Okay, I wasn't clear the first time around ^^

Originally my code looked like this:

model.route.js

angular.module('myApp')
.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('searchModel', {
            url: '/search/model',
            templateUrl: 'app/search/model/model.html',
            controller: 'modelController'
        });
});

this worked fine. When I went to the url /search/model the html file along with the controller would load in.

But then I changed it to the code visible in the beginning of my question. Now when navigating to the url it won't load in the html along with the controller. I recieve no error messages or similar things which might give me a clue as to why it won't load in.

Upvotes: 0

Views: 34

Answers (1)

charlietfl
charlietfl

Reputation: 171679

You need a <ui-view> in abstract state for child states to load into.

Try:

$stateProvider
    .state('search', {
        abstract: true,
        url: '/search'. 
        template: '<ui-view></ui-view>'
    });

See Nested States docs

Upvotes: 1

Related Questions