angular代码模块化

angular.module('eleme', ['ui.router'])

//配置路由
.config(function($stateProvider) {
    $stateProvider
        .state('index', {
            url: "",
            templateUrl: "/html/default.html"
        })
        .state('index.default', {
            url: "/default",
            templateUrl: "/html/default.html",
            controller: 'default'
        })
        .state('index.evaluate', {
            url: "/evaluate",
            templateUrl: "/html/evaluate.html",
            controller: 'evaluate'
        })
        .state('index.productDetails', {
            url: "/productDetails",
            templateUrl: "/html/productDetails.html",
            controller: 'productDetails'
        });
})

//指令
.directive('meal', function() {
    return {
        restrict: "E",
        scope: {
            myId: '@',
            myMeal: '=',
            newMeal: '=',
            addCount: '&',
            reduceCount: '&',
            addShopcar: '&'
        },
        controller: ['$scope', function($scope) {}],
        templateUrl: "/template/meal.html"
    }
})

//控制器
.controller('Aaa', ['$scope', '$location', '$http', function($scope, $location, $http) {
    $http.get('/js/json.js').success(function(data, state, headers, config) {

        $scope.isMockBg = false;
        $scope.mockBgOver = function() {
            $scope.isMockBg = true;
        }
        $scope.mockBgLeave = function() {
                $scope.isMockBg = false;
            }
            //切换导航
        $scope.tab = 'index';
        $scope.changeIndexColor = function() {
            $scope.tab = 'index';
        }
        $scope.changeRateColor = function() {
            $scope.tab = 'rate';
        }
        $scope.changeInfoColor = function() {
            $scope.tab = 'info';
        }

        //默认排序
        $scope.hotSaleMeal = data.hotSale.details;
        $scope.dupMeal = data.dupMeal.details;
        $scope.mainMeal = data.mainMeal.details;
        $scope.hotSaleTitle = data.hotSale.title;
        $scope.dupMealTitle = data.dupMeal.title;
        $scope.mainMealTitle = data.mainMeal.title;

        //排序方式列表
        $scope.sort = data.sort;

        //初始化为默认排序
        $scope.selectedItem = $scope.sort[0];

        //套餐种类
        $scope.category = data.category;

        //初始化套餐分类
        $scope.locationDataItem = $scope.category[0];

        //组合排序的数据
        $scope.totalMeal = (($scope.hotSaleMeal).concat($scope.dupMeal)).concat($scope.mainMeal);
    });
}])

.controller('default', ['$scope', '$http', '$timeout', '$location', '$anchorScroll', '$filter', function($scope, $http, $timeout, $location, $anchorScroll, $filter) {

    //定位餐品位置
    $scope.getLocation = function(locationData) {
        var id = locationData.cateid;
        $scope.isDefault = 'default';
        $timeout(function() {
            document.getElementById(id).scrollIntoView();
        }, 10);
    };

    //更改餐品分类背景
    $scope.getBackground = function(locationData) {
        $scope.locationDataItem = locationData;
    };
    $scope.outBackground = function(locationData) {
        $scope.locationDataItem = '';
    };

    //控制购物车为空
    $scope.shopData = true;
    //获取购物车数据
    $scope.newMeal = [];
    $scope.addItemData = function(data) {
        data.number++;
        $scope.newMeal.push({
            data
        });
        upDateData($scope.newMeal);
        $scope.shopData = false;
    };
    var upDateData = function(data) {
        $scope.newMeal = data;
    }

    //添加餐品数量
    $scope.addMealNumber = function(data) {
        data.number++;
    };

    //减少餐品数量
    $scope.reduceMealNumber = function(data) {
        var findIndex = function(id) {
            angular.forEach($scope.newMeal, function(item, key) {
                if (item.data.id === id) {
                    index = key;
                    return;
                };
            });
            return index;
        };
        data.number--;
        if (data.number == 0) {
            var index = findIndex(data.id);
            $scope.newMeal.splice(index, 1);
            if ($scope.newMeal.length == 0) {
                $scope.shopData = true;
            }
        }
    };

    //餐品共支付总额
    $scope.payMealTotalPrice = function() {
        var total = 0;
        for (var i in $scope.newMeal) {
            if ($scope.newMeal[i].data.number > 0) {
                total += $scope.newMeal[i].data.price * $scope.newMeal[i].data.number;
            }
        }
        return total;
    };

    //清空购物车数据
    $scope.emptyShopcarData = function() {
        for (var i in $scope.newMeal) {
            if ($scope.newMeal[i].data.number > 0) {
                $scope.newMeal[i].data.number = 0;
            }
        }
        $scope.newMeal.length = 0;
        $scope.shopData = true;
    };

    //选择排序方式
    $scope.isDefault = 'default';
    $scope.clickCount = 0;
    $scope.selectSort = function(item) {

        //控制高亮颜色
        $scope.selectedItem = item;

        //控制显示模板
        $scope.isDefault = item.sortMethod;

        //排序出的数据
        $scope.totalMeal = $filter('orderBy')($scope.totalMeal, item.sortMethod);

        //控制价格方向排序
        if (item.sortMethod == 'price') {
            $scope.clickCount++;
            $scope.priceChange = $scope.clickCount % 2; //控制价格排序两个标题的交替出现
            arguments.callee['select' + item.sortMethod] = !arguments.callee['select' + item.sortMethod];
            $scope.totalMeal = $filter('orderBy')($scope.totalMeal, item.sortMethod, arguments.callee['select' + item.sortMethod]);
        };

        //控制隐藏默认页的数据
        if (item.sortMethod == 'default' && $scope.searchCount == '0') {
            if ($scope.isDefault = 'instead') {
                $scope.isDefault = 'instead';
            };
        }
    };

    //搜索餐名
    var noChangeMealData = angular.copy($scope.totalMeal, '');
    $scope.searchMealName = function() {
        $scope.totalMeal = $filter('filter')(noChangeMealData, $scope.mealName);
        $scope.isDefault = 'instead';
        $scope.searchCount = 0; //防止默认排序时模块标题出现问题
        $scope.result = 'result'; //控制排序时各个排序方式的标题隐藏显示
    };

    //隐藏显示购物车餐品
    $scope.upDownMealData = true;
    $scope.upDownMeal = function() {
        $scope.upDownMealData = !$scope.upDownMealData;
    }

}])

.controller('evaluate', ['$scope', '$http', '$filter', function($scope, $http, $filter) {}])

.controller('productDetails', ['$scope', '$http', '$filter', function($scope, $http, $filter) {}])

如何把以上代码分成多个文件，实现代码模块化？

---

以下是我的思路，可参考，欢迎交流。
首先，配置方法可以抽取出来成一个全局方法，方便维护；
其次对于controller中的代码，梳理出视图层展示逻辑和数据交互逻辑，分别抽取成服务注入到controller中进行调用，比如$http其实就可以封装到一个公用服务里，使用promise进行返回处理，这样就是一个简单的优化。
理论上讲，controller中不应该包含过多的业务和数据逻辑，它应该只是负责对视图的展示进行控制，其他逻辑都可以抽取出来封装成服务模块进行依赖注入然后调用。
建议可以去看一下angular的官方文档，另外送上一篇对服务进行了详细分析的文章AngularJS 之 Factory vs Service vs Provider