| <html ng-app="ionicApp"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> | |
| <title>Tabs Example</title> | |
| <link href="//code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet"> | |
| <script src="//code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script> | |
| </head> | |
| <body> | |
| <ion-nav-bar></ion-nav-bar> | |
| <ion-nav-view></ion-nav-view> | |
| <script id="templates/tabs.html" type="text/ng-template"> | |
| <ion-tabs> | |
| <ion-tab title="Home" icon="ion-home" href="#/tab/home"> | |
| <ion-nav-view name="home-tab"></ion-nav-view> | |
| </ion-tab> | |
| <ion-tab title="About" icon="ion-information" href="#/tab/about"> | |
| <ion-nav-view name="about-tab"></ion-nav-view> | |
| </ion-tab> | |
| </ion-tabs> | |
| </script> | |
| <script id="templates/home.html" type="text/ng-template"> | |
| <ion-view view-title="Home"> | |
| <ion-content>This is home</ion-content> | |
| </ion-view> | |
| </script> | |
| <script id="templates/about.html" type="text/ng-template"> | |
| <ion-view view-title="About"> | |
| <ion-content>This is about</ion-content> | |
| </ion-view> | |
| </script> | |
| </body> | |
| </html> |
| angular.module('ionicApp', ['ionic']) | |
| .config(function($stateProvider, $urlRouterProvider) { | |
| $stateProvider | |
| .state('tabs', { | |
| url: "/tab", | |
| abstract: true, | |
| templateUrl: "templates/tabs.html" | |
| }) | |
| .state('tabs.home', { | |
| url: "/home", | |
| views: { | |
| 'home-tab': { | |
| templateUrl: "templates/home.html", | |
| controller: 'HomeTabCtrl' | |
| } | |
| } | |
| }) | |
| .state('tabs.about', { | |
| url: "/about", | |
| views: { | |
| 'about-tab': { | |
| templateUrl: "templates/about.html", | |
| controller: 'AboutTabCtrl' | |
| } | |
| } | |
| }) | |
| ; | |
| $urlRouterProvider.otherwise("/tab/home"); | |
| }) | |
| .controller('HomeTabCtrl', function() { | |
| console.log('HomeTabCtrl'); | |
| }) | |
| .controller('AboutTabCtrl', function($ionicHistory) { | |
| console.log('AboutTabCtrl'); | |
| $ionicHistory.clearCache(); | |
| }) | |
| ; |