AngularJS分层开发

为了AngularJS的代码利于维护和复用，利用MVC的模式将代码分离，提高程序的灵活性及可维护性。

 

1，前端基础层

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

 

2，前端服务层

//服务层
app.service('demoService',function($http){
    //读取列表数据绑定到表单中
    this.findAll=function(){
        return $http.get('../demo/findAll.do');        
    }
    //其它方法........            
});

 

3，父控制器

//基本控制层 
app.controller('baseController' ,function($scope){    
    //重新加载列表 数据
    $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});//继承    
    //读取列表数据绑定到表单中  
    $scope.findAll=function(){
        demoService.findAll().success(
            function(response){
                $scope.list=response;
            }            
        );
    }    
    //其它方法........ 
});    

 

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