前端分层开发 1.1 需求分析 我们在上次课学习了 angularJS 并完成的品牌管理的增删改查功能。但是我们看代码， JS 和 html 都放在一起，并不利于我们后期的维护。我们可以在前端代码中也运用 MVC 的设计模式，将代码进行分离，提高程序的可维护性。 1.2 自定义服务 在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。我们在上次课中使用了内置服务$http .其实我们也可以自己来定义服务，而服务会封装一些操作。我们在不同的控制器中可以调用同一个服务，这样服务的代码将会被重用。 我们现在就修改一下我们的品牌管理代码，使用自定义服务。
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
var app=angular.module('pinyougou',[]); 创建 base_pagination.js
var app=angular.module('pinyougou',['pagination']); 一个用于不需要分页功能的页面，一个用于需要分页功能的页面. 1.1.1 前端服务层 在 pinyougou-manager-web 工程 js 下创建 service 文件夹。创建 brandService.js
//品牌服务层app.service('brandService',function($http){
//读取列表数据绑定到表单中
this.findAll=function(){
return $http.get('../brand/findAll.do');
}
//其它方法省略........
});
1.1.1 前端控制层 在 pinyougou-manager-web 的 js 文件夹下创建 brandController.js
//品牌控制层
app.controller('brandController' ,function($scope,brandService){
//读取列表数据绑定到表单中
$scope.findAll=function(){ brandService.findAll().success(
function(response){
$scope.list=response;
}
);
}
//其它方法省略........
});
1.1.1 修改页面 去掉 brand.html 原来的 JS 代码，引入刚才我们建立的 JS
<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>
