javascript - In Angular ui-router nested state url changes,but template is not loading

Question

I am using ui-router for nested states & views. When I click on the link, the URL changes to the URL for the substate, but the template does not load.

For example, when the URL changes to the substate project/settings, the corresponding template project.settings.html is not loading.

Here is an SSCCE courtesy of Plunkr

Below is my code as well:

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("/")                   
   }); 

    /* cheching whether the user is authentic 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>

Answer 1

Your nested project.settings state needs to address the view in the higher state explicitly using an '@' suffix, ie.:

.state('project.settings', {
        url: "/settings",
        views:{
              "content@":{templateUrl: "partials/project.settings.html"},
              "header@":{templateUrl: "partials/header"}
        }
 }) 

See more details here https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names