实例

http://ruanwenwu.cn/route/app/UIRoute3.html

注意点

一、路由嵌套通过ui-view属性来实现。子页面实际上替换的是父页面的ui-view。

比如这种结构:

.state('index.usermng', {
            url: '/usermng',
            views: {
                'main@index': {
                    templateUrl: 'tpls3/usermng.html',
                    controller: function($scope, $state) {
                        $scope.addUserType = function() {
                            $state.go("index.usermng.addusertype");
                        }
                    }
                }
            }
        })
        .state('index.usermng.highendusers', {
            url: '/highendusers',
            templateUrl: 'tpls3/highendusers.html'
        })

/highenduser这个地址的模板里的内容替换的是/usermng这个页面的模板里的ui-view。

二、页面之间的转场动画,是通过ng-animation模块来实现的。

这个模块要被作为依赖模块载入。实现动画的几种方式可以在上一篇博文中了解。当前这个页面里的demo的转场动画是由css3的transtion来实现的。