Currently, I am faced with an issue while using ui-router for nested states & views. Whenever I click on the link, the URL transitions to the substate URL correctly, but unfortunately, the associated template fails to load.
For instance, when the URL changes to the substate project/settings, the respective template project.settings.html does not seem to be loading as expected.
To demonstrate this problem, you can view the SSCCE provided through Plunkr
Below is the snippet of my code:
app.js
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider
.state('project', {
url: "/project",
views:{
"content":{templateUrl: "partials/project.html"},
"header":{templateUrl: "partials/header"}
}
})
.state('project.settings', {
url: "/settings",
views:{
"content":{templateUrl: "partials/project.settings.html"},
"header":{templateUrl: "partials/header"}
}
})
$urlRouterProvider.otherwise("/")
});
/* checking if the user is authenticated or not*/
myApp.run(function($rootScope,$location,$cookieStore,validateCookie,$state) {
$rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState){
if($cookieStore.get('user')){
validateCookie.authService(function(result,error){
if(!result){
$location.path("/");
}else{
$state.go('project.settings');
}
});
}
else{
$location.path("/");
}
});
});
index.html
<div ng-controller="userController">
<div ui-view="header"></div>
<div class="container" ui-view="content"></div>
</div>
project.html
<div ng-controller="userController">
<div class="details">
<a ui-sref=".settings" class="btn btn-primary">Settings</a>
</div>
</div>
project.settings.html
<h1>Project Setting - State test</h1>