前端偵錯相當困難，上完課感覺要昇天了
實作：home/settings/about 按鍵連結
html部份
<body ng-app="App">
<ion-nav-bar class="bar-balanced"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-striped tabs-top
tabs-background-positive tabs-color-light">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Settings" icon="ion-settings" href="#/tab/settings">
<ion-nav-view name="settings-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-android-bulb"
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>
<p>Home</p>
</ion-content>
</ion-view>
</script>
<script id="templates/settings.html" type="text/ng-template">
<ion-view view-title="Settings">
<ion-content>
<p>Settings</p>
</ion-content>
</ion-view>
</script>
<script id="templates/about.html" type="text/ng-template">
<ion-view view-title="About">
<ion-content>
<p>About</p>
</ion-content>
</ion-view>
</script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
<script src="scripts/tab.js"></script>
</body>
js部份
var app = angular.module('App', ['ionic'])//叫用index的 body ng-app="App"
app.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"
}
}
})
.state('tabs.settings', {
url: "/settings", views: {
'settings-tab': {
templateUrl: "templates/settings.html"
}
}
})
.state('tabs.about', {
url: "/about", views: {
'about-tab': {
templateUrl: "templates/about.html"
}
}
})
});
app.run(function($ionicPlatform, $location, $rootScope) {
$ionicPlatform.ready(function() {
if (cordova.platformId === "ios" && window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
//初始化
$location.path("/tab/home");
$rootScope.$apply();
});
})
