第一天从公司的后台,转到前端框架的使用。
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; } } }