在工作中，创建了一个子模块，但是页面切换的时候，发现没有切换效果了，看了ionic官网的demo，然后自己模仿着写一个例子，提供给自己学习。
一、app入口，加载angularjs 插件，并配置state(状态)和显示位置
<!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,height=device-height">
<!--<script src="public/js/jquery.js"></script>-->
<script src="../../public/ionic/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../public/ionic/css/ionic.min.css">
</head>
<body ng-controller="myCtrl">
<!--<ion-nav-view></ion-nav-view>-->
<ui-view></ui-view>
</body>
</html>
<script>
angular.module('myApp',['ionic'])
.config(function ($stateProvider,$ionicConfigProvider) {
//禁用所有缓存
$ionicConfigProvider.views.maxCache(0);
$stateProvider
//编辑用户姓名
.state('index',{
url: '/index',abstract:true,templateUrl: 'parent.html'
})
.state('index.son1',{
url: '/son1',cache: !0,views:{
homeViewContent:{
templateUrl: 'son1.html',controller:function(){
// alert("homeViewContent");
}
}
}
})
.state('index.son1_1',{
url: '/son1_1',views:{
homeViewContent:{
templateUrl: 'son1_1.html',controller:function(){
// alert("homeViewContent");
}
}
}
})
.state('index.son1_2',{
url: '/son1_2',views:{
homeViewContent:{
templateUrl: 'son1_2.html',controller:function(){
// alert("homeViewContent");
}
}
}
})
.state('index.son2',{
url: '/son2',views:{
storeViewContent:{
templateUrl: 'son2.html',controller:function(){
// alert("storeViewContent");
}
}
}
})
})
.controller('myCtrl',function($scope,$state,$q,$http){
$state.go("index.son2");
})
</script>
备注：
.state('index.son2',controller:function(){
// alert("storeViewContent");
}
}
}
})
中的“storeViewContent” 代表的是<ui-view></ui-view>的名字，不同的名字，代表了不同的视图组件，用它来区分不同的模块 。
二、parent.html
当前页面是一个模板（abstract）页面，将内容分为多个子模块，这里使用了ion-tabs指令
ion-nav-view 分别为 homeViewContent 和 storeViewContent
<ion-tabs class="tabs-icon-top">
<ion-tab title="son1" icon-on="iconfont icon-homefill" icon-off="iconfont icon-home" ui-sref="index.son1">
<ion-nav-view name="homeViewContent"></ion-nav-view>
</ion-tab>
<ion-tab title="son2" icon-on="iconfont icon-tagfill" icon-off="iconfont icon-tag" ui-sref="index.son2">
<ion-nav-view name="storeViewContent"></ion-nav-view>
</ion-tab>
</ion-tabs>
三、son1.html
该页面是在 parent.html 页面的ion-nav-view为 homeViewContent控件中显示
<div>son1</div> <a ui-sref="index.son1">index.son1</a> <br> <a ui-sref="index.son1_1">index.son1_1</a> <br> <a ui-sref="index.son1_2">index.son1_2</a>
四、son2.html
该页面是在 parent.html 页面的ion-nav-view为storeViewContent控件中显示
son2
五、son1_1.html
该页面是在 parent.html 页面的ion-nav-view为 homeViewContent控件中显示
<div>son1_1</div> <a ui-sref="index.son1">index.son1</a> <br> <a ui-sref="index.son1_1">index.son1_1</a> <br> <a ui-sref="index.son1_2">index.son1_2</a>
六、son1_2.html
该页面是在 parent.html 页面的ion-nav-view为 homeViewContent控件中显示
<div>son1_2</div> <a ui-sref="index.son1">index.son1</a> <br> <a ui-sref="index.son1_1">index.son1_1</a> <br> <a ui-sref="index.son1_2">index.son1_2</a>
son1.html 、son1_1.html 、son1_2.html都是在parent.html 页面的ion-nav-view为 homeViewContent控件中显示，这三个页面属于同一个模块，三个页面之间的切换会有切换效果，但是如果切换到storeViewContent是没有切换效果的。
son2.html属于单独的一个模块，如果切换到ion-nav-view为 homeViewContent控件中，是没有切换效果的。