angular JS 在子父页面中的应用

初次学习angular JS，遇上了一些摸不着头脑的问题，网上搜索他人的解决方法依旧解决不了，后来看angular JS的菜鸟教程，一步一步试试着解决了。以下作为一个小结。

我要的页面效果：主页面左侧为导航栏，右侧为内容显示区域DIV，选择菜单，加载页面到DIV并渲染数据。

一、在父页面DIV中加载angular页面，父页面没有采用angular JS。

$("#main_container").load("html/test-angularJS.html");  

用JQuery的load()方法加载页面，页面可以正常显示，从后台拿到的JSON数据也能渲染出来。但是

    （1）ng-click无法使用：我也不知道怎么解决，页面单独拿出来执行，angular执行没有问题，被load加载进来不行；

    （2）在父页面中再次点击按钮触发事件（加载angular页面），angular不起作用了，数据无法显示，直接显示{{name}}这样：就是第一次load页面时，angular是没问题，在不刷新父页面的情况下再load该angular子页面就出问题，如果采用window.location.href进行加载页面就不是我想要的效果。

## 这个没有找到解决办法

二，子父页面都用angular JS，使用angular JS路由来实现——这个完美运行

我不需要采用load来加载页面了，angular JS就可以实现多视图单页应用，贴上部分代码：

main.js

var app = angular.module('routeApp',['ngRoute']);
	
	app.controller('peopleController', function($scope,$route){ $scope.$route = $route; })
	.controller('scoreController', function($scope,$route){ $scope.$route = $route; })
	.config(['$routeProvider', function($routeProvider){
		$routeProvider
		.when('/peopleManageBtn',{ templateUrl:'html/people.html', controller:'peopleController'})
		.when('/scoreScanBtn',{ templateUrl:'html/test.html', controller:'scoreController'})
		.otherwise({redirectTo:'/peopleManageBtn'});
	}]);

这个代码可以在angular JS菜鸟教程里找到案例，我也是学习案例后写的。

main.html

<div ng-app='routeApp'>

    <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
	<ul class="nav sidebar-nav">

            <li><a href="#!/peopleManageBtn" id="peopleManageBtn"><i class="fa fa-user-o"></i> 人员管理</a></li>
	    <li><a href="#!/scoreScanBtn" id="scoreScanBtn"><i class="fa fa-fw fa-folder"></i> 成绩录入</a></li>
        </ul>
    </nav>
    
    <div id='main_container' class="container" ng-view="">

</div>

引入js的顺序

<script src="js/jquery/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
<script src="js/main/main.js"></script>
<script src="./html/people.js"></script>

people.js是专门对要加载的子页面写的，这部分也可以放入main.js里面，但太过于混乱了。

app.controller("peoples",function($scope,$http){
	
	var url = "./people/selectAll";
	
	$http.post(url).then(function(resq){
		$scope.cart = resq.data;
	});
	
	
	/**找一个元素的索引**/
	var findIndex=function(id)
	{
		var index=-1;
		angular.forEach($scope.cart,function(item,key){
				if(item.id === id)
				{
					index=key;
				}
			
			});
			return index;
	}
	
	/**移除**/
	$scope.remove=function(id){
		//alert(id);
		//**找出该id对应的索引
		var index=findIndex(id);
		alert(index);
		if(index !== -1)
		{
			$scope.cart.splice(index,1);
		}
	}
		
			
});

一个主页面只能创建一个module，即：

var app = angular.module('routeApp',['ngRoute']);

否则会发生冲突，报错信息比如：

并且子页面涉及angular JS的 js文件都必须放在主页面统一加载，顺序当然是含有创建module的 js 第一个。如果涉及angular JS的 js 不在主页面加载，同样会报上图这样的错误信息。

实现效果如下：

最后总结：

1. 在div中加载页面：load() ， innerHTML ， html 等常见的JQuery方法，还可以使用 angular 路由

2. angular路由获取页面资源时，在本地获取涉及跨域请求，资源获取不到，通过tomcat(服务器)请求资源就没有这个问题

3. angular JS与JQuery的加载顺序不能颠倒