|
【郑州校区】品优购电商系统开发第 3 章规格及模板管理 一
品优购电商系统开发
第 3 章
规格及模板管理
课程目标
目标 1：理解和运用 angularJS 的 service
目标 2：理解和运用控制器继承
目标 3：掌握代码生成器的使用
目标 4：实现规格管理
目标 5：实现模板管理
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.3 代码分离
我们刚才已经将与后端交互的部分放入自定义服务，目的是不同的控制层都可以重复调用服务层方法。所以我们还需要将代码分离出来，以便调用。
1.3.1 前端基础层
在 pinyougou-manager-web 工程 js 下创建 base.js
[AppleScript] 纯文本查看 复制代码 var app=angular.module('pinyougou',[]);
创建 base_pagination.js
[AppleScript] 纯文本查看 复制代码 var app=angular.module('pinyougou',['pagination']);
一个用于不需要分页功能的页面，一个用于需要分页功能的页面.
1.3.2 前端服务层
在 pinyougou-manager-web 工程 js 下创建 service 文件夹。创建 brandService.js
[AppleScript] 纯文本查看 复制代码 //品牌服务层
app.service('brandService',function($http){
//读取列表数据绑定到表单中
this.findAll=function(){
return $http.get('../brand/findAll.do');
}
//其它方法省略........
});
1.3.3 前端控制层
在 pinyougou-manager-web 的 js 文件夹下创建 brandController.js
[AppleScript] 纯文本查看 复制代码 //品牌控制层
app.controller('brandController' ,function($scope,brandService){
//读取列表数据绑定到表单中
$scope.findAll=function(){
brandService.findAll().success(
function(response){
$scope.list=response;
}
);
}
//其它方法省略........
});
1.3.4 修改页面
去掉 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>
| 
收藏
淘帖
踩
