1

In my application I have an index.html file where i have loaded all the required scripts and the body contains am empty ng-view whose content will update based on the route url. The first page is a landing page where I'am showing a button to the user, clicking on which am showing Login Page, by changing the path value of $location.

On Successful login a dashboard page should come where header, sidebar footer area is going to be fixed and only the center area is going to be changed based on the menu clicks which is there in header section, by changing the route value so the center area i declared as

when am trying to load the dashboard.html page it is going to infinite loop and when am removing the center div which is nothing but an empty view , my view is rendering fine. So the problem is with using the

Can anyone suggest me whether my understanding is corect ??

If yes please suggest me how to achieve my requirement...

index.html

    <div class="row">
         <div data-ng-view=""></div>

    </div>

dashBoard.html

<div class = "row">
      <header div here>
      <div>
          <sidebar div>
          **<div data-ng-view = ""></div>**   which is not working
      </div>
      <footer div here>
</div>

I have provided the html code

Thanks

hansmaad
  • 18,417
  • 9
  • 53
  • 94
user2211050
  • 139
  • 1
  • 10

2 Answers2

2

What you're trying to do is not supported by the default router. You can try ui-router which supports multiple and nested views. You can see an example here http://plnkr.co/edit/7FD5Wf?p=preview. The index.html contains the main view.

<body ng-controller="MainCtrl" class="container">
  <div ui-view></div>
</body>

Inside contacts.html there is another view

<h1>My Contacts</h1>
<div ui-view></div>
hansmaad
  • 18,417
  • 9
  • 53
  • 94
1

Try checking the difference between route provider and state provider. Here's a link to ease your search.

Community
  • 1
  • 1
Sagar
  • 477
  • 4
  • 15