How can I render two angular.js views on the same page?

Question

If I have two <div ng-view></div> elements on the same page, angular.js only uses the first one. I am looking to have two templates (with two controllers and two partials) rendered on the same page, how do I do that? The code below does not work but I'd like to have something along these lines.

<div class="row">
  <div class="large-6 small-12 columns">
    <div ng-controller="SitesHomeCtrl" >
      <div ng-view>
      </div>
    </div>
  </div>
  <div class="large-6 small-12 columns">
    <div ng-controller="UsersMeetCtrl" >
    </div>
  </div>
</div>

Looks like it was asked before with the answer given as ui-router http://stackoverflow.com/questions/17544558/multiple-ng-view-in-single-template-angular-js — Victor Pudeyev, Jan 02 '14 at 17:17

score 5 · Accepted Answer · answered Jan 02 '14 at 17:12

5

ui-router is the best option but if you are going with $routeProvider, you could use ng-include (with ng-show/ng-hide) or ng-switch to achieve the same.

answered Jan 02 '14 at 17:12

Jayram

18,820
6
51
68

Thanks, ng-include looks good for what I would like to achieve at this time. `ui-router` looks like a good solution for some later tasks, however ;) – Victor Pudeyev Jan 02 '14 at 17:28

score 4 · Answer 2 · answered Jan 02 '14 at 17:06

4

I imagine you're probably going to want to look at ui-router in place of angular's router at this point, as angular's router does not support multiple ng-view elements.

answered Jan 02 '14 at 17:06

Jeff Hubbard

9,822
3
30
28

How can I render two angular.js views on the same page?

2 Answers2