angular的学习

第一天从公司的后台，转到前端框架的使用。

1.service代码

Home.$inject = ['Ajax'];

function Home(Ajax) {

    return {
        getHotGoodsList: getHotGoodsList,
        getCategoryTree: getCategoryTree,
        getGoodsByCategory1List: getGoodsByCategory1List,
    };

    function getHotGoodsList(vm) {
        return Ajax.doPost(
            '/mall/goods/list_hot',
            {
                maxNumber: vm.maxNumber,
                deviceType: vm.deviceType,
            }
        );
    }

    function getCategoryTree() {
        return Ajax.doPost(
            '/system/category/get_tree',
            {}
        );
    }

    function getGoodsByCategory1List(deviceType, page, pageSize) {
        return Ajax.doPost(
            '/mall/goods/list_by_all_categories',
            {
                deviceType: deviceType,
                page: page,
                pageSize: pageSize,
            }
        );
    }
}

/**
 * 首页控制器
 */

HomeCtrl.$inject = ['Home', 'Cache', 'DEVICE_TYPE'];

function HomeCtrl(Home, Cache, DEVICE_TYPE) {
    var vm = this;

    vm.maxNumber = 4;
    vm.deviceType = DEVICE_TYPE.MOBILE;
    vm.page = 1;
    vm.pageSize = 4;

    vm.hotGoodsList = [];
    vm.categoryTree = [];
    vm.goodsByCategory1List = [];

    _init();

    function _init() {
        _initHotGoodsList();
        _initCategoryTree();
        _initGoodsByCategory1List();
    }

    function _initHotGoodsList() {
        vm.hotGoodsList = Cache.getHotGoodsList();
        if(vm.hotGoodsList === null) {
            Home
                .getHotGoodsList(vm)
                .success(function(response) {
                    if(response.status === 0) {
                        vm.hotGoodsList = response.data;
                        Cache.setHotGoodsList(vm.hotGoodsList);
                    }
                });
        }
    }

    function _initCategoryTree() {
        vm.categoryTree = Cache.getCategoryTree();
        if(vm.categoryTree === null) {
            Home
                .getCategoryTree()
                .success(function(response) {
                    if(response.status === 0) {
                        vm.categoryTree = response.data;
                        Cache.setCategoryTree(vm.categoryTree);
                    }
                });
        }
    }

    function _initGoodsByCategory1List() {
        vm.goodsByCategory1List = Cache.getGoodsByCategory1List();
        if(vm.goodsByCategory1List === null) {
            //console.log(Home.getGoodsByCategory1List(vm));
            Home
                .getGoodsByCategory1List(vm)
                .success(function(response) {
                    if(response.status === 0) {
                        vm.goodsByCategory1List = response.data;
                        Cache.setGoodsByCategory1List(vm.goodsByCategory1List);
                    }
                });
        }
    }
}

/**
 * 这是app.controller.js文件
 * 所有controller都加到这里
 * 相当于声明控制器
 */
angular
    .module('mobileMall')
    .controller('MainCtrl', MainCtrl)
    .controller('HomeCtrl', HomeCtrl)
    .controller('CategoryCtrl', CategoryCtrl)
    .controller('CartCtrl', CartCtrl);

MainCtrl.$inject = ['$rootScope', '$scope'];

function MainCtrl($rootScope, $scope) {
    var vm = this;
}

//这是app.module.js文件夹，这里把一些需要的东西注入进去，也可以声明全局量

angular
    .module('mobileMall', [
        'ui.router',
        'ngSanitize',
        'oc.lazyLoad',
        'ngAnimate'
    ])
    .constant('DEVICE_TYPE', {
        MOBILE: 2,
        PC: 1
    });

/**
 * 所有service都加到这里
 * 这是app.service.js文件，这里其实是一些全局或者共用的service
 */

angular
    .module('mobileMall')
    .factory('Goods', Goods)
    .factory('Ajax', Ajax)
    .factory('Cache', Cache)
    .factory('Validator', Validator)
    .factory('Home', Home)
    .factory('Category', Category)
    .factory('Cart', Cart);

Ajax.$inject = ['$http'];

function Ajax($http) {

    var prefix = '/ajax';

    return {
        doPost: doPost
    };

    function doPost(url, jsonParams) {
        return $http.post(
            prefix + url,
            _param(jsonParams),
            {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                }
            }
        );
    }

    function _param(jsonParams) {
        var str = [];
        for (var key in jsonParams) {
            str.push(encodeURIComponent(key) + '=' + encodeURIComponent(jsonParams[key]));
        }

        return str.join('&');
    }
}

function Validator() {

    /**
     * 判断手机号码是否合法
     *
     * @param  string  str [description]
     * @return boolean     [description]
     */
    function isValidMobile(str) {
        return (/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/).test(str);
    }
}

Cache.$inject = [];

function Cache() {
    var hotGoodsList = null;
    var categoryTree = null;
    var goodsByCategory1List = null;

    return {
        getHotGoodsList: function() {
            return hotGoodsList;
        },
        setHotGoodsList: function(list) {
            hotGoodsList = list;
        },
        getCategoryTree: function() {
            return categoryTree;
        },
        setCategoryTree: function(list) {
            categoryTree = list;
        },
        getGoodsByCategory1List: function() {
            return goodsByCategory1List;
        },
        setGoodsByCategory1List: function(list) {
            goodsByCategory1List = list;
        }

    }

}