一.Angularjs入门以及常用的命令

1.简介

        AngularJS 诞生于2009 年，由 Misko Hevery 等人创建，后为 Google所收购。是一款优
秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心
的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。

2.四大特性

      1. mvc模式:

       Angular 遵循软件工程的 MVC 模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过
依赖注入（dependency injection），Angular 为客户端的Web 应用带来了传统服务端的服务，
例如独立于视图的控制。 因此，后端减少了许多负担，产生了更轻的 Web应用。

2.数据的双向绑定

    AngularJS 是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软
件构建，而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统 HTML，通过双向
的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此，
AngularJS 使得对 DOM 的操作不再重要并提升了可测试性。

3.依赖注入

依赖注入(Dependency Injection,简称 DI)是一种设计模式, 指某个对象依赖的其他对象无
需手工创建，只需要“吼一嗓子”，则此对象在创建时，其依赖的对象由框架来自动创建并
注入进来,其实就是最少知识法则;模块中所有的 service 和 provider 两类对象，都可以根据形
参名称实现 DI.

4.模块化设计

高内聚低耦合法则
1)官方提供的模块 ng、ngRoute、ngAnimate
2)用户自定义的模块 angular.module('模块名',[ ])

3.常用的指令

     表达式的写法:{ { 表达式}}  这个可以获取值

     ng-app:三个所用:

              告诉元素的下一个指令归angulars管,

              angularjs会识别,定义了应用程序的根元素.

              网页加载完毕会自动引导

     ng-model:绑定变量,这样用户在文本输入内容就绑定在变量上,并且表达式可以实时作为输出

     ng-controller:用于指定所使用的控制器

     $scope:的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会
立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图.说白了就是html和js交互的桥梁

    ng-init:初始化指令,让一些变量具有初始值

     ng-click:事件指令,可以通过一个按钮的点击事件

     ng-rerepeat:循环数组的变量,也可以循环对象数组

     $http:内置服务,底层封装了ajax的实现细节

     $event:事件方法

二.品牌页面的CRUD实现

    我们首先通过mybatis的逆向工程 生成所有基于基础表的增删改查,添加到项目中,我们在手动添加一个搜索框,作为条件查询

    页面效果图如下:

    

功能需求如下:

  1.条件查询分页展示到列表

  分析:   

后台实现:   从前台传过来三个参数,tbBrand ,pageNum ,pageSize  我们不单独进行分页查询,为了不让代码冗余,我们可以通过一个方法,条件查询实现这个功能,当页面加载的时候,不输入条件,就是默认用前台发送的pageNum和pageSize,进行分页返回结果

前台实现:  通过定义一个模块,和控制器,然后进行内置服务发送请求,携带三个参数

var app = angular.module("pinyougou",['pagination']);//定义控制器  参数一：控制器名称  参数二：控制器做的事情//$scope angularjs内置对象，全局作用域对象  作用：html与js数据交换的桥梁//$http angularjs发起请求的内置服务对象   全部都是异步ajaxapp.controller("brandController",function ($scope,$http) {//定义查询所有品牌列表的方法$scope.findAll=function () {//response接收响应结果$http.get("../brand/findAll.do").success(function (response) {$scope.list=response})}//分页展示条//分页配置$scope.paginationConf = {currentPage:1,  				//当前页totalItems:10,					//总记录数itemsPerPage:10,				//每页记录数perPageOptions:[10,20,30,40,50], //分页选项，下拉选择一页多少条记录onChange:function(){			//页面变更后触发的方法$scope.reloadList();		//启动就会调用分页组件}};//重新加载分页信息/*$scope.reloadList=function () {$scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);}*///条件查询和分页展示$scope.searchEntity={};//解决初始化参数为空的情况$scope.reloadList=function () {$http.post("../brand/search.do?pageNum="+$scope.paginationConf.currentPage+"&pageSize="+$scope.paginationConf.itemsPerPage,$scope.searchEntity).success(function (response) {$scope.list = response.rows;$scope.paginationConf.totalItems=response.total;})}});

    页面展示,通过ng-repeat="pojo in list "

