4

can someone please point me to an example of managing global states for ui-router? i'm trying to implement a general site template that contains on all pages a header and a footer, with a main view that changes along with nested views within that view.

<div ui-view="header"> should appear on all pages, has its own controller. <div ui-view>main view that holds the different "pages" and nested views <div ui-view="footer"> should appear on all pages, has its own controller.

i will try to elaborate, this is my current state with angulars routing:

<body>
  <div class="wrap">
      <div ng-include="'partials/header.html'"></div>
      <div ng-view></div>
      <div ng-include="'partials/footer.html'"></div>
  </div> 
</body>

i would like to migrate to ui-router, but cannot achieve the same. i need the header and the footer on all pages and an ui-view as main content that will hold all views/nested vies and stats

Thanks

danikoren
  • 4,191
  • 7
  • 34
  • 33

1 Answers1

1

That will definitely work for you. You'll just need to make sure it's ui-view insteadl of ng-view. Here's what I'm using now on a similar app:

<div ng-include src="'app/templates/nav.html'" id="global-nav"></div>
<div ui-view></div>
<footer ng-include src="'app/templates/footer.html'"></footer>
Will Stern
  • 17,181
  • 5
  • 36
  • 22
  • 1
    Ui-view seems to offer multiple named views. There should be a way for there to be a "layout" state. – CMCDragonkai Feb 28 '14 at 20:00
  • Yep, you can definitely do that as well. On an app example that only has one changing view, I think it's easier to keep it out of ui-router and just add an ng-controller for static views. – Will Stern Feb 28 '14 at 21:01
  • True. That's what I've been doing. But I'd like to be able to achieve this via states. Call it an experiment in architecture. I expanded the question here: http://stackoverflow.com/questions/22104893/angular-ui-router-how-to-create-a-layout-state – CMCDragonkai Mar 01 '14 at 09:49