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 stackoverflow.com/questions/17544558/… — Victor Pudeyev
– Victor Pudeyev, Commented Jan 2, 2014 at 17:17

Jayram · Accepted Answer · 2014-01-02 17:12:11Z

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 2, 2014 at 17:12

Jayram

19.6k6 gold badges54 silver badges72 bronze badges

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

1 Comment

Victor Pudeyev Over a year ago

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 ;)

Jeff Hubbard · Accepted Answer · 2014-01-02 17:06:08Z

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 2, 2014 at 17:06

Jeff Hubbard

9,9123 gold badges33 silver badges29 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related