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? — AncientSwordRage
– AncientSwordRage, Commented Mar 25, 2015 at 12:05

eddiec · Accepted Answer · 2013-12-06 16:58:00Z

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 6, 2013 at 16:58

answered Dec 5, 2013 at 16:14

eddiec

7,6465 gold badges36 silver badges36 bronze badges

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

6 Comments

Julia Anne Jacobs Over a year ago

That's a great suggestion and I'll make sure to try it!

eddiec Over a year ago

Great - if you think it's the right answer could you mark it please.

Julia Anne Jacobs Over a year ago

I updated my plunkr in case anyone wants to see your suggestion in action.

Julia Anne Jacobs Over a year ago

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 Over a year ago

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.

|

Rodrigo Reis · Accepted Answer · 2014-04-14 17:16:33Z

2

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.

answered Apr 14, 2014 at 17:16

Rodrigo Reis

1,9411 gold badge11 silver badges12 bronze badges

1 Comment

Rishul Matta Over a year ago

This will make all your states children of root. For navigation you will have to use 'root.<statename>' for navigation

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Linked

Related