初次学习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的加载顺序不能颠倒