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

来源：互联网发布：python格式化字符串编辑：程序博客网时间：2024/05/21 23:34

在工作中，创建了一个子模块，但是页面切换的时候，发现没有切换效果了，看了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

0 0

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

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