一、 AngularJS
- 是一款前端框架!
- 核心: MVC,模块化,自动双向数据绑定,依赖注入等。
AngularJS的四大特征
MVC模式
- Model: 数据,其实就是angular变量{$scope.XXX}
- View: 数据的呈现,html+directive(指令)
- Controller: 操作数据,就是function,数据的增删改查。
双向绑定
- 声明式编程: 用于构建用户界面以及编写软件构建
- 指令式编程: 表示业务逻辑。
依赖注入
- 对象创建时,无需手动创建。由框架自动创建并注入进来。
模块化设计
- 高内聚低耦合
- 官方提供的模块:ng,ngRoute,ngAnimate
- 用户自定义的模块: angular.model(‘模块名’,[ ])
AngularJS入门
表达式
- ng-app: 声明模块的指令 作用:定义angularjs的作用域
- {{}} 表达式 作用:用于获取模型数据的值,并展示到页面上
<!--引入angularjs资源 在head部分-->
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<body>
<!--声明模块的指令 作用:定义angularjs的作用域-->
<div ng-app>
<!--{{}} 表达式 作用:用于获取模型数据的值,并展示到页面上-->
{{100+100}}
</div>
</body>
- 结果:
数据的双向绑定
- ** ng-model 绑定模型变量的指令**
<body ng-app>
<!-- ng-model 绑定模型变量的指令-->
请输入:<input type="text" ng-model="name" ><br>
<!-- {{}}表达式 作用:用户获取模型数据的值,展示在页面上 -->
输入的内容:{{name}}
</body>
- 结果:
输入什么,下面‘输入的内容’就展示什么
控制器
-
var app = angular.module(“myapp”,[]);
- 参数一:模块名称
- 参数二: 依赖的其他模块 注意:如果没有依赖其他模块,也需要制定空数组
-
app.controller(“myctrl”,function ($scope){ …}
- 参数一:控制器名称
- 参数二:控制器要做的事情
<head>
<meta charset="UTF-8">
<title>控制器定义以及mvc模式和模块化开发演示</title>
<!---->
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript">
//定义模块 参数一:模块名称 参数二:依赖的其他模块 注意:如果没有依赖其他模块,也需要制定空数组
var app = angular.module("myapp",[]);
//定义控制器 基于模块定义控制器
//参数一:控制器名称 参数二:控制器要做的事情
//$scope 理解为全局的作用域对象 作用:用于js与html的数据交换桥梁
app.controller("myctrl",function ($scope) {
//为name模型变量初始化赋值
$scope.name = "张三";
});
</script>
</head>
<!--声明模块的指定,作用:定义angularjs的作用范围-->
<body ng-app="myapp" ng-controller="myctrl">
<!-- ng-model 绑定模型变量的指令-->
请输入:<input type="text" ng-model="name"><br>
<!-- {{}}表达式 作用:用户获取模型数据的值,展示在页面上 -->
输入的内容:{{name}}
</body>
- 结果:
初始化指令
- ng-init :初始化指令
- ng-model 绑定模型变量的指令
<head>
<meta charset="UTF-8">
<title>demo之初始化指令</title>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript">
//定义模块 参数一:模块名称 参数二:依赖的其他模块 注意:如果没有依赖其他模块,也需要制定空数组
var app = angular.module("myapp",[]);
//定义控制器 基于模块定义控制器
//参数一:控制器名称 参数二:控制器要做的事情
//$scope 理解为全局的作用域对象 作用:用于js与html的数据交换桥梁
app.controller("myctrl",function ($scope) {
});
</script>
</head>
<!--声明模块的指定,作用:定义angularjs的作用范围-->
<body ng-app="myapp" ng-controller="myctrl" ng-init="name='李四'">
<!-- ng-model 绑定模型变量的指令-->
请输入:<input type="text" ng-model="name"><br>
<!-- {{}}表达式 作用:用户获取模型数据的值,展示在页面上 -->
输入的内容:{{name}}
</body>
事件指令
- ng-click
- ng-model 绑定模型变量的指令
//在控制器中添加如下方法
//相加的方法
$scope.add=function () {
//parseInt将数字字符串解析为number
$scope.z=parseInt($scope.x)+parseInt($scope.y);
}
// 在声明模块中添加如下代码
<!-- ng-model 绑定模型变量的指令-->
请输入x:<input type="text" ng-model="x"><br>
请输入y:<input type="text" ng-model="y"><br>
<button ng-click="add()">相加</button>
<!-- {{}}表达式 作用:用户获取模型数据的值,展示在页面上 -->
输入的内容:{{z}}
遍历指令 ng-repeat
- 还有ng-option遍历指令
<head>
<meta charset="UTF-8">
<title>遍历对象数组</title>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript">
//定义模块 参数一:模块名称 参数二:依赖的其他模块 注意:如果没有依赖其他模块,也需要制定空数组
var app = angular.module("myapp",[]);
//定义控制器 基于模块定义控制器
//参数一:控制器名称 参数二:控制器要做的事情
//$scope 理解为全局的作用域对象 作用:用于js与html的数据交换桥梁
app.controller("myctrl",function ($scope) {
//定义对象数组
//json格式数组:[] json格式对象:{}
$scope.list=[
{name:"孙悟空",shuxue:"100",yuwen:"20"},
{name:"猪八戒",shuxue:"20",yuwen:"200"},
{name:"老三",shuxue:"30",yuwen:"201"},
];
});
</script>
</head>
<!--声明模块的指定,作用:定义angularjs的作用范围-->
<body ng-app="myapp" ng-controller="myctrl">
<table>
<tr>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
</tr>
<!-- ng-repeat 遍历指令-->
<tr ng-repeat="stu in list">
<td>{{stu.name}}</td>
<td>{{stu.shuxue}}</td>
<td>{{stu.yuwen}}</td>
</tr>
</table>
</body>
内置服务 $http
- $http: 相当于发送ajax异步请求。
<head>
<meta charset="UTF-8">
<title>内置服务$http</title>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript">
//定义模块 参数一:模块名称 参数二:依赖的其他模块 注意:如果没有依赖其他模块,也需要制定空数组
var app = angular.module("myapp",[]);
//定义控制器 基于模块定义控制器
//参数一:控制器名称 参数二:控制器要做的事情
//$scope 理解为全局的作用域对象 作用:用于js与html的数据交换桥梁
app.controller("myctrl",function ($scope,$http) {
//定义对象数组
//json格式数组:[] json格式对象:{}
$scope.findAll= function () {
//success 请求成功后的回调函数
$http.get("../brand/findAll.do").success(function (response) {
$scope.list=response;
})
}
});
</script>
</head>
<!--声明模块的指定,作用:定义angularjs的作用范围-->
<body ng-app="myapp" ng-controller="myctrl" ng-init="findAll()">
<table>
<tr>
<th>编号</th>
<th>名称</th>
<th>首字母</th>
</tr>
<!-- ng-repeat 遍历指令-->
<tr ng-repeat="brand in list">
<td>{{brand.id}}</td>
<td>{{brand.name}}</td>
<td>{{brand.firstChar}}</td>
</tr>
</table>
</body>
二、品牌列表的展示
2.1 参数绑定原理
- 传统参数绑定: 从页面把参数直接传递给后台JavaBean,然后实现保存。
- AngularJs参数绑定:
- 使用ng-model来绑定参数
- 传递参数必须和接收参数实体一一对象,否则不能接受参数。
- 对应关系:ng-model="entity.username"
- entity对应后台接受参数对象
- username对象后台接受参数对象中属性。
2.2 $scope作用域
$scope作用域可以绑定方法,变量,对象等。
- $scope作用域的特点:
- 绑定在$scope作用域中的变量及对象,才能在html中调用使用。
- 在angularjs指令调用方法中,此方法必须绑定在$scope作用域中。
2.3 查询品牌列表(基于pageHelper的分页查询)
- 后台代码实现
-
- BrandController
@RestController
@RequestMapping("/brand")
public class BrandController {
// @Reference 基于dubbo注解,去注册中心引用(查找)服务
@Reference
private BrandService brandService;
/**
* 001
* 查询所有品牌列表
*
* @return
*/
@RequestMapping("/findAll")
public List<TbBrand> findAll() {
return brandService.findAll();
}
//分页查询
@RequestMapping("/findPage")
public PageResult findPage(Integer pageNum, Integer pageSize) {
return brandService.findPage(pageNum, pageSize);
}
}
-
- BrandServiceImpl
@Service
@Transactional
public class BrandServiceImpl implements BrandService{
@Autowired
private TbBrandMapper brandMapper;
@Override
public List<TbBrand> findAll() {
return brandMapper.selectByExample(null);
}
@Override
public PageResult findPage(Integer pageNum, Integer pageSize) {
//基于 pageHelper 实现分页查询 设置分页查询 (pageNum-1)*pageSize
PageHelper.startPage(pageNum,pageSize);
com.github.pagehelper.Page<TbBrand> page = (com.github.pagehelper.Page<TbBrand>) brandMapper.selectByExample(null);
return new PageResult(page.getTotal(),page.getResult());
}
}
2.4 品牌列表的条件查询
- 后台代码
-
- BrandController
/**
* 003
* 按条件分页查询
*/
@RequestMapping("/search")
public PageResult seach(@RequestBody TbBrand brand, Integer pageNum, Integer pageSize) {
return brandService.search(brand,pageNum,pageSize);
}
-
- BrandServiceImpl
@Override
public PageResult search(TbBrand brand, Integer pageNum, Integer pageSize) {
//分页条件查询
//设置分页条件
PageHelper.startPage(pageNum,pageSize);
//设置查询条件 规格名称模糊查询
TbBrandExample example = new TbBrandExample();
if(brand!=null){
//获取品牌名称查询条件
String brandName = brand.getName();
//构建封装查询条件对象
TbBrandExample.Criteria criteria = example.createCriteria();
if(brandName!=null && !"".equals(brandName)){
//说明输入了查询条件
criteria.andNameLike("%"+brandName+"%");
}
//获取首字母,等值查询
String firstChar = brand.getFirstChar();
if(firstChar!=null && !"".equals(firstChar)){
//说明输入了查询条件
criteria.andFirstCharEqualTo(firstChar);
}
}
com.github.pagehelper.Page<TbBrand> page = (com.github.pagehelper.Page<TbBrand>) brandMapper.selectByExample(example);
return new PageResult(page.getTotal(),page.getResult());
}
前台页面展示
- 引入资源文件
<!--引入angularjs资源文件-->
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<!--引入分页插件资源-->
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
- 查询列表
//定义模块 参数一:模块名称 参数二:依赖的其他模块,注意:如果没有依赖其他模块,也需要指定空数组
var app =angular.module("pinyougou",["pagination"]);
//定义控制器 基于模块定义控制器
//参数一:控制器名称 参数二:控制器要做的事情
//$scope 理解为全局的作用域对象 作用:用于js与html数据交换的桥梁
app.controller("brandController",function ($scope,$http) {
//定义对象数组
// json格式数组:[] json格式对象:{}
//查询所有品牌列表
$scope.findAll=function () {
//alert(123)
//success 请求成功后的回调函数
//http://localhost:8081/brand/findAll.do
$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.findPage=function (pageNum,pageSize) {
$http.get("../brand/findPage.do?pageNum="+pageNum+"&pageSize="+pageSize).success(function (response) {
//赋值满足条件的总记录数
$scope.paginationConf.totalItems=response.total;
//当前页结果集
$scope.list=response.rows;
})
}
}
- 引入范围
- 循环遍历
<tr ng-repeat="pojo in list">
<td><input type="checkbox" ng-checked="isSelected(pojo.id)"></td>
<td>{{pojo.id}}</td>
<td>{{pojo.name}}</td>
<td>{{pojo.firstChar}}</td>
</tr>