角度服务和http请求答案

【问题标题】：angular service and http request角度服务和http请求
【发布时间】：2013-12-09 01:45:16
【问题描述】：

创建服务

myApp.factory('serviceHttp', ['$http', function(http) {
  http.get($scope.url).then(function(result){
    serviceVariable = result;
  }
  return serviceVariable;
}

控制器

function appController($scope, serviceHttp){
  $scope.varX = serviceHttp;
  if(serviceHttp){
    // decision X;
  } else {
    // decision Y;
  }
}

查看：

input(ng-if='varX') serviceHttp Exist
input(ng-if='!varX') serviceHttp noExist

上面的代码总是显示varX 不存在，因为应用程序在http 服务调用期间安装。我想使用 Angular service 从服务器注入变量，以便在启动应用程序时做出决定。

【问题讨论】：

var 是 javascript 中的无效变量名。
那不是问题。已编辑。

标签： http angularjs angularjs-service

【解决方案1】：

如果我正确理解你，你应该这样做：

 var app = angular.module('YourModule', []);
    app.factory("serviceHttp", function($http) {
        var serviceHttp={};

        serviceHttp.yourGetRequest = function(yourUrl) {

           return $http.get(yourUrl);
       };

        return serviceHttp;
    });

例如，控制器：

        var Controller = function($scope,serviceHttp) {
        $scope.varX='';
        $scope.loading = true;
      var returnArr = serviceHttp.yourGetRequest($scope.url).success(function(dataFromServer) {
$scope.loading = false;
$scope.varX = dataFromServer;
})

};

在视图中你可以使用 ng-show，像这样：

<div ng-show="loading" class="loading"><img src="../styles/ajax-loader-large.gif"></div>

当您的应用程序开始加载时，$scope.loading = true 并显示此 div，当您从服务器获得响应时，$scope.loading 变为 false 且 div 不显示。

【讨论】：

【解决方案2】：

尝试用这种返回promise的方式重写工厂：

myApp.factory('serviceHttp', ['$http', function(http) {

   var factory = {
       query: function () {
          var data = http.get($scope.url).then(function(result){
              return result;
           },
          function (result) {
            alert("Error: No data returned");
         });
           return data;
       } 
   }
   return factory;  
}]);

来自控制器：

serviceHttp.query().then(function (result) {
    $scope.varX =  = result;                            
}

这里是演示Fiddle

在演示中我们使用了其他 URL 源

【讨论】：