Michael Tot Korsgaard Michael Tot Korsgaard - 4 months ago 8
AngularJS Question

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.

Answer

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