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 exampl

Answer 1

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

     

        

            Settings
        
        
( Project Page header will replace with projectSettings header )
        
( Project Page content will replace with projectSettings Content )