项目笔记Learn02-CSDN博客

本文链接：https://blog.csdn.net/shuaigeyimei1/article/details/95535694

AngularJS

angularJS能实现双向绑定，框架自动创建对象并实现依赖注入，能够自定义模块进行模块化设计

1.ng-app 指令：作用是告诉子元素以下的指令是归angularJs的

2.表达式的写法是{{表达式}}，表达式可以是变量或是运算式

<body ng-app>
     {{100+100}}   //运算 读取model变量
</body>

3.ng-model 指令用于绑定变量

4.ng-init指令来对变量初始化

<body ng-app   ng-init="myname='XXX'" >
      <input ng-model="myname" >
      <br>
      {{myname}}
</body>

5.自定义控制器

<script>
		var app=angular.module('myApp',[]);     //定义了一个叫myApp的模块
		     //定义控制器
		app.controller('myController',function($scope){
			$scope.add=function(){
				$scope.z= parseInt($scope.x)+parseInt($scope.y);
			}		
		});
	</script>
	<body>
	     <button ng-click="add()">运算</button>
	     //ng-click  是最常用的单击事件指令，再点击时触发控制器的某个方法
	</body>

注意：$ scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新$ scope,同样的$ scope 发生改变时也会立刻重新渲染视图.

6.内置服务$http

<script>
		var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
		//定义控制器
		app.controller('myController',function($scope,$http){		
			$scope.findAll=function(){
				$http.get('localhost:8082/data.json').success(
					function(reponse){
						$scope.list=response;
					}					
				);				
			}			
		});	
</script>
<body>
    <tr ng-repeat="entity in list">
	   <td>{{entity.name}}</td>
	   <td>{{entity.shuxue}}</td>
	   <td>{{entity.yuwen}}</td>
    </tr>
</body>

实现分页

1.创建类PageResult 需实现序列化接口

private long total;//总记录数
private List rows;//当前页结果

2.在服务层使用PageHelper

@Override
	public PageResult findPage(int pageNum, int pageSize) {
		PageHelper.startPage(pageNum, pageSize); 
		// Page中封装了数据
		Page<TbBrand> page=   (Page<TbBrand>) Mapper.selectByExample(null);
		return new PageResult(page.getTotal(), page.getResult());
	}

3.构建app模块时引入pagination模块实现前端分页

var app=angular.module('pinyougou',['pagination']);//定义品优购模块

放在table标签下

<!-- 分页 -->
<tm-pagination conf="paginationConf"></tm-pagination>

script标签中

//重新加载列表 数据
$scope.reloadList=function(){
	 //切换页码  
$scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
}
//分页控件配置 
$scope.paginationConf = {
		 currentPage: 1,
		 totalItems: 10,
		 itemsPerPage: 10,
		 perPageOptions: [10, 20, 30, 40, 50],
		 onChange: function(){
		        	 $scope.reloadList();//重新加载
		 }
}; 
//分页
$scope.findPage=function(page,rows){	
	$http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(
			function(response){
				$scope.list=response.rows;	
				$scope.paginationConf.totalItems=response.total;//更新总记录数
			}			
	);
}

注意：绑定表单元素，我们用ng-model指令，绑定按钮的单击事件用ng-click

对entity变量进行清空操作

ng-click="entity={}"

实现修改

1.JS中，通过前端传入的id查找到需要修改的实体，将其赋值给entity

$scope.findOne=function(id){
	$http.get('../brand/findOne.do?id='+id).success(
			function(response){  
				$scope.entity= response;					
		     }
	);				
}

2.将查找到的entity传给前端显示页面和save方法，实现修改

$scope.save=function(){
		$http.post('../brand/save.do',$scope.entity ).success(
				function(response){
					if(response.success){
						   //重新查询 
				            $scope.reloadList();//重新加载
					}else{
						   alert(response.message);
					 }
				}		
		);				
}

实现多个删除

JS的关于数组操作的知识
（1）数组的push方法：向数组中添加元素
（2）数组的splice方法：从数组的指定位置移除指定个数的元素，参数1为位置，参数2位移除的个数
（3）复选框的checked属性：用于判断是否被选中

$scope.selectIds=[];//选中的ID集合 
//更新复选
$scope.updateSelection = function($event, id) {		
		if($event.target.checked){     //如果是被选中,则增加到数组
				$scope.selectIds.push( id);	
		}else{
				var index = $scope.selectIds.indexOf(id);
		         $scope.selectIds.splice(index, 1);    //删除 
		}
}			 

   //批量删除 
$scope.dele=function(){			
		//获取选中的复选框			
		$http.get('../brand/delete.do?ids='+$scope.selectIds).success(
				function(response){
					if(response.success){
							$scope.reloadList();   //刷新列表
					}						
				}		
		);				
}

html还需要修改列表的复选框加上$event

<input  type="checkbox" ng-click="updateSelection($event,entity.id)">

实现条件分页查询

后端需传入实体类进行模糊查询
JS代码：

$scope.searchEntity={};//定义搜索对象 			
//条件查询 + 分页数据
$scope.search=function(page,rows){
	$http.post('../brand/search.do?page='+page+"&rows="+rows, $scope.searchEntity).success(
		function(response){
				$scope.paginationConf.totalItems=response.total;//总记录数 
				$scope.list=response.rows;//给列表变量赋值 
		}		
	);	
}

修改刷新代码

//刷新列表 
$scope.reloadList=function(){
	  $scope.search( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);				
}