How to have global footer in separate views using angular-ui-router v0.2.5 (allows modules)

Question

Sorry if the title of this is confusing.

I'm converting a template I purchased into an angular.js app.

I want to use different modules to organize the app.

I'm also using version 0.2.5 of angular-ui-router which allows routing with separate modules.

All is well except the template I'm using looks like this:

<div>Global Nav Bar</div>
<div>Content that changes with different states right below Nav Bar</div>
<div class="wrapsContentAndPushesToBottom">
  <div>Content that changes with different states at 
       bottom of page thanks to parent div's class</div>
  <div>Global Footer also on bottom of page due 
       to parent div's class</div>
</div>

I'm having a hard time getting that global footer to work because of that parent wrapping div.

Can someone help me get this to work?

UPDATE:

I can't get suggested ng-include to work with my plunkr example: http://plnkr.co/edit/dgNkHX

I also can't it working using a named view for the footer: http://plnkr.co/edit/BO8NDO

possible duplicate of [Angular UI-Router How to create a "layout" state?](http://stackoverflow.com/questions/22104893/angular-ui-router-how-to-create-a-layout-state) — AncientSwordRage, Mar 25 '15 at 12:05

eddiec · Accepted Answer · 2013-12-06T16:58:00.230

2

I think you're looking for ng-include. http://docs.angularjs.org/api/ng.directive:ngInclude

That will enable you to extract that global footer out to a separate file and just include it in your template.

<div ng-include src="'globalFooter.tpl.html'"></div>

edited Dec 06 '13 at 16:58

answered Dec 05 '13 at 16:14

eddiec

7,608
5
34
36

That's a great suggestion and I'll make sure to try it! – Julia Anne Jacobs Dec 05 '13 at 16:16
Great - if you think it's the right answer could you mark it please. – eddiec Dec 05 '13 at 16:16
I updated my plunkr in case anyone wants to see your suggestion in action. – Julia Anne Jacobs Dec 05 '13 at 16:33
Arrg, I can't get the ng-include="footer" to work and I'm not sure why. I'm not getting any errors. – Julia Anne Jacobs Dec 05 '13 at 17:19
Sorry I'm un-"answering" this even though you offered a suggestion as I initially asked. I'm hoping I can get someone to help me actually make this work. – Julia Anne Jacobs Dec 05 '13 at 17:44
I've edited the answer to be more accurate using the src attribute. Please consult the docs and http://stackoverflow.com/questions/13943471/angularjs-ng-include for a fuller example of usage. – eddiec Dec 05 '13 at 18:20

score 2 · Answer 2 · answered Apr 14 '14 at 17:16

Try something like this:

.state('root', {
  abstract: true,
  views: {
    '@': {

    },
    'sideBar@': { templateUrl: 'views/sidebar.html', controller: 'SideBarCtrl' },
    'header@': { templateUrl: 'views/header.html' },
    'footer@': { templateUrl: 'views/footer.html' }
  }
})

.state('main', {
  url: '/',
  parent: 'root',
  views: {
    '@': { templateUrl: 'views/main_content.html', controller: 'MainCtrl' }
  }
})

This is working for me.. I have a global footer.

This will make all your states children of root. For navigation you will have to use 'root.' for navigation — Rishul Matta, Sep 29 '16 at 04:01

How to have global footer in separate views using angular-ui-router v0.2.5 (allows modules)

2 Answers2