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

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

2016-03-19 17:40 696 查看
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>


ui-router state的示例介绍可以看此文：AngularJS 使用 UI Router 实现表单向导，此文示例用的是angularJS 1.5.0 和ui-router 0.2.18
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  angularjs ui-router route 多栏布局
相关文章推荐
新的分享
章节导航