YouTipIonic Ion Nav View
* * *\n\n## ion-nav-view\n\nWhen users browse your app, Ionic can detect the browsing history. By detecting the browsing history, it enables correct view transitions when swiping left or right.\n\nUsing application programming interfaces like the AngularUI Router module, applications can be divided into different `$state`s. At the core of Angular is the routing service, where URLs can be used to control views.\n\nAngularUI Router provides more powerful state management, where states can be named, nested, and have merged views, allowing more than one template to be rendered on the same page.\n\nAdditionally, each state does not need to be bound to a URL, and data can be pushed to each state more flexibly.\n\nIn the following example, we will create a navigation view for an application containing different states.\n\nWe select `ionNavView` as the top-level directive in our markup. To display a header bar, we use the `ionNavBar` directive to update via navigation.\n\nNext, we need to set up the state values that will be rendered.\n\n```javascript\nvar app = angular.module('myApp', ['ionic']); app.config(function($stateProvider) { $stateProvider .state('index', { url: '/', templateUrl: 'home.html' }) .state('music', { url: '/music', templateUrl: 'music.html' });});\n\nWhen the app opens, `$stateProvider` queries the URL to see if it matches the `index` state value, then loads `index.html` into ``.\n\nPage loading is configured via URLs. One of the simplest ways to create templates in Angular is to place them directly in HTML template files and wrap them with ``.\n\nSo this is also a way to add `home.html` to our app:\n\n \n \n \n \n Go to music page!\n \n \n\n[Try it Yourself »](#)\n\nThis is a great method because templates load quickly and are cached, eliminating the need to load them over the network again.\n\n* * *\n\n### Caching\n\nTypically, caching views improves performance. When leaving a view, its elements are retained in the DOM, and its scope is removed from `$watch`.\n\nWhen navigating to a previously cached view, the view is activated, its scope is reconnected, and its elements are kept in the DOM. This also allows preserving the previous view's scroll position.\n\nCaching can be enabled and disabled in many ways. By default, Ionic caches a maximum of 10 pages, and this is not the only customizable aspect; applications can explicitly configure whether a view should be cached per state.\n\nNote that because we are caching these views, we do not destroy the scope. Instead, its scope is detached from `$watch`.\n\nBecause subsequent view scopes are not destroyed and recreated, controllers are not reloaded either. If an app/controller needs to know when entering or leaving a view, it may be useful to listen for view events emitted within the `ionView` scope, such as `$ionicView.enter`.\n\n### Disable Caching Globally\n\n`$ionicConfigProvider` can be used to set the maximum number of cached views. Setting it to 0 disables all caching.\n\n```javascript\n$ionicConfigProvider.views.maxCache(0);\n\n### Disable Caching in State Provider\n\n```javascript\n$stateProvider.state('myState', { cache: false, url : '/myUrl', templateUrl : 'my-template.html'})\n\n### Disable Caching via Attribute\n\n ...\n\n### AngularUI Router\n\nPlease visit [AngularUI Router's docs](https://github.com/angular-ui/ui-router/wiki) for more information.\n\n### API\n\n| Attribute | Type | Details |\n| --- | --- | --- |\n| name _(optional)_ | `string` | The name of a view. This name should be unique among other views in the same state. You can have views with the same name in different states. For more details, check ui-router's (http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view). |\n\n* * *\n\n## ion-view\n\nBelongs to `ionNavView`. A container for content used to display view or navigation bar information.\n\nBelow is an example of a page loaded with a navigation bar titled "My Page".\n\n \n \n Hello!\n \n \n\n### API\n\n| Attribute | Type | Details |\n| --- | --- | --- |\n| title _(optional)_ | `string` | The title displayed in the parent `ionNavBar`. |\n| hide-back-button _(optional)_ | `boolean` | Whether to hide the back button in the parent `ionNavBar` by default. |\n| hide-nav-bar _(optional)_ | `boolean` | Whether to hide the parent `ionNavBar` by default. |\n\n* * *\n\n## ion-nav-bar\n\nCreates a top toolbar that updates when the application state changes.\n\n### Usage\n\n \n \n \n \n \n\n### API\n\n| Attribute | Type | Details |\n| --- | --- | --- |\n| delegate-handle _(optional)_ | `string` | This handle identifies this navigation bar using `$ionicNavBarDelegate`. |\n| align-title _(optional)_ | `string` | The alignment position of the navigation bar title. Available: 'left', 'right', 'center'. Default: 'center'. |\n\n* * *\n\n## ion-nav-buttons\n\nBelongs to `ionNavView`\n\nUse `ionNavButtons` to set buttons on the `ionNavBar` within an `ionView`.\n\nAny buttons you set will be placed in the corresponding positions of the navigation bar and will be destroyed when the user leaves the parent view.\n\n### Usage\n\n \n \n \n \n \n Here is some content!\n \n \n\n### API\n\n| Attribute | Type | Details |\n| --- | --- | --- |\n| side | `string` | The position where the button is placed in the parent `ionNavBar`. Available: 'left' or 'right'. |\n\n* * *\n\n## ion-nav-back-button\n\nCreates a button within an `ionNavBar`.\n\nThe back button will be displayed when the user can navigate back in the current navigation stack.\n\n### Usage\n\nDefault button action:\n\n \n \n Back\n \n\nCustom click action, using `$ionicNavBarDelegate`:\n\n \n \n Back\n \n\n```javascript\nfunction MyCtrl($scope, $ionicNavBarDelegate) {\n $scope.goBack = function() {\n $ionicNavBarDelegate.back();\n };\n}\n\nDisplay the previous title on the back button, also using `$ionicNavBarDelegate`.\n\n \n {{getPreviousTitle() || 'Back'}}\n \n\n```javascript\nfunction MyCtrl($scope, $ionicNavBarDelegate) {\n $scope.getPreviousTitle = function() {\n return $ionicNavBarDelegate.getPreviousTitle();\n };\n}\n\n* * *\n\n## nav-clear\n\n`nav-clear` is an attribute directive used when clicking elements on a view, such as an `` or a `