AngularJS
angularjs介绍
angularjs是谷歌的一款前端框架
作用：前端mvc三层体系架构,，可以在前端大量写业务代码，分层开发。低耦合，方便扩展。
前端MVC：
-
Model:数据,其实就是angular变量($scope.XX);
$scope是angularjs的内置对象, $scope中有请求的数据有响应的数据, 还有方法也都放进去. 它的作用域范围是当前页面 -
View: 数据的呈现,Html+Directive(指令);
view=html页面 + 指令(也就是页面上的事件) -
Controller:操作数据,就是function,数据的增删改查;
angularjs表达式
- 如果需要用angularjs必须在页面引入核心包
<script src="angular.min.js"></script> - 如果使用angularjs必须在页面body标签上写上
ng-app，表示使用angularjs应用 - 表达式, 页面如果需要展示数据需要用两个大括号
{{表达式或者变量}}
例子
<html>
<head>
<meta charset="utf-8" >
<title>入门小Demo-1(表达式)</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>
结果
angularjs双向绑定
ng-model指令是给input框起名, 后台如果接收表单数据, 就可以根据ng-model中的属性名获取值, 页面也可以根据ng-model来获取这个input框对象, ng-model中的值是放入当前页面的$scope中保存（相当于id和name属性二合一）- $scope是angularjs的内置对象, $scope中有请求的数据有响应的数据, 还有方法也都放进去. 它的作用域范围是当前页面
例子
<html>
<head>
<title>入门小Demo-1 (双向绑定)</title>
<meta charset="utf-8" >
<script src="angular.min.js"></script>
</head>
<body ng-app>
请输入你的姓名：<input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>
在对话框中输入值，下面也会跟着变化
angularjs初始化指令
ng-init指令: angularjs中只要页面一加载首先执行ng-init中的操作
例子：
<html>
<head>
<meta charset="utf-8" >
<title>入门小Demo-3 (初始化指令)</title>
<script src="angular.min.js"></script>
</head>
<body ng-app ng-init="myname='陈大海'">
请输入你的姓名：<input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>
页面一加载，输入框中就会出现陈大海
angularjs控制器
var app=angular.module('myApp',[]);定义了一个叫myApp的模块, 定义后在body标签上声明使用的模块名称app.controller('myController',function($scope)在模块中声明控制器, 定以后需要在body标签上声明使用的控制器
例子
<html>
<head>
<meta charset="utf-8" >
<title>入门小Demo-3 (控制器)</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
//定义控制器
app.controller('myController',function($scope){
$scope.add=function(){
return parseInt($scope.x)+parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
x:<input ng-model="x" >
y:<input ng-model="y" >
运算结果：{{add()}}
</body>
</html>
可以进行加法运算
angularjs事件指令
- ng-click鼠标单击指令: 就是鼠标单击事件
例子
<html>
<head>
<meta charset="utf-8" >
<title>入门小Demo-5 (事件指令)</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
//定义控制器
app.controller('myController',function($scope){
$scope.add=function(){
$scope.z= parseInt($scope.x)+parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
x:<input ng-model="x" >
y:<input ng-model="y" >
<button ng-click="add()">运算</button>
结果：{{z}}
</body>
</html>
点击按钮，进行加法运算
angularjs循环数组
<tr ng-repeat="qqq in list">循环遍历:ng-repeat是循环指令, 里面in关键字后面是需要遍历的集合变量,in前面是我们自己起名的一个临时变量, 每一次循环都会将循环出来的数据赋值给我们的临时变量, 在循环下就可以使用两个大括号将循环出来的值展示到页面上.
一、 angularjs循环数组
<html>
<head>
<meta charset="utf-8" >
<title>入门小Demo-6 (循环数据)</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
//定义控制器
app.controller('myController',function($scope){
$scope.list= [100,192,203,434 ];//定义数组
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="aaa in list">
<td>{{aaa}}</td>
</tr>
</table>
</body>
</html>
二、angularjs循环对象数组
<html>
<head>
<meta charset="utf-8" >
<title>入门小Demo-7 (循环对象数组)</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
//定义控制器
app.controller('myController',function($scope){
$scope.list= [
{name:'张三',shuxue:100,yuwen:93},
{name:'李四',shuxue:88,yuwen:87},
{name:'王五',shuxue:77,yuwen:56}
];//定义数组
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>
三、向数组中添加或删除元素
- 创建数组
$scope.selectIds=[];//选中的ID集合
- 添加元素
push
$scope.selectIds.push( id);
- 删除元素
splice
var idx = $scope.selectIds.indexOf(id);
$scope.selectIds.splice(idx, 1);//删除
angularjs内置服务
$http是angularjs的内置对象, 主要做发送http请求并且是ajax请求, $http.get是发送get请求, $http.post是发送post请求.$event是angularjs中的内置对象, 作用是从$event当中可以获取当前操作的事件是什么.例如如果是复选框那么可以中里面知道是勾选还是取消勾选
<html>
<head>
<meta charset="utf-8" >
<title>入门小Demo-8 (内置服务)</title>
<meta charset="utf-8" />
<script src="angular.min.js"></script>
<script>
var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
//定义控制器
app.controller('myController',function($scope,$http){
$scope.findAll=function(){
$http.get('data.json').success(
function(response){
$scope.list=response;
}
);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>
angularjs分页
一、引入分页插件
<!-- 分页组件开始 -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- 分页组件结束 -->
二、构建app模块时引入pagination模块
var app=angular.module('pinyougou',['pagination']);//定义品优购模块
三、放置分页组件
<!-- 分页 -->
<tm-pagination conf="paginationConf"></tm-pagination>
四、在brandController中添加分页的js代码
//重新加载列表 数据
$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;//更新总记录数
}
);
}
五、编写后端代码，获取总条数和所有的brand数据
