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

angular-ui-router, angularjs, javascript

Solution

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>

Problem

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> ```

Original source