<td><input  type="checkbox"  ></td><td>{{pojo.id}}</td><td>{{pojo.name}}</td><td>{{pojo.firstChar}}</td>

 我们在页面加载完成的时候就默认调用分页显示,如果输入条件在按照条件查询

2.新增实现

后台:提交tbBrand  插入后,通过类封装,提示信息和booler值

前台:添加add点击事件

注意:下一次点击新建是,为了不让信息回显,我们在新建的时候添加点击事件,ng-click="entity={}"表示置空

3.修改实现

我们首先考虑修改和添加都是一个编辑页面,那么我们不能添加两个点击事件,实现,所以我们可以,通过是否携带id判断是新建还是修改,这个非常重要

后台实现:   两个操作,一个是页面的回显,一个修改后的数据通过条件id修改

前台实现:  编写一个保存方法,通过判断是否携带id判断,实现新建和修改的方法

修改前台代码:

 //添加$scope.save=function () {//定义一个变量var methodName="";if($scope.entity.id!=null){//修改methodName="update.do";}else{//新增methodName="add.do";}$http.post("../brand/"+methodName,$scope.entity).success(function (response) {if (response.success){//添加成功$scope.reloadList();}else{//不成功alert(response.message);}})}//通过id查找$scope.findOne=function (id) {$http.get("../brand/findOne.do?id="+id).success(function (response) {$scope.entity=response;})}});

后台代码:

 //通过id查找@RequestMapping("/findOne")public TbBrand findOne(Long id){return brandService.findOne(id);}//修改@RequestMapping("/update")public Result update(@RequestBody TbBrand brand){try {brandService.update(brand);return new Result(true,"修改成功");} catch (Exception e) {e.printStackTrace();return new Result(false,"修改失败");}}

注意事项:就是页面的回显问题,还有清除新建是编辑的信息

4.删除实现

分析:主要技术点就是,通过点击复选框,获得所有的选项的数组

后台:通过前台传回的数组,我们在service进行循环删除

前台:绑定删除的点击事件,勾选复选框时,向保存品牌的id列表的数组中添加id,   js往数据中添加值,通过push()方法

取消勾选复选框时,向保存的品牌id数组中移除id       js中从数组中移除值     splice(index,1)

注意:参数一:移除位置的元素的索引值             参数二:该位置移除几个元素

$event是一个事件对象,是又angulars提供的,我们直接使用就可以了

ng-click="updateSelection($event,pojo.id)表示添加一个点击事件,$event为angulars的事件,$event.target.checked相当于获取复选框的状态

前端代码:

 //定义复选框ids数组值$scope.selectIds=[];//跟新复选框状态$scope.updateSelection=function ($event,id) {//判断  选中的状态if($event.target.checked){//选中状态$scope.selectIds.push(id);}else{//取消勾选,移除当前的id值,//参数一:移除当前位置的索引值,参数二:从该处移除几个值var index = $scope.selectIds.indexOf(id);$scope.selectIds.splice(index,1);}}//删除$scope.delete=function () {if (confirm("您确定要删除吗")){$http.get("../brand/delete.do?ids="+$scope.selectIds).success(function (response) {if (response.success){//删除成功$scope.reloadList();}else{//删除失败//给提示消息alert(response.message);}})}}

后端核心代码:

 //删除@Overridepublic void delete(Long[] ids) {if (ids!=null&&ids.length>0) {for (Long id : ids) {brandMapper.deleteByPrimaryKey(id);}}}

三.常见的错误

1.页面回显时,忘记置空新建的编辑条

2.一个编辑栏,同时点击保存按钮实现新建和修改的两个功能,通过判断是否有id来实现功能

四.今日总结

angulars常用的命令必须记住

理解四大特性

单表的增删改查非常熟悉

代码地址guthub:

https://github.com/wangwei620/pinyougou_self