Multiple views with angular

Question

So I am trying to display multiple views in angular to help fix the footer problem I am having with this site I am building. I want to make sure that what I have been reading about and trying to mimic is making sense. This is what I have so far.

index.html

<!--Do not code below this line-->
<main ng-view="header"></main>
<main ng-view="body"></main>
<main ng-view="footer"></main>

routes.js file

angular.module('appRoutes', ['ngRoute'])

.config(function ($routeProvider, $locationProvider) {
$routeProvider
    .when('/', {
        views: {
            'header': {
                temmplateUrl: 'app/views/header.html'
            },
            'body':   {
                templateUrl: 'app/views/body.html'
            },
            'footer': {
                templateUrl: 'app/views/footer.html'
            }
        }
    })

I have it working where I have just one view and have my header and footer inside the index.html file but I saw that you can have multiple views and really just switch out the "body" view with other pages.

Any advice would be much appreciated. Thank you

you are looking to use ui-router, not ng-route. I dont think ng route supports multiple ng-views ui-router.github.io — Ronnie
– Ronnie, Commented Jan 19, 2017 at 0:49
Ahh ok cool I will push the original again to github just to make sure I have a back up copy and change all my routes to use $stateprovider. I really need to learn the difference between ngRoute and ui-router so that I can better decide how I want to build out from now on. i will be sure to update this when I have it working to just help other newbies. — Lj Craft
– Lj Craft, Commented Jan 19, 2017 at 0:57
the beauty about ui-router is you can embed views inside of views inside of views etc — Ronnie
– Ronnie, Commented Jan 19, 2017 at 1:09

willesreis · Accepted Answer · 2017-01-19 01:30:41Z

1

To display multiple views you could use only ng-include.
See https://docs.angularjs.org/api/ng/directive/ngInclude for more ngInclude details.
Here is a example: (notice the wrap in single quotes)

<div id="header">
    <div ng-include="'header.html'"></div>
</div>
<div id="content" ng-view></div>
<div id="footer">
    <div ng-include="'footer.html'"></div>
</div>

Use ngRoute with ng-view to define a region (e.g div#content) where will be changed the dynamic content (as partial html).
See https://docs.angularjs.org/api/ngRoute/directive/ngView for more ngRoute details.

Good luck!

answered Jan 19, 2017 at 1:30

willesreis

275 bronze badges

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

2 Comments

Lj Craft Over a year ago

inside the single quotes is that the route to the page as in you have that view just inside the main folder or in my case do I insert the route to the template in there as in my case it would be <div id="footer"> <div ng-include=" 'apps/views/templates/users/footer.html' "> </div>

willesreis Over a year ago

Exactly, ng-include finds by relative path. In addition, ng-include does "get resource", therefore maybe restricted by browser's CORS policy.

Maciej Caputa · Accepted Answer · 2017-01-19 01:18:43Z

0

You can have just one ng-view.

You can change its content in several ways: ng-include, ng-switch or mapping different controllers and templates through the routeProvider.

Alternatively, use ui-router

answered Jan 19, 2017 at 1:18

Maciej Caputa

1,91114 silver badges23 bronze badges

Collectives™ on Stack Overflow

Multiple views with angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related