Using multiple views in the same page using AngularJS

Question

Is it possible to use multiple view in the same SPA using AngularJS?

I am planning to use 1 view for the header-bar of the page, second one for the body of the page and the third one for the footer of the page. So that the header and footer view don't change every time the location is routed instead only change when depending on the action the user performs on the body, such as click on "Change header" button in the body view etc.

An example would really help.

Thanks.

ryeballar · Accepted Answer · 2014-08-12 10:27:41Z

3

You can use ng-include for this:

<div ng-include="'my-header.html'"></div>
<!-- body -->
<div ng-view></div>
<div ng-include="'my-footer.html'"></div>

answered Aug 12, 2014 at 10:27

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

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

1 Comment

Temp O'rary Over a year ago

Thanks. Also, I found an example for this @ Plunker

Guillaume Besson · Accepted Answer · 2014-08-12 10:35:38Z

1

You should use UI-Router. It's a well maintained community project that replace the basic ng-router.

It has a lot more functionalities than ng-router, including multiple views.

answered Aug 12, 2014 at 10:35

Guillaume Besson

5722 silver badges9 bronze badges

Collectives™ on Stack Overflow

Using multiple views in the same page using AngularJS

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related