博客围绕AngularJS前端框架展开，介绍其MVC（MVVM）、模块化、双向绑定、依赖注入四大核心特征及快速入门知识。还阐述了使用该框架实现品牌管理的步骤，包括拷贝资源、引入文件等，以及品牌分页的实现，涵盖前端HTML、JS代码和后端代码。
1 AngularJS前端框架
AngularJS是一款前端JS框架
AngularJS有四大核心特征：MVC（MVVM）、模块化、双向绑定、依赖注入
1.1 AngularJS快速入门
<1> AngularJS-表达是符号
<2> AngularJS-双向绑定
<3> AngularJS-控制器
<4> AngularJS-模块化开发
<5 > AngularJS-页面初始化指令
<6> AngularJS-事件指令
<7> AngularJS-循环数组指令
页面效果如下:
<8> AngularJS-循环对象数组指令
<%--
Created by IntelliJ IDEA.
User: at_10
Date: 2019/7/11
Time: 15:46
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>angularjs-循环对象数组指令</title>
<script src="../../plugins/angularjs/angular.min.js"></script>
<script>
var myapp = angular.module('myApp',[]);
//参数1：字符串，控制器名称，必须和ng-controller的值一致
//参数2：function函数，是控制器的实现
myapp.controller('myController', function ($scope) {
$scope.users = [
{id:"001",name:'张三',telephone:'13838389438'},
{id:"002",name:'李四',telephone:'13838389438'}
];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" >
<table>
<thead>
<tr>
<th>序号</th>
<th>id</th>
<th>姓名</th>
<th>电话</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{$index + 1}}</td>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.telephone}}</td>
</tr>
</tbody>
</table>
</body>
</html>
<9> AngularJS-内置服务
<%--
Created by IntelliJ IDEA.
User: at_10
Date: 2019/7/11
Time: 15:46
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>angularjs-循环对象数组指令</title>
<script src="../../plugins/angularjs/angular.min.js"></script>
<script>
var myapp = angular.module('myApp',[]);
//参数1：字符串，控制器名称，必须和ng-controller的值一致
//参数2：function函数，是控制器的实现
myapp.controller('myController', function ($scope, $http) {
$http.get('./data.json').success(function (res) {
$scope.users = res;
})
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" >
<table>
<thead>
<tr>
<th>序号</th>
<th>id</th>
<th>姓名</th>
<th>电话</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{$index + 1}}</td>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.telephone}}</td>
</tr>
</tbody>
</table>
</body>
</html>
2 需求实现 : 品牌管理
<1> 拷贝资源
<2> 引入JS文件
<script src="../plugins/angularjs/angular.min.js"></script>
<3> 指定模块和控制器
<body class="hold-transition skin-red sidebar-mini" ng-app="pyg" ng-controller="brandController">
<4> 编写JS代码
var app=angular.module('pyg', []);//定义模块
app.controller('brandController' ,function($scope,$http){
//读取列表数据绑定到表单中
$scope.findAll=function(){
$http.get('../brand/findAll').success(
function(res){
$scope.brandList=res;
}
);
}
});
<5> 循环显示数据
<tbody>
<tr ng-repeat="brand in brandList">
<td><input type="checkbox" ></td>
<td>{{brand.id}}</td>
<td>{{brand.name}}</td>
<td>{{brand.firstChar}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="editBrand(brand.id)" >修改</button>
</td>
</tr>
</tbody>
<6> 初始化调用
3 需求实现: 品牌分页
<1> html代码
在 brand.html 引入分页组件
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
构建 app模块时引入 pagination 模块
var app=angular.module('pyg',['pagination']);//定义品优购模块
页面的表格下放置分页组件
<tm-pagination conf="paginationConf"></tm-pagination>
<2> JS代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>品牌管理</title>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/angularjs/angular.min.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<script src="../plugins/angularjs/pagination.js"></script>
<script>
var app = angular.module('pyg',['pagination']);
app.controller('brandController', function ($scope, $http) {
$scope.findAll = function () {
//发送查询所有品牌的请求，接受返回值，展示到列表中
$http.get('../brand/findAll').success(function (res) {
$scope.brandList = res;
});
}
$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(page,size){
$http.get('../brand/findPage/'+page+"/"+size).success(
function(response){
$scope.list=response.rows;
$scope.paginationConf.totalItems=response.total;//更新总记录数
}
);
}
$scope.entity = {};
$scope.save = function () {
//1.发送保存请求
$http.post('../brand/save', $scope.entity).success(function (res) {
//2.接受结果，提示，如果成功，
alert(res.message);
if(res.success){
//刷新界面
$scope.reloadList();//重新加载
}
})
}
$scope.findOne = function (id) {
//发送请求，根据id查询品牌，回显到编辑窗口
$http.get('../brand/findOne/'+id).success(function (res) {
$scope.entity = res;
});
}
});
</script>
</head>
<body ng-app="pyg" ng-controller="brandController" class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->
<div class="box-header with-border">
<h3 class="box-title">品牌管理</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title="新建" ng-click="entity={}" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
<button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="" style="padding-right:0px">
<input id="selall" type="checkbox" class="icheckbox_square-blue">
</th>
<th class="sorting_asc">品牌ID</th>
<th class="sorting">品牌名称</th>
<th class="sorting">品牌首字母</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="brand in list">
<td><input type="checkbox" ></td>
<td>{{brand.id}}</td>
<td>{{brand.name}}</td>
<td>{{brand.firstChar}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" ng-click="findOne(brand.id)" data-target="#editModal" >修改</button>
</td>
</tr>
</tbody>
</table>
<!--数据列表/-->
<tm-pagination conf="paginationConf"/>
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">品牌编辑</h3>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped" width="800px">
<tr>
<td>品牌名称</td>
<td><input class="form-control" ng-model="entity.name" placeholder="品牌名称" > </td>
</tr>
<tr>
<td>首字母</td>
<td><input class="form-control" ng-model="entity.firstChar" placeholder="首字母"> </td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" ng-click="save()" aria-hidden="true">保存</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>
属性说明：
paginationConf：变量各属性的意义：
currentPage：当前页码
totalItems：总条数
itemsPerPage：每页条数
perPageOptions：页码选项
onChange：更改页面时触发事件
<3> 品牌分页 ;后端代码
实体类
服务层接口
服务层实现类
控制层
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
