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

前端之家收集整理的这篇文章主要介绍了angular和webstorm 加载本地数据,实现“单机版”web应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

应用场景:

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

目的:

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

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

解决办法:

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

  1. /**
  2. * 查询条件服务
  3. * */
  4. angular.module('houseApp')
  5. .factory('secondHouseService',["ApiService","WAP_CONFIG","publicService",function(ApiService,WAP_CONFIG,publicService) {
  6. /*
  7. * 获取二手房详情
  8. * */
  9. function getSecondHomesDetail(__scope__,params){
  10. params = params || {};
  11. var myurl = WAP_CONFIG.path + "/Estate/homesDetail.html";
  12. var defaultParams = {
  13. id:1
  14. };
  15. defaultParams = $.extend(defaultParams,params)
  16. var promise = ApiService.post(myurl,defaultParams);
  17. promise.then(function(responseData){
  18. if(responseData.status == 1){
  19. __scope__.goodDetails = responseData.data;
  20. }
  21. });
  22. }
  23. //返回service的功能
  24. return {
  25. "getSecondHomesDetail":getSecondHomesDetail
  26. };
  27.  
  28. }]);
  1. /**
  2. * 定义ApiService服务
  3. * 功能:专门向服务器发送post 和 get请求
  4. * */
  5. angular.module('houseApp')
  6. .factory('ApiService',["$window","$http","$q","$log",function($window,$http,$q,$log) {
  7. var _api = WAP_CONFIG;
  8. var endpoint = _api.host + ':' + _api.port;
  9.  
  10. // public api
  11. return {
  12. //发送服务器的域名+端口,例如http://deve.sqhzg.cn:80
  13. endpoint: endpoint,//post请求,第一个参数是URL,第二个参数是向服务器发送的参数(JSON对象),
  14. post: function(url,data) {
  15. url = endpoint + url;
  16. var deferred = $q.defer();
  17. var tempPromise;
  18. //判断用户是否传递了参数,如果有参数需要传递参数
  19. if(data != null && data != undefined && data != ""){
  20. tempPromise = $http.post(url,data);
  21. }else{
  22. tempPromise = $http.post(url);
  23. }
  24. tempPromise.success(function(data,header,config,status) {
  25. deferred.resolve(data);
  26. }).error(function(msg,code) {
  27. deferred.reject(msg);
  28. $log.error(msg,code);
  29. });
  30. return deferred.promise;
  31. },//get请求,第一个参数是URL,第二个参数是向服务器发送的参数(JSON对象),
  32. get: function(url,data) {
  33. url = endpoint + url;
  34. var deferred = $q.defer();
  35. var tempPromise;
  36. //判断用户是否传递了参数,如果有参数需要传递参数
  37. if(data != null && data != undefined && data != ""){
  38. tempPromise = $http.get(url,data);
  39. }else{
  40. tempPromise = $http.get(url);
  41. }
  42. tempPromise.success(function(data,code);
  43. });
  44. return deferred.promise;
  45. }
  46. };
  47.  
  48. }]);
  1. /**
  2. * 定义常量WAP_CONFIG;WAP为当前子模块功能
  3. * */
  4. angular.module('houseApp')
  5. .constant('WAP_CONFIG',{
  6. host: 'http://localhost',//host: 'http://deve.sqhzg.cn',port: '63342',//port: 80,//path: '/index.PHP/Wap',//house为工程名,data为存放数据的目录
  7. path: '/house/data',mainPage: '/house/index.html'
  8. });

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

备注:

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

猜你在找的Angularjs相关文章