您的位置：首页 > Web前端 > AngularJS

angularjs 子模块实战例子 （切换效果）

2016-09-07 18:10 302 查看
在工作中，创建了一个子模块，但是页面切换的时候，发现没有切换效果了，看了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',
cache: !0,
views:{
homeViewContent:{
templateUrl: 'son1_1.html',
controller:function(){
//                                        alert("homeViewContent");
}
}
}
})
.state('index.son1_2', {
url: '/son1_2',
cache: !0,
views:{
homeViewContent:{
templateUrl: 'son1_2.html',
controller:function(){
//                                        alert("homeViewContent");
}
}
}
})
.state('index.son2', {
url: '/son2',
cache: !0,
views:{
storeViewContent:{
templateUrl: 'son2.html',
controller:function(){
//                                        alert("storeViewContent");
}
}
}
})
})
.controller('myCtrl', function($scope,$state,$q,$http){

$state.go("index.son2");
})

</script>

 
备注：
.state('index.son2', {
url: '/son2',
cache: !0,
views:{
storeViewContent:{
templateUrl: 'son2.html',
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 控件中，是没有切换效果的。
  

abstract_module.rar (1.6 KB)

下载次数: 0
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航