品优购项目笔记day02——（AngularJS入门+使用angular+SSM实现品牌管理之增删改及分页查）

第二天做了的内容大纲如下

1.运用AngularJS前端框架的常用指令

2.完成品牌管理的列表功能

3.完成品牌管理的分页列表功能

4.完成品牌管理的增加功能

5.完成品牌管理的修改功能

6.完成品牌管理的删除功能

7.完成品牌管理的条件查询功能

1.前端框架AngularJS入门

1.1 AngularJS简介

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

1.2 AngularJS四大特征

1.2.1 MVC 模式

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

Model:数据,其实就是angular变量($scope.XX);

View: 数据的呈现,Html+Directive(指令);

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

1.2.2双向绑定

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

1.2.3依赖注入

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

1.2.4模块化设计

高内聚低耦合法则

1)官方提供的模块 ng、ngRoute、ngAnimate //ng常用，ngRoute用于路由，ngAnimate用于动画效果

2)用户自定义的模块 angular.module('模块名',[ ])

demo1：表达式 {{}}

demo2:双向绑定（改哪一个另一个都会变，也可以说是多向绑定）

3.初始化命令：ng-init，也可以调用方法如 ng-init = "findAll()"

4.控制器:ng-controller，下面module初始化的第二个参数为引用的模块，这里没引用所以为[]

5.点击事件 ：ng-click

6.数组遍历:ng-repeat

7.遍历对象数组显示其属性

品牌管理之增删改查

1.实现显示全部品牌

//在body里添加ng-init="findAllBrand()，但是后面添加分页控件后，页面加载时会自动查询，所以ng-init去掉了

2.实现页面加载时分页显示所有品牌信息

(1)在要显示分页控件的位置加上如下代码

（2）在引用分页模块：在[] 添加 '[pagination]'

(3)分页的属性设置，默认第一页，默认每页十条，可修改每页条数

(4)页面重新加载时调用方法

(5)定义分页用的类：total为总页数，rows为当前页信息

(6)后台controller层代码

(7)后台service层代码（接口代码略）

2.品牌新增

先将弹出窗体绑定实体 entity

(1) js代码

(2)保存按钮绑定事件

(3)因为新建与修改这里用的同一实体，所以点击新建按钮时，将entity置空

(4)定义一个result类，增删改时返回对象为此类型，result为结果成功与否，msg为提示信息

(5)后台controller层代码

(6)后台service层代码（接口代码略）

3.品牌修改

后端代码与新增一样，前端传过来id为空则为新增，否则为修改

只需要将修改按钮绑定事件参数传id即可

4.将选中项删除

(1) 勾选框绑定方法以及删除按钮绑定方法

(2)方法定义,selectIds定义为空数组，不然会报错

（3）后台controller层代码

（4）后台service层代码（接口代码略)

5.条件查询

（1）添加查询条件输入框与查询按钮，绑定实体searchEntity

（2）查询方法与前面分页查询一样，只是查询条件多了品牌信息，后台代码也一样