In Angular, the url router embedded state url, but the pattern is not loading

Question

I use ui-router for nested states and views. When I click on the link, the URL changes to the URL for the substation, but the template does not load.

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

Here is the courtesy of SSCCE Plunkr

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

First of all, change the file name project.settings.html to templateurl and the file name to projectSettings.html (delete point).

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

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

Note. Any content in these 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> 

Answer 2

The nested state of project.settings must address the view in a higher state explicitly using the suffix '@', that is:

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

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

Answer 3

I had the same problem and the solution was to place the ui-view in the parent template. Because your partial parts also need too if they will load the template from a child state. See here https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-templates-are-not-appearing--loading--showing

Answer 4

If you use nested views with a UI router, be sure to add the ui-view to the html of the parent page and include certain named views.

Answer 5

I had the same problem, the solution was; open the project.html file (which is the parent) and complete everything in <ui-view>

So replace them:

 <div ng-controller="userController"> <div class="details"> <a ui-sref=".settings" class="btn btn-primary">Settings</a> </div> </div> 

with these:

 <ui-view> <div ng-controller="userController"> <div class="details"> <a ui-sref=".settings" class="btn btn-primary">Settings</a> </div> </div> </ui-view> 

and you will be good to go;)

Answer 6

Use ui-sref="project.settings" for the link in the project.html template.