為了AngularJS的代碼利于維護(hù)和復(fù)用，利用MVC的模式將代碼分離，提高程序的靈活性及可維護(hù)性。

?

1，前端基礎(chǔ)層

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

?

2，前端服務(wù)層

//服務(wù)層 app.service('demoService',function($http){//讀取列表數(shù)據(jù)綁定到表單中this.findAll=function(){return $http.get('../demo/findAll.do'); }//其它方法........ });

?

3，父控制器

//基本控制層 app.controller('baseController' ,function($scope){ //重新加載列表 數(shù)據(jù)$scope.reloadList=function(){$scope.search( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage); }//分頁控件配置 $scope.paginationConf = {currentPage: 1,totalItems: 10,itemsPerPage: 10,perPageOptions: [10, 20, 30, 40, 50],onChange: function(){$scope.reloadList();//重新加載 }}; //...... });

?

4，前端控制層(繼承父控制器(實際是與baseController共享$scope)，可依賴注入demoService等service層)

//品牌控制層 app.controller('demoController' ,function($scope,$controller,demoService){ $controller('baseController',{$scope:$scope});//繼承 //讀取列表數(shù)據(jù)綁定到表單中 $scope.findAll=function(){demoService.findAll().success(function(response){$scope.list=response;} );} //其它方法........ });

?

5，頁面需要引用上面的所有js文件，并且需要注意順序。

?

轉(zhuǎn)載于:https://www.cnblogs.com/blazeZzz/p/9477964.html

總結(jié)

以上是生活随笔為你收集整理的AngularJS分层开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。