eventHook = function() {
          if (viewIsUpdating) return;
          viewIsUpdating = true;

          try { updateView(true); } catch (e) {
            viewIsUpdating = false;
            throw e;
          }
          viewIsUpdating = false;
        }
@ngdoc directive
@name ionNavView
@module ionic
@restrict E
@codepen HjnFx

@description
As a user navigates throughout your app, Ionic is able to keep track of their
navigation history. By knowing their history, transitions between views
correctly slide either left or right, or no transition at all. An additional
benefit to Ionic's navigation system is its ability to manage multiple
histories.

Ionic uses the AngularUI Router module so app interfaces can be organized
into various "states". Like Angular's core $route service, URLs can be used
to control the views. However, the AngularUI Router provides a more powerful
state manager in that states are bound to named, nested, and parallel views,
allowing more than one template to be rendered on the same page.
Additionally, each state is not required to be bound to a URL, and data can
be pushed to each state which allows much flexibility.

The ionNavView directive is used to render templates in your application. Each template
is part of a state. States are usually mapped to a url, and are defined programatically
using angular-ui-router (see [their docs](https://github.com/angular-ui/ui-router/wiki)),
and remember to replace ui-view with ion-nav-view in examples).

@usage
In this example, we will create a navigation view that contains our different states for the app.

To do this, in our markup use the ionNavView top level directive, adding an
{@link ionic.directive:ionNavBar} directive which will render a header bar that updates as we
navigate through the navigation stack.

You can any [animation class](/docs/components#animation) on the navView to have its pages slide.
Recommended for page transitions: 'slide-left-right', 'slide-left-right-ios7', 'slide-in-up'.

```html
<ion-nav-view class="slide-left-right">
  <!-- Center content -->
  <ion-nav-bar>
  </ion-nav-bar>
</ion-nav-view>
```

Next, we need to setup our states that will be rendered.

```js
var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  });
});
```
Then on app start, $stateProvider will look at the url, see it matches the index state,
and then try to load home.html into the `<ion-nav-view>`.

Pages are loaded by the URLs given. One simple way to create templates in Angular is to put
them directly into your HTML file and use the `<script type="text/ng-template">` syntax.
So here is one way to put home.html into our app:

```html
<script id="home" type="text/ng-template">
  <!-- The title of the ion-view will be shown on the navbar -->
  <ion-view title="'Home'">
    <ion-content ng-controller="HomeCtrl">
      <!-- The content of the page -->
      <a href="#/music">Go to music page!</a>
    </ion-content>
  </ion-view>
</script>
```

This is good to do because the template will be cached for very fast loading, instead of
having to fetch them from the network.

Please visit [AngularUI Router's docs](https://github.com/angular-ui/ui-router/wiki) for
more info. Below is a great video by the AngularUI Router guys that may help to explain
how it all works:

<iframe width="560" height="315" src="//www.youtube.com/embed/dqJRoh8MnBo"
frameborder="0" allowfullscreen></iframe>

@param {string=} name A view name. The name should be unique amongst the other views in the
same state. You can have views of the same name that live in different states. For more
information, see ui-router's [ui-view documentation](http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view).