背景:

我们的后台页面使用了 angular 1 + ui-router. 每点击一个页面时, 切换一个路由.

// 路由app.config(function($stateProvider,$urlRouterProvider,$ocLazyLoadProvider) {$stateProvider.state('welcome',{url: "/", // root routetemplateUrl:"view/welcome.html"}).state('admin', {url: '/:folder/:page',templateUrl : function($stateParams) {return "view/"+$stateParams.folder+"/"+$stateParams.page+".html";},//cache: false,resolve:{loadMyCtrl:function($ocLazyLoad,$stateParams){return $ocLazyLoad.load("view/"+$stateParams.folder+"/"+$stateParams.page+"Ctrl.js");}}})$urlRouterProvider.otherwise("welcome");});

实现的效果如下

需求

原来的页面的实现是每点击一菜单,切换一个页面, 这种方式在使用上不甚方便。现要求用户界面必须为标签页方式实现, 且切换标签时页面内容无刷新，效果如下：

实现方案

方案一:依旧使用路由(未能满足需求)

每点击一个菜单项时新增一个页签, 页签切换时, 还是使用的路由功能, 加载新的页面需要重新从后台获取数据.考虑过在切换页面时, 在浏览器端缓存上一页面的数据, 返回上一页面，使用缓存对页面进行渲染。此方式需要对已有的页面功能进行改造, 代价比较高。
查阅资料，angular 高级版本有“路由重用”的概念，但是在angular 1 版本无法实现。

最终：废弃路由，使用ng-include指令

点击菜单时，相当于在窗口中同时打开多个页面，关闭页面时，使用ng-if 将页面隐藏。关键点是uib-tabset （来自于ui-bootstrap-tpls ）与ng-include指令的使用，同时废弃了路由的使用。
页面效果如下：

主页main.html中关键代码

 <uib-tabset active="$root.pages.active"><uib-tab  ng-repeat="page in pages" select="selectPage(page)" index="page.url" ng-if="!page.hide"><uib-tab-heading>{{page.text}}<button class="close tabClose"  ng-click="closePage(page,$event)">&times;</button></uib-tab-heading><div class="view_body" ng-include="page.url" ></div></uib-tab></uib-tabset>

mainController.js中的关键代码

$rootScope.pages = [];//定义页面数组
function openPage(node){node.selected = true;$scope.curMenu = node;var pathinfo = node.url.split('?');var path =pathinfo[0];$ocLazyLoad.load("/admin/view/" + path + "Ctrl.js").then(() => {let pageUrl = "/admin/view/" + path + ".html";let page = $rootScope.pages.find(n => n.url == pageUrl);if (!page) {$rootScope.pages.push({text: node.text,oriUrl:node.url, url: pageUrl})}else{page.hide = false;}setTimeout(() => {$rootScope.pages.active = pageUrl;$scope.$applyAsync();})})
}
$scope.closePage = function(page,$event){let openedPages = $rootScope.pages.filter(n=>!n.hide);let index = openedPages.indexOf(page);if($rootScope.pages.active == page.url){if(openedPages.length>1){let toBeActivePage = index==0?openedPages[1]:openedPages[index-1];$rootScope.pages.active = toBeActivePage.url;toBeActivePage.hide = false;}else{$rootScope.pages.active = null;}}page.hide = true;$event.preventDefault();
}

实现 f5页面刷新时，自动打开上次打开页面

每次页面打开时，在当前url 加上 #开头的页面后缀，比如http://localhost:3000/admin/main.html#/intelliDept/outwork。
然后在刷新时，根据 #后缀，跳转到指定页面。

//切换页面时，执行此方法
$scope.selectPage = function(page){location.hash = page.oriUrl;}function openLastUrl(){let hash = location.hash ;if(hash && hash.indexOf("#/")==0){let url = hash.substr(2);let menu = menuData.find(n=>n.url == url)if(menu){openPage(menu);}}}
app.loginPromise.then(function(){openLastUrl();
})

Angular 1 实现多标签页效果相关推荐

JS实现标签页效果(配合css)不同标签下对应不同div
显示页面tab.jsp <%@ page language = "java" import = "java.util.*" pageEnc ...
用css和jquery实现标签页效果（一）
用css和jQuery实现一个简单的标签页效果,用css实现斜边导航的效果,除了ie6其他的浏览器都支持, 其效果如下 css样式: <style type="text/css ...
【Axure交互教程】可滑动的标签页效果
作品名称:可滑动的标签页效果作品编号:Case002 软件版本:Axure9 作品类型:交互案例原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Case00 ...
css3和jQuery实现一个简单的标签页效果
主要用css3另外一种jQuery思路方法来实现标签页的切换效果,主要用css3来实现一些渐变,阴影和圆角效果, css代码如下: body{width: 600px;margin: 100px au ...
【033】Bootstrap实现标签页效果
版本 Bootstrap v3.3.6 jQuery v1.11.3 实现方法给显示标签页内容的DIV分别设置上ID: tab_1 和 tab_2.在标签页按钮上的 href 属性设置 #tab_1 ...
WPF自适应可关闭的TabControl 类似浏览器的标签页
原文:WPF自适应可关闭的TabControl 类似浏览器的标签页效果如图: 虽然说是自适应可关闭的TabControl,但TabControl并不需要改动,不如叫自适应可关闭的TabItem. 大 ...
点击button按钮打开新的标签页
//1.开启新的标签页 <button class="ui button" type="submit" onclick="window.open ...
php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
JavaScript 实现标签页切换效果
JavaScript 实现标签页切换效果构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id="tab">& ...
Bootstrap-导航条-栅格系统-Carousel(轮播效果)-标签页
Bootstrap对于不会设计的童鞋很有用. Twitter设计师的前台框架中文官网:http://v3.bootcss.com/ 导入包等信息: <head> <meta htt ...

Angular 1 实现多标签页效果