集成 angularjs

潘钊
1 parent fda87554
Showing 5 changed files with 89 additions and 36 deletions
src/main/java/com/bsth/entity/sys/Module.java
src/main/java/com/bsth/filter/ResourceFilter.java
src/main/resources/static/index.html
src/main/resources/static/pages/permission/module/add_modal.html
src/main/resources/static/pages/permission/module/edit_modal.html
@@ -35,6 +35,9 @@ public class Module {
  
 	private String icon;
  
+	//页面容器
+	private String container;
+	
 	/**
 	 * 1：组
 	 * 2：目录
@@ -152,4 +155,12 @@ public class Module {
 		// TODO Auto-generated method stub
 		return this.id.equals(((Module)obj).getId());
 	}
+
+	public String getContainer() {
+		return container;
+	}
+
+	public void setContainer(String container) {
+		this.container = container;
+	}
 }
@@ -42,7 +42,7 @@ public class ResourceFilter extends BaseFilter {
 			File f = new File(fPath);
  
 			if (f.exists() && f.isFile() ){
-				response.sendRedirect("/#" + joinParam(request));
+				response.sendRedirect("/?_=" + joinParam(request));
 			}else
 				response.sendRedirect("/");
 		}
@@ -89,6 +89,10 @@ tr.row-active td {
 .mt-element-list .list-simple.mt-list-container ul > .mt-list-item {
     padding: 3.3px 0;
 }
+
+#route-container{
+	display: none;
+}
 </style>
  
 <!-- ocLazyLoading载入文件的位置 -->
@@ -223,9 +227,15 @@ tr.row-active td {
 			<ul class="sub-menu">
 			{{each dir.children as module s}}
 				 <li class="nav-item  ">
-             		<a href="/pages/{{module.path}}" class="nav-link " data-pjax>
-                 		<span class="title">{{module.name}}</span>
-             		</a>
+					{{if module.container=="pjax-container"}}
+						<a href="/pages/{{module.path}}" class="nav-link " data-pjax>
+                 			<span class="title">{{module.name}}</span>
+             			</a>
+					{{else}}
+						<a href="{{module.path}}" class="nav-link " data-angularjs>
+                 			<span class="title">{{module.name}}</span>
+             			</a>
+					{{/if}}
          		</li>
 			{{/each}}
 			</ul>
@@ -233,25 +243,6 @@ tr.row-active td {
 	{{/each}}
 {{/each}}
  
-<li class="heading">
-    <h3 class="uppercase">测试用例</h3>
-</li>
-<li class="nav-item">
-    <a href="javascript:;" class="nav-link nav-toggle ">
-        <i class="fa fa-cloud"></i>
-        <span class="title">用例组1</span>
-        <span class="arrow"></span>
-    </a>
-    <ul class="sub-menu">
-        <li class="nav-item  ">
-            <a href="#/busConfig.html" class="nav-link ">
-                <span class="title">用例1</span>
-            </a>
-        </li>
-    </ul>
-</li>
-
-
 </script>
  <!--[if lt IE 9]>
 <script src="assets/plugins/respond.min.js"></script>
@@ -300,14 +291,13 @@ tr.row-active td {
 <!-- 日期控件 -->
 <script src="metronic_v4.5.4/plugins/bootstrap-datetimepicker-2/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
  
-<!-- 地图相关（地图JS现在在子页面引入有问题，先全部放在index） -->
+<!-- 地图相关 -->
 <!-- 百度 -->
 <script src="http://api.map.baidu.com/api?v=2.0&ak=IGGrr4UjwIYzatoCRFKEL8sT" ></script>
 <script src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js" ></script>
 <!-- 高德 -->
 <script src="http://webapi.amap.com/maps?v=1.3&key=16cb1c5043847e09ef9edafdd77befda"></script> 
  
-
 <script src="assets/js/common.js"></script>
 <!-- d3.js -->
 <script src="http://apps.bdimg.com/libs/d3/3.4.8/d3.min.js"></script>
@@ -329,18 +319,25 @@ tr.row-active td {
 <script type="text/javascript">
  
 var dir = '/pages/';
-var pjaxContainer = '#pjax-container';
+var pjaxContainer = '#pjax-container'
+	,angJsContainer = '#route-container';
  
 $(function(){
 	//带 data-pjax 的链接由pjax加载
 	$(document).pjax('a[data-pjax]', pjaxContainer);
  
-	//左菜单点击事件
+	//pjax左菜单点击事件
 	$(document).on('click','#leftMenuSidebar a[data-pjax]', function(){
 		$('#leftMenuSidebar li.nav-item.active').removeClass('active');
 		$(this).parent().addClass('active');
 	});
  
+	//angularjs左菜单点击事件
+	$(document).on('click','#leftMenuSidebar a[data-angularjs]', function(){
+		$('#leftMenuSidebar li.nav-item.active').removeClass('active');
+		$(this).parent().addClass('active');
+	});
+	
 	//加载左菜单栏
 	$get('/module/findByCurrentUser', null,
 			function(ms){
@@ -351,15 +348,29 @@ $(function(){
 		var menuHtml = template('menu_list_temp', {list: treeArray});
 		$('#leftMenuSidebar').html(menuHtml);
  
-		// 检查Hash值 
-		var h = location.hash;
-		if(h && h.indexOf(dir) != -1){
-			var path = h.substring(1, h.length);
-			loadPage(path);
-			//选中对应菜单项
+		/*
+		 * ----------- 检查URL ----------------
+		 */
+		var p = $.url().param('_')
+			,h = location.hash;
+		if(p && p.indexOf(dir) != -1){
+			showPjax();
+			//普通片段
+			loadPage(p);
+			//选中菜单
+			$.each($('#leftMenuSidebar a'), function(i, item){
+				if(urlPattern($(item).attr('href'), p)){
+					activeLeftMenu(item);
+				}
+			});
+		}
+		else if(h){
+			//angularjs片段
+			showAngJs();
+			//选中菜单
 			$.each($('#leftMenuSidebar a'), function(i, item){
-				if(urlPattern($(item).attr('href'), path)){
-					$(item).parent('.nav-item').addClass('active').parent('.sub-menu').show().parent().addClass('open');
+				if($(item).attr('href') == h){
+					activeLeftMenu(item);
 				}
 			});
 		}
@@ -388,7 +399,20 @@ $(function(){
 		}
 		return r;
 	}
-
+	
+	function showPjax(){
+		$(angJsContainer).html('').hide();
+		$(pjaxContainer).show();
+	}
+	
+	function showAngJs(){
+		$(pjaxContainer).html('').hide();
+		$(angJsContainer).show();
+	}
+	
+	function activeLeftMenu(item){
+		$(item).parent('.nav-item').addClass('active').parent('.sub-menu').show().parent().addClass('open');
+	}
 </script>
 </body>
 </html>
 \ No newline at end of file
@@ -43,6 +43,15 @@
 							</div>
 						</div>
 						<div class="form-group">
+							<label class="col-md-3 control-label">片段渲染容器</label>
+							<div class="col-md-9">
+								<select class="form-control input-medium" name="container">
+									<option value="pjax-container">pjax-container</option>
+									<option value="route-container">route-container</option>
+								</select>
+							</div>
+						</div>
+						<div class="form-group">
 							<label class="col-md-3 control-label">映射地址</label>
 							<div class="col-md-9">
 								<input type="text" class="form-control input-medium"
@@ -45,6 +45,15 @@
 							</div>
 						</div>
 						<div class="form-group">
+							<label class="col-md-3 control-label">片段渲染容器</label>
+							<div class="col-md-9">
+								<select class="form-control input-medium" name="container">
+									<option value="pjax-container">pjax-container</option>
+									<option value="route-container">route-container</option>
+								</select>
+							</div>
+						</div>
+						<div class="form-group">
 							<label class="col-md-3 control-label">映射</label>
 							<div class="col-md-9">
 								<input type="text" class="form-control input-medium"