初次學習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的加載順序不能顛倒