Ionic实现路由ion-tabs

1.导包

1 
2     
3     
4     
5     

2.写js路由

 1 var myapp = angular.module('myapp', ['ionic']);
//配置路由
 2 myapp.config(function($stateProvider,$urlRouterProvider) {
 3     $stateProvider
 4         .state('tour', {
 5             url: '/',
 6             templateUrl: 'pages/tour/tour.html',
 7             controller:"tourCtrl"
 8         })
 9         .state('home', {
10             url: '/home',
11             templateUrl: 'pages/home/home.html'
12         }).state('hotel', {
13             url: '/hotel',
14             templateUrl: 'pages/hotel/hotel.html'
15         }).state('yuding', {
16             url: '/yuding',
17             templateUrl: 'pages/yuding/yuding.html'
18         });
19     $urlRouterProvider.otherwise("/");
20 });

3.html页面

 1 
 2     
 3         
　　//分别添加ui-serf和name
 4         
 5             
 6 
 7             
 8         
 9         
10         
11             
12 
13             
14         
15         
16         
17             
18 
19             
20         
21 
22     

4.三个分页面

 1 2 3 第一页 4 5  

---

 

---

 

 1 2 3 第二页 4 5  

---

---

 

 1 2 3 第三页 4 5  

---

 

效果: