angular和webstorm 加载本地数据,实现“单机版”web应用
应用场景:
开发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'
});如果想调试本地,值需要修改上述配置文件即可

备注:
data目录下面的html文件中的数据(JSON格式),一定要求json中的key用引号包裹,否则浏览器无法识别,ajax会认为发送请求不成功。
相关推荐
xxuncle 2020-06-05
liduote 2020-06-16
阿斌Elements 2020-06-11
ChinaGuanq 2020-06-05
wanghongsha 2020-03-26
csm0 2020-03-05
shyoushine 2020-02-25
electronvolt 2020-02-12
jsonwoo 2020-01-20
ZadarrienChina 2020-01-07
wwwxuewen 2020-01-04
dynsxyc 2020-01-03
liangjielaoshi 2019-12-27
bowean 2019-12-27
wwwxuewen 2019-12-25
liwusen 2019-12-16
颤抖吧腿子 2019-12-16