CODEWITHSUNDEEP
angularjsangular-ui-router
danikoren
danikoren

Reputation: 4301

ui-router global state with "main view"

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

Upvotes: 4

Views: 772

Answers (1)

Will Stern
Will Stern

Reputation: 17589

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>

Upvotes: 1

Related Questions