品優購 第三天

規格及模板管理

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