How to load/render nested UI-Views in UI-Router

Question

I have an application with one page called index.html. This page is the main page inside the application which I load my partials into.

Here is my Index.html:

<body>
    <!--<div id="view" ng-view></div>-->
    <div id="view" ui-view></div>
</body>

I want to load a Partial into this but then a partial into the partial i have just added.

The partial i want to add in is called dashboard.html and should be called when /dashboard routing is hit. Then I want to load a partial into the UI-View inside dashboard.html.

I don't know what other information I would need to supply to make this happen?

EDIT:

    .state('dashboard', {
        url: '/dashboard',
        templateUrl: 'partials/dashboard.html',
        controller: 'dashboard'
    })
    .state('dashboard.item', {
        //url: '/dashboard/calender',
        templateUrl: 'partials/calender.html',
        controller: 'aceTrackerDash'
    })

My suggestion is to go through named views. Please provide html's code also. — Mr_Perfect, Dec 16 '16 at 06:48

score 0 · Accepted Answer · edited May 23 '17 at 12:33

Its good to define nested states for this purpose . When the application is in a particular state — when a state is "active" — all of its ancestor states are implicitly active as well. Below, when the "contacts.list" state is active, the "contacts" state is implicitly active as well, because it's the parent state to "contacts.list" . So all nested defined views are loaded in their proper position:

Example :

$stateProvider
  .state('contacts', {
    templateUrl: 'contacts.html',
    controller: function($scope){
      $scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }];
    }
  })
  .state('contacts.list', {
    templateUrl: 'contacts.list.html'
  });

<!-- index.html -->
<body ng-controller="MainCtrl">
   <div ui-view></div>
</body>

<!-- contacts.html -->
<h1>My Contacts</h1>
<div ui-view></div>

<!-- contacts.list.html -->
<ul>
  <li ng-repeat="contact in contacts">
    <a>{{contact.name}}</a>
  </li>
</ul>

Plunker : http://plnkr.co/edit/7FD5Wf?p=preview

Also take a look at this :

Angular-UI Router: Nested Views Not Working

Thanks for the answer I have edit my question and added my router but this still does not appear? — Ben Clarke, Dec 15 '16 at 21:20
@BenClarke I refer you to a more complete answer here in my answer — Ramin Omrani, Dec 15 '16 at 21:26

How to load/render nested UI-Views in UI-Router

1 Answers1