**
AngularJs ui-router routing multi-view to achieve menu multi-tab
**
There are multiple ui-views in a template, and each ui-view has a unique name as an identifier. Use v-show to determine whether the current ui-view is displayed. The effect shown in the figure below is achieved.
Many articles have talked about ui -Router with multiple views (refer to the article: http://bubkoo.com/2014/01/01/angular/ui-router/guide/multiple-named-views/), but there are few implementations of menu tab cache switching, in fact It is not difficult to achieve such an effect, but there are many issues that need attention. as follows:
//currentTabs就是当前已打开的全部菜单，a标签一定不能加ui-self，否则就无法缓存页面，相当于再次请求加载当前路由模块
<ul>
<li ng-repeat="item in currentTabs" ng-class="{
'active':item.active}">
<a ng-click="show(item,currentTabs);" >{
{item.label}}
<i ng-click="closeMenuTabs(item)" alt="关闭" class="fa fa-times close-gray"></i>
</a>
</li>
</ul>
//ui-view的值为路由状态管理器中的views，不懂的请参考（参考文章：http://bubkoo.com/2014/01/01/angular/ui-router/guide/multiple-named-views/）
根据控制ng-show来判断当前模块是否显示
<div style="width: 100%; height: 100%" class="app-content-body fade-in-up" ng-repeat="item in currentTabs" id={
{item.name}} ui-view={
{item.name}} ng-show="item.active">
</div>
//通过点击a标签，改变ui-view
$scope.show = function(current,alltabs){
jQuery.each($rootScope.currentTabs,function(){
if(current.data.href == this.data.href){
this.active = true;
}else{
this.active = false;
}
});
$scope.openMenu(currentUrl);
}
$scope.openMenu = function(url,type){
if(url!=null && url!='null' && url!=''){
if(type==3){
//新窗口打开
if(url.indexOf("http")==-1){
url = "http://"+url;
}
window.open(url);
}else if(type==2){
//本窗口打开
if(url.indexOf("http")==-1){
url = "http://"+url;
}
window.location.href = url;;
}else{
//本工作区打开
if(url.indexOf("#")==0){
$rootScope.otherUrl = false;
window.location = url;
}else{
$rootScope.otherUrl = true;
window.open(url);
return;
//$state.go('app.showOutSide', {urlstr: url});
}
}
}
};
The above can achieve basic menu switching, but it should be noted that:
1. The name of the controller of each page module cannot be the same, otherwise there will be confusion in calling the method, and it may enter another controller with the same name to call the method;
2. When using this method to cache the page, if you open multiple modules and use websocket to receive server messages, you cannot use WebSocket.onmessage to monitor and receive server messages. Otherwise, WebSocket.onmessage in other controllers may be called, and the current page module will be message server listens not, then we can use
socket.addEventListener ( 'message', function (Event) { the console.log ( 'from the message server', the event.data); }); listening server messages, and The method inside judges whether it is required by the current page. 3. If routing calls are used in the pop-up box of a page, the page in the pop-up box will not be displayed, so it is recommended not to directly call the route to load the page in the pop-up box, or you can in index.jsp:
```html
<div class="app" id="app" ng-class="{'app-header-fixed':app.settings.headerFixed,'app-header-fixed-tabs':app.settings.tabsFixed, 'app-aside-fixed':app.settings.asideFixed, 'app-aside-folded':app.settings.asideFolded, 'app-aside-dock':app.settings.asideDock, 'container':app.settings.container}" ui-view>
<div ui-view></div>
</div>
4. If the names in several module views are the same, there will be a problem of duplication of loaded pages;
5. Style style: If multiple modules have selectors with the same name, the styles will conflict;
some problems will slow down later Add slowly.
6. If the page is opened too much , there will be a lag phenomenon.
7. It must be introduced <script src="vendor/angular/angular-ui-router-ext/ct-ui-router-extras.min.js"></script>, otherwise there will be a situation where the ui-view is not cached