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 apireturn {//发送服务器的域名+端口，例如http://deve.sqhzg.cn:80endpoint: 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会认为发送请求不成功。