AngularJS with ui-router and nested templates

Question

I have AngularJS with angular-ui-router to have more control over my templates. I have two URL's

"/timeline"
"/login"

My idea is to load a parent state which has both the HTML for 1 and 2 and a few partials.

I have a index.html which loads my partial view named "content":

<!doctype html>
<html lang="en" ng-app="myApp" id="ng-app">
  <body ng-controller="Login" class="auth-switch">
    <div class="body_wrap" ui-view="content"></div>
  </body>
</html>

This is what my partial view "content" looks like:

<div ui-view="header">
  <div ui-view="profile"></div>
  <div ui-view="messages" id="messages"></div>
</div>
<div ui-view="timeline"></div>
<div ui-view="login" ng-controller="Login"></div>
<div ui-view="footer"></div>

I try to create a structure here and want to load those templates. That is what I try to do in my app.js:

  // Now set up the states
  $stateProvider
    .state('content', {
      abstract: true,
      views: {
        "content": { templateUrl: "partials/content.html" }
      },
      access: access.public
    })
    .state('content.login', {
      url: "/login",
      views: {
        "messages": { templateUrl: "partials/messages.html" },
        "header": { templateUrl: "partials/header.html" },
        "login": { templateUrl: "partials/login.html" },
        "footer": { templateUrl: "partials/footer.html" }
      },
      controller: 'Login',
      access: access.public
    })
    .state('content.timeline', {
      url: "/timeline",
      views: {
        "messages": { templateUrl: "partials/messages.html" },
        "header": { templateUrl: "partials/header.html" },
        "timeline": { templateUrl: "partials/timeline.html" },
        "login": { templateUrl: "partials/login.html" },
        "footer": { templateUrl: "partials/footer.html" }
      },
      access: access.user
    })

As you can see I created a parent (abstract) state, which has two child states (login and timeline). My main questions are, how can I set this is up clean:

Do I need states for every partial template instead of using "views"?
How can I load the "messages" and "profile" templates within the "header" template?
I only need two URL's is it good to use two states in that case?

kapalani · Accepted Answer · 2013-12-09 21:59:11Z

0

Daan,

Say in one of your routes, 'content.login', are all the views ('messages', 'header', 'login', 'footer') affected by 'Login' controller. Is yes, then its alright but if its a no then you should not have these views in the router config. Instead you should add it to 'content' partial view.

Do I need states for every partial template instead of using "views"?

Short answer No. Maybe you should understand clearly what a partial is. Partial is like defining a chunk of your page that has it own view, controller and model. You can decide to make as many sub-partials you want.But, it depends on how complex your web app is. If you want to have more than one template (.html) nested templates and decide to have only one JS file (for controllers of the templates) that is pefectly fine. But if you feel that each template has more functionality of its own then you nest partials.

How can I load the "messages" and "profile" templates within the "header" template?

Nest partials

I only need two URL's is it good to use two states in that case?

If its 'url/login' and 'url/timeline' only you will need two states. But if you have 'url/timeline/abc' or 'url/abc' you will need another new state for each of these.

If you think its very messy try using 'objects' for state instead of having this messy config(). - https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

answered Dec 9, 2013 at 21:59

kapalani

231 silver badge6 bronze badges

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

6 Comments

Daan Over a year ago

I understand answer 1 and 3 clearly, thank you. But for answer 2, my question still remains, if I want to have only 2 states (timeline, login), how do I define deeper nested .html files (like "header" > "profile") and how can I always include the "header" (indepedent of timeline/login) .html file (the ui-router way)? Could you maybe give an example?

kapalani Over a year ago

I am confused by 'independant of timeline/login' and 'ui-router way'. Is it that header.html, profile.html and messages.html load content based on if it is in url/login or url/timeline ?

Daan Over a year ago

The header.html and messages.html should always be loaded, since they need to be used by every controller. The profile.html needs to be loaded only when we are in the timeline controller. So basically how do I setup my controller with states in this case

kapalani Over a year ago

If header.html and messages.html are always loaded then instead of having separate .html file for each of these add the html to content.html and give access to the controllers as necessary. If profile.html need to be loaded only with timeline.html then the state 'content.timeline' should have only two views "timeline": { templateUrl: "partials/timeline.html" templateUrl: "partials/login.html" (considering you will move footer.html out to content.html)

Igor Malyk Over a year ago

The URL is broken, could you please reupload it ?

|

Collectives™ on Stack Overflow

AngularJS with ui-router and nested templates

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related