向上圖： 主要實作的效果如下
直接寫個模闆方面日後用：
<!DOCTYPE html>
<html en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="lib/css/ionic.css">
<script src="lib/js/ionic.bundle.min.js"></script>
<!--把自己寫的css樣式引入進來-->
<link rel="stylesheet" href="css/main.css">
<script>
var app=angular.module("myapp",["ionic"]);
//路由
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("home", {
url: "/home",
views: {
"view-home": {
//templateUrl: 是指定模闆
templateUrl: "luyou/home.html",
//controller 直接給它指定控制器的名字
controller: "HomeCtrl"
}
}
}).state("cart", {
url: "/cart",
views: {
"view-cart": {
templateUrl: "luyou/cart.html",
}
}
}).state("mine", {
url: "/mine",
views: {
"view-mine": {
templateUrl: "luyou/mine.html",
}
}
});
//如果都找不到就會執行此代碼 預設位址
$urlRouterProvider.otherwise("home");
});
//側拉
app.controller("HomeCtrl",function ($scope, $ionicSideMenuDelegate) {
//給頭部側拉設定的點選事件toggleLeft（） 可是實作類似開啟和關閉效果
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
}
})
</script>
</head>
<body ng-app="myapp">
<ion-tabs class="tabs-positive tabs-icon-top">
<!-- ui-sref： 以後路由就用這個代碼來寫 -->
<ion-tab title="首頁" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"ui-sref="home">
<!--寫路由頁面的話必須寫這行代碼 ， 就是路由頁面的代碼會自動找這行代碼-->
<ion-nav-view name="view-home"></ion-nav-view>
<!-- 标簽 1 内容 -->
</ion-tab>
<ion-tab title="關于" icon-on="ion-happy" icon-off="ion-happy-outline" ui-sref="cart">
<ion-nav-view name="view-cart"></ion-nav-view>
<!-- 标簽 2 内容 -->
</ion-tab>
<ion-tab title="我的" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline" ui-sref="mine">
<ion-nav-view name="view-mine"></ion-nav-view>
<!-- 标簽 3 内容 -->
</ion-tab>
</ion-tabs>
</body>
</html> ionic 路由模闆 紅框的地方就是每個頁面所寫代碼模闆的地方 隻要把這些用 templateUrl 引入位址即可
路由就是實作一個切換頁面的功能
下面是直接在首頁面寫模闆代碼的一種代碼 ，不過還是推薦用上面那種 ：
不過萬一上面有點了解不了 ，就直接拷貝下面這些代碼 一步到位
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<title>路由-标簽切換</title>
<script type="text/javascript">
var app = angular.module("myApp", ["ionic"]);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("home", {
url: "/home",
views: {
"views_home": {
templateUrl: "home.html"
}
}
}).state("cart", {
url: "/cart",
views: {
"views-cart": {
templateUrl: "cart.html"
}
}
}).state("mine", {
url: "/mine",
views: {
"views-mine": {
templateUrl: "mine.html"
}
}
})
});
</script>
</head>
<body>
<ion-tabs class="tabs-positive tabs-icon-top">
<ion-tab title="首頁" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" ui-sref="home">
<ion-nav-view name="views_home"></ion-nav-view>
</ion-tab>
<ion-tab title="購物車" icon-on="ion-ios-cart" icon-off="ion-ios-cart-outline" ui-sref="cart">
<ion-nav-view name="views-cart"></ion-nav-view>
</ion-tab>
<ion-tab title="我的" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" ui-sref="mine">
<ion-nav-view name="views-mine"></ion-nav-view>
</ion-tab>
</ion-tabs>
<script id="home.html" type="text/ng-template">
<ion-header-bar class="bar-positive">
<button class="button button-clear">左按鈕</button>
<h1 class="title">首頁</h1>
</ion-header-bar>
<ion-content class="has-header">
這是“首頁”頁面HTML内容
</ion-content>
</script>
<script id="cart.html" type="text/ng-template">
<ion-header-bar class="bar-positive">
<h1 class="title">購物車</h1>
<button class="button button-clear">右按鈕</button>
</ion-header-bar>
<ion-content class="has-header">
這是“購物車”頁面HTML内容
</ion-content>
</script>
<script id="mine.html" type="text/ng-template">
<ion-header-bar class="bar-positive">
<h1 class="title">我的</h1>
<button class="button button-icon ion-ios-more"></button>
</ion-header-bar>
<ion-content class="has-header">
這是“我的”頁面HTML内容
</ion-content>
</script>
</body>
</html>