黑马程序员技术交流社区
标题: 【郑州校区】Java之品优购课程讲义_day03（1） [打印本页]
作者: 谷粒姐姐 时间: 2018-8-1 15:18
标题: 【郑州校区】Java之品优购课程讲义_day03（1）
前端分层开发
1.1 需求分析我们在上次课学习了 angularJS 并完成的品牌管理的增删改查功能。但是我们看代码，
JS 和 html 都放在一起，并不利于我们后期的维护。我们可以在前端代码中也运用 MVC 的设计模式，将代码进行分离，提高程序的可维护性。
1.2 自定义服务
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。我们在上次课中使用了内置服务$http .其实我们也可以自己来定义服务，而服务会封装一些操作。我们在不同的控制器中可以调用同一个服务，这样服务的代码将会被重用。
我们现在就修改一下我们的品牌管理代码，使用自定义服务。
[AppleScript] 纯文本查看 复制代码
var app=angular.module('pinyougou', ['pagination']);//定义模块
//品牌服务层app.service('brandService',function($http){
//读取列表数据绑定到表单中
this.findAll=function(){
return $http.get('../brand/findAll.do');
}
//其它方法省略.......
});
//品牌控制层
app.controller('brandController' ,function($scope,brandService){
//读取列表数据绑定到表单中
$scope.findAll=function(){
brandService.findAll().success(
function(response){
$scope.list=response;
}
);
}
//其它方法省略........
});1.1 代码分离
我们刚才已经将与后端交互的部分放入自定义服务，目的是不同的控制层都可以重复调用服务层方法。所以我们还需要将代码分离出来，以便调用。
1.1.1 前端基础层
在 pinyougou-manager-web 工程 js 下创建 base.js
[AppleScript] 纯文本查看 复制代码
var app=angular.module('pinyougou',[]);创建 base_pagination.js
[AppleScript] 纯文本查看 复制代码
var app=angular.module('pinyougou',['pagination']);一个用于不需要分页功能的页面，一个用于需要分页功能的页面.
1.1.1 前端服务层
在 pinyougou-manager-web 工程 js 下创建 service 文件夹。创建 brandService.js
[AppleScript] 纯文本查看 复制代码
//品牌服务层app.service('brandService',function($http){
//读取列表数据绑定到表单中
this.findAll=function(){
return $http.get('../brand/findAll.do');
}
//其它方法省略........
});1.1.1 前端控制层
在 pinyougou-manager-web 的 js 文件夹下创建 brandController.js
[AppleScript] 纯文本查看 复制代码
//品牌控制层
app.controller('brandController' ,function($scope,brandService){
//读取列表数据绑定到表单中
$scope.findAll=function(){ brandService.findAll().success(
function(response){
$scope.list=response;
}
[AppleScript] 纯文本查看 复制代码
);
}
//其它方法省略........
});
1.1.1 修改页面
去掉 brand.html 原来的 JS 代码，引入刚才我们建立的 JS
[AppleScript] 纯文本查看 复制代码
<script type="text/javascript" src="../js/base_pagination.js"> </script>
<script type="text/javascript" src="../js/service/brandService.js"> </script>
<script type="text/javascript" src="../js/controller/brandController.js"> </script>
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |