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

Answer 2

First of all change file name project.settings.html in templateurl and file name to projectSettings.html (remove dot).

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

Add two divs in the project template to load the sub pages (header abd projectSettings)

Note: Any content in this divs will be replaced with the page loaded here.

project.html

     <div ng-controller="userController">         <div class="details">             <a ui-sref=".settings" class="btn btn-primary">Settings</a>         </div>         <div ui-view="header">( Project Page header will replace with projectSettings header )</div>         <div class="container" ui-view="content">( Project Page content will replace with projectSettings Content )</div>      </div>