品优购 第三天

规格及模板管理

1.前端分层开发

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.3代码分离

我们刚才已经将与后端交互的部分放入自定义服务，目的是不同的控制层都可以重复调用服务层方法。所以我们还需要将代码分离出来，以便调用。

1.3.1 前端基础层

在pinyougou-manager-web工程js下创建base.js

var app=angular.module('pinyougou',[]);

创建base_pagination.js

var app=angular.module('pinyougou',['pagination']);

一个用于不需要分页功能的页面，一个用于需要分页功能的页面.

1.3.2 前端服务层

在pinyougou-manager-web工程js下创建service文件夹。创建brandService.js

//品牌服务层

app.service('brandService',function($http){

//读取列表数据绑定到表单中

this.findAll=function(){

return $http.get('../brand/findAll.do');

}

//其它方法省略........

});

1.3.3 前端控制层

在pinyougou-manager-web的js文件夹下创建brandController.js

//品牌控制层

app.controller('brandController' ,function($scope,brandService){

//读取列表数据绑定到表单中

$scope.findAll=function(){

brandService.findAll().success(

function(response){

$scope.list=response;

}

);

}

//其它方法省略........

});

1.3.4 修改页面

去掉brand.html原来的JS代码，引入刚才我们建立的JS