angular的curd前端模板及讲解

什么是angularjs
angularjs是谷歌的一款前端框架.

作用:
前端mvc三层体系架构, 可以在前端大量写业务代码, 分层开发. 低耦合, 方便扩展.

Model:数据,其实就是angular变量($scope.XX);
$scope是angularjs的内置对象, $scope中有请求的数据有响应的数据, 还有方法也都放进去. 它的作用域范围是当前页面

View: 数据的呈现,Html+Directive(指令);
view=html页面 + 指令(也就是页面上的事件)

Controller:操作数据,就是function,数据的增删改查;

angularjs知识点:

1. 如果需要用angularjs必须在页面引入核心包
2. 如果使用angularjs必须在页面body标签上写上ng-app表示使用angularjs应用
3. 表达式, 页面如果需要展示数据需要用两个大括号{{表达式或者变量}}
4. ng-model指令是给input框起名, 后台如果接收表单数据, 就可以根据ng-model中的属性名获取值, 页面也可以根据
   ng-model来获取这个input框对象, ng-model中的值是放入当前页面的$scope中保存
5. $scope是angularjs的内置对象, $scope中有请求的数据有响应的数据, 还有方法也都放进去. 它的作用域范围是当前页面
6. ng-init指令: angularjs中只要页面一加载首先执行ng-init中的操作
7. var app=angular.module(‘myApp’,[]); //定义了一个叫myApp的模块, 定义后在body标签上声明使用的模块名称
8. app.controller(‘myController’,function($scope)在模块中声明控制器, 定以后需要在body标签上声明使用的控制器
9. ng-click鼠标单击指令: 就是鼠标单击事件
10. 循环遍历: ng-repeat是循环指令, 里面in关键字后面是需要遍历的集合变量,in前面是我们自己 起名的一个临时变量, 每一次循环都会将循环出来的数据赋值给我们的临时变量, 在循环下就可以使用两个大括号将 将循环出来的值展示到页面上.
11. $http是angularjs的内置对象, 主要做发送http请求并且是ajax请求, $http.get是发送get请求, $http.post是发送post请求.
12. $event是angularjs中的内置对象,作用是从$event当中可以获取当前操作的事件是什么.例如如果是复选框那么
    可以中里面知道是勾选还是取消勾选

```java
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
	<!-- 分页组件开始 -->
	<script src="../plugins/angularjs/pagination.js"></script>
	<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
	<!-- 分页组件结束 -->

	<script type="text/javascript">
        var app=angular.module('pinyougou', ['pagination']);//定义模块
        app.controller('brandController' ,function($scope,$http){
            //读取列表数据绑定到表单中
            $scope.findAll=function(){
                $http.get('../brand/findAll.do').success(
                    function(response){
                        $scope.list=response;
                    }
                );
            }


            //重新加载列表 数据
            $scope.reloadList=function(){
                //切换页码, 第一个参数: 当前页, 第二个参数:每页展示数据条数
                $scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
            }

			//分页控件配置
            $scope.paginationConf = {
                //当前页
                currentPage: 1,
				//默认每页总条数
                totalItems: 10,
				//每页展示多少条数据
                itemsPerPage: 10,
				//每页展示多少条下拉框, 默认每页展示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){
                        //返回的数据集合List<Brand>
                        $scope.list=response.rows;
                        //查询到的总记录数
                        $scope.paginationConf.totalItems=response.total;//更新总记录数
                    }
                );
            }


			//保存
            $scope.save=function(){
                var methodName='add';//方法名称
                if($scope.entity.id!=null){//如果有ID
                    methodName='update';//则执行修改方法
                }
                $http.post('../brand/'+ methodName +'.do',$scope.entity ).success(

                    function(response){
                        if(response.success){
                            //重新查询
                            $scope.reloadList();//重新加载
                        }else{
                            alert(response.message);
                        }
                    }
                );
            }

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

            $scope.selectIds=[];//选中的ID集合
			//更新复选
            $scope.updateSelection = function($event, id) {
                //$event.target.checked如果值为true则是选中操作, 如果为false则是取消选中操作
                if($event.target.checked){//如果是被选中,则增加到数组
					//$scope.selectIds.push方法是向数组中添加元素
                    $scope.selectIds.push( id);
                }else{
                    //$scope.selectIds.indexOf获取这个元素在数组中的索引号
                    var idx = $scope.selectIds.indexOf(id);
                    //$scope.selectIds.splice方法是从数组中的指定索引号位置删除元素, 第一个参数: 索引号, 第二个参数:删除几个元素
                    $scope.selectIds.splice(idx, 1);//删除
                }
            }
			//批量删除
            $scope.dele=function(){
                //获取选中的复选框
                $http.get('../brand/delete.do?ids='+$scope.selectIds).success(
                    function(response){
                        if(response.success){
                            $scope.reloadList();//刷新列表
                        }
                    }
                );
            }


        });