CODEWITHSUNDEEP
angularjstemplatesroutesstateangular-ui-router
Daan
Daan

Reputation: 7925

AngularJS with ui-router and nested templates

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

  1. "/timeline"
  2. "/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:

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

Upvotes: 1

Views: 3665

Answers (1)

kapalani
kapalani

Reputation: 23

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

Upvotes: 0

Related Questions