angular和webstorm 加载本地数据,实现“单机版”web应用

航帆远洋 2016-07-19

应用场景:

开发ionic web app应用,需要后台传输数据,才能正常使用,如果没有数据,那么app 就是只有效果的空壳。

目的:

1、为了给客户演示产品,在无网络的情况下,使用单机版的app 是再好不过了

2、开发ionic中,如果数据全部是自己模拟,加快开发速度

解决办法:

将angular的ajax请求改为请求本地数据

/**
 * 查询条件服务
 * */
angular.module('houseApp')
	.factory('secondHouseService', ["ApiService", "WAP_CONFIG","publicService",function(ApiService, WAP_CONFIG,publicService) {
		
		/*
		 * 获取二手房详情
		 * */
		function getSecondHomesDetail(__scope__,params){
			params = params || {};
			var myurl = WAP_CONFIG.path + "/Estate/homesDetail.html";
			var defaultParams = {
				id:1
			};
			defaultParams = $.extend(defaultParams,params)
			var promise = ApiService.post(myurl,defaultParams);
			promise.then(function(responseData){
				if(responseData.status == 1){
					__scope__.goodDetails = responseData.data;
				}
			});
		}
		
		
		//返回service的功能
		return {
			"getSecondHomesDetail":getSecondHomesDetail
		};

	}]);
/**
 * 定义ApiService服务
 * 功能:专门向服务器发送post 和 get请求
 * */
angular.module('houseApp')
	.factory('ApiService', ["$window", "$http", "WAP_CONFIG", "$q", "$log",function($window, $http, WAP_CONFIG, $q, $log) {
		var _api = WAP_CONFIG;
		var endpoint = _api.host + ':' + _api.port;

		// public api
		return {
			//发送服务器的域名+端口,例如http://deve.sqhzg.cn:80
			endpoint: endpoint,

			//post请求,第一个参数是URL,第二个参数是向服务器发送的参数(JSON对象),
			post: function(url, data) {
				url = endpoint + url;
				var deferred = $q.defer();
				var tempPromise;
				//判断用户是否传递了参数,如果有参数需要传递参数
				if(data != null && data != undefined && data != ""){
					tempPromise = $http.post(url,data);
				}else{
					tempPromise = $http.post(url);
				}
				tempPromise.success(function(data,header,config,status) {
					deferred.resolve(data);
				}).error(function(msg, code) {
					deferred.reject(msg);
					$log.error(msg, code);
				});
				return deferred.promise;
			},

			//get请求,第一个参数是URL,第二个参数是向服务器发送的参数(JSON对象),
			get: function(url, data) {
				url = endpoint + url;
				var deferred = $q.defer();
				var tempPromise;
				//判断用户是否传递了参数,如果有参数需要传递参数
				if(data != null && data != undefined && data != ""){
					tempPromise = $http.get(url,data);
				}else{
					tempPromise = $http.get(url);
				}
				tempPromise.success(function(data,header,config,status) {
					deferred.resolve(data);
				}).error(function(msg, code) {
					deferred.reject(msg);
					$log.error(msg, code);
				});
				return deferred.promise;
			}
		};

	}]);
/**
 * 定义常量WAP_CONFIG;WAP为当前子模块功能
 * */
angular.module('houseApp')
	.constant('WAP_CONFIG', {
		host: 'http://localhost',
		//host: 'http://deve.sqhzg.cn',
		port: '63342',
		//port: 80,
		//path: '/index.php/Wap',
		//house为工程名,data为存放数据的目录
		path: '/house/data',
		mainPage: '/house/index.html'
	});

如果想调试本地,值需要修改上述配置文件即可

angular和webstorm 加载本地数据,实现“单机版”web应用

 备注:

data目录下面的html文件中的数据(JSON格式),一定要求json中的key用引号包裹,否则浏览器无法识别,ajax会认为发送请求不成功。

相关推荐