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>

Any luck with this? I have the exact same issue.

ac360
– ac360

2014-01-30 17:03:17 +00:00
Commented Jan 30, 2014 at 17:03 — ac360
– ac360, Commented Jan 30, 2014 at 17:03

Vladyslav Babenko · Accepted Answer · 2015-07-06 11:28:18Z

23

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

edited Jul 6, 2015 at 11:28

answered Dec 2, 2014 at 14:19

Vladyslav Babenko

1,37918 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

theblang Over a year ago

I was wondering why I had seen the @ sign. I think this just opened my eyes. In my case I needed to use content@ because the ui-view I was using for content was in my index.html. It seems to be working; I am hoping this is the correct way to do this.

Rohit Over a year ago

thank you, although a different issue then described here, your views@ gave me a hint and I realized it was referencing wrong parent.

Community · Accepted Answer · 2016-02-13 23:39:26Z

19

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>

edited Feb 13, 2016 at 23:39

CommunityBot

11 silver badge

answered Feb 7, 2014 at 6:02

Sajin M Aboobakkar

4,2394 gold badges34 silver badges40 bronze badges

1 Comment

Ben Over a year ago

Thanks! After maybe 6 other answers this is the one that got me through. What was I missing? Add two divs in the project template.

Demven Weir · Accepted Answer · 2015-02-07 09:37:53Z

3

I had the same issue and the solution was to place ui-view to your parent's template. Because your partials also need a too, if they will be loading a 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

answered Feb 7, 2015 at 9:37

Demven Weir

9047 silver badges6 bronze badges

Comments

cfranklin · Accepted Answer · 2015-04-17 11:26:31Z

2

If using nested views with UI-router, be sure to add ui-view into the html of the parent page and include specific named views.

edited Apr 17, 2015 at 11:26

cfranklin

1,4901 gold badge13 silver badges14 bronze badges

answered Sep 20, 2014 at 2:57

Thinkerer

1,6266 gold badges23 silver badges43 bronze badges

Comments

Must Ckr · Accepted Answer · 2017-05-10 19:57:01Z

1

I had the same issue, the solution was; open the project.html file (which is the parent page) and wrap everything within <ui-view>

So, replace these:

<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 ;)

answered May 10, 2017 at 19:57

Must Ckr

3703 silver badges5 bronze badges

Comments

coquin · Accepted Answer · 2014-01-29 07:39:39Z

0

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

answered Jan 29, 2014 at 7:39

coquin

1,3861 gold badge13 silver badges22 bronze badges

3 Comments

Sajin M Aboobakkar Over a year ago

already tried replacing .setting with project.setting .Anyway thanks

coquin Over a year ago

Can you provide working plunker/fiddle (your plunker doesn't seem to work)?

Sajin M Aboobakkar Over a year ago

The code in the plunkr is not a running one, I will improve it.I just thought, it will be helpfull to edit and compile,if anyone interested.thank you for your suggestions.

Collectives™ on Stack Overflow

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

app.js

index.html

project.html

project.settings.html

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

app.js

index.html

project.html

project.settings.html

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related