AngularJS 单路由多视图(Multiple Named Views)

最新推荐文章于 2021-04-04 23:12:01 发布

街头小贩

最新推荐文章于 2021-04-04 23:12:01 发布

阅读量7.4k

点赞数

分类专栏： angularjs javascript 文章标签： angularjs ui-router route 多栏布局

本文链接：https://blog.csdn.net/xiaofanku/article/details/50932115

版权

javascript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

angularjs

3 篇文章 0 订阅

订阅专栏

AngularJS $route的局限性：一个路由只能影响一个ng-view
不是所有页面只有一栏，往往有两栏或两栏以上,例如:左边的功能导航和右边的正文区或三栏布局,下图是一个大概示例
这里写图片描述

上面的图片来自:https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

对了，此文会介绍:ui-router,它弥补了AngularJS在路由和视图的单ng-view和嵌套路由的不足,这里只会介绍：单路由多视图，也会介绍不用ui-router该怎么办?

业务需求,网页中有些页面是存在左侧边栏的,有些页面没有左侧边栏，当有左侧边栏的路由执行完时，左侧边栏也要根据路由有所变化，例：新闻的左边栏和频道的左边栏内容不一样.

dom结构:

    <body>
        <!--左侧边栏 -->
        <aside></aside>
        <!-- 页面正文区-->
        <div></div>
    </body>

如果不用ui-router,并且可以改变dom结构你可以这样:

    <body>
        <!--左侧边栏 
        <aside></aside>
        页面正文区
        <div></div>
        -->
        <div ng-view></div>
    </body>

你可能会想到下面要作的事情，不错在templateUrl指向的页面中用ng-include分别引入左侧边栏模板和正文模板，例如:

        $routeProvider.when('/article',{
            templateUrl:'partials/article.html',
            controller:'DefaultCtrl',
            asideUrl: 'partials/article-left-aside.html',
            bodyUrl: 'partials/article-list.html'
        })

以下为partials/article.html的示例

        <!--左侧边栏 -->
        <aside ng-include='$route.current.asideUrl'></aside>
        <!-- 页面正文区 -->
        <div ng-include='$route.current.bodyUrl'></div>

我只是在书中看到有此一解.哪来看一看用ui-router的示例吧

    <body>
        <!--左侧边栏 -->
        <aside ui-view="aside"></aside>
        <!-- 页面正文区-->
        <div ui-view="main"></div>
    </body>

1.由ng-view 改为ui-view如果此处没改的话，可以看到模板已经加载但浏览器不会显示

2.多个ui-view中有一个可以不赋值,例如:

    <body>
        <!--左侧边栏 -->
        <aside ui-view="aside"></aside>
        <!-- 页面正文区-->
        <div ui-view></div>
    </body>

没有赋值的在下面使用时用: ’ ‘,只需把示例代码中的main替换成’ ‘即可

3.某些页面如果不需左侧边侧，可以正常使用，只要在写$stateProvider views中不写即可.

4.示例:app.js

angular.module('spa', ['ui.router'])
.run(['$rootScope', '$state', '$stateParams',function ($rootScope,   $state,   $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}])
.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider,   $urlRouterProvider) {
    $urlRouterProvider.when("","/home");  
    $stateProvider.state("home", {
        url: '/home',
        views:{
            'main':{
                templateUrl: 'page/article.html',
                controller: function($scope){
                    $scope.title='this is a demo';
                }
            },
            'aside':{
                templateUrl: 'page/article-aside.html'
                //只是一个静态html，可以不提供controller
            }
        }
    })
    .state("channel",{
        url: '/channel',
        views:{
            'main':{
                templateUrl: 'page/channel.html',
                controller: function($scope){
                    $scope.title='this is a demo';
                }
            },
            'aside':{
                templateUrl: 'page/channel-aside.html',
                controller:function($scope){
                    //可以从缓存或db中取
                    $scope.result=[{marker:'it',name:'科技'},{marker:'life',name:'生活'}];
                }
            }
        }
    })
    .state("user",{
        url: '/user',
        views:{
            'main':{
                templateUrl: 'page/user.html',
                controller: function($scope){
                    $scope.title='this is a demo';
                }
            }
            //这里不需要有左侧边栏
        }
    });
}]);

5.如果只需要一个route对应一个ng-view可以使用ui-router吗？当然可以,下面是一个基础架子

index.html

    <body>
        <!--左侧边栏 
        <aside ui-view="aside"></aside>
        页面正文区-->
        <div ui-view></div>
    </body>

app.js

angular.module('spa', ['ui.router'])
.run(['$rootScope', '$state', '$stateParams',function ($rootScope,   $state,   $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}])
.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider,   $urlRouterProvider) {
    $urlRouterProvider.when("","/home"); 
    $stateProvider.state("home", {
        url: '/home',
        templateUrl: 'page/article.html',
        controller: function($scope){
            $scope.title='this is home page';
        }
    })
    .state("channel",{
        url: '/channel',
        templateUrl: 'page/channel.html',
        controller: function($scope){
           $scope.title='this is channel';
        }
    })
    .state("user",{
        url: '/user',
        templateUrl: 'page/user.html',
        controller: function($scope){
            $scope.title='this is a user';
        }
    });
}]);

6.路由地址(stateName以user打头)不需要aside时,ng-hide aside

    <body>
        <!--左侧边栏 -->
        <aside ui-view="aside" ng-hide="$state.current.name.indexOf('user')"></aside>
        <!-- 页面正文区-->
        <div ui-view></div>
    </body>