$ http.get（URL）没有返回数据

Question

我建立一个服务的角度和控制注射服务。我试图从json文件中获取数据，并使用$ http。但是数据没有得到返回，我得到未定义。

我被@Phil

Service.js

;(function(app) { 
    app.factory('authService', ['$log', '$http','$location', function($log, $http,$location) { 

     var url = 'js/user.json'; 
     var authService= {}; 
     var userExist=null; 

     authService.authenticate = function(userid) { 
      var userobj = $http.get(url).success(function (data) { 
       userExist = data 
       console.log(data); 
       return userExist; 
       $log.info("Loaded users"); 
      }) 
      .error(function (error) { 
       $log.info(error); 
       $log.info("No user exists"); 
       return error; 
      }) 
      return userobj; 
     } 
     return authService; 


    }]); 
})(angular.module('userApp')); 

Controller.js更新我的代码按建议

;(function(app) { 
app.controller('Controller', ['$scope', '$log','$location','authService', function($scope,$log,$location,authService) { 

    $scope.data={}; 
    $scope.getUsers = function() 
    { 
     userid = "123"; 
     $scope.data = authService.authenticate(userid); 
     console.log($scope.data); 
     return $scope.data ; 
    } 

}]) 
}(angular.module('userApp'))); 

的index.html

<div class="main" ng-controller="Controller"> 

     <input type="button" name="btngetusers" ng-click="getUsers()"></input> 

    </div> 

    <script src ="js/app.js"> </script> 
    <script src ="js/controller/Controller.js"> </script> 
    <script src ="js/services/Service.js"> </script> 

user.json 我已经把js的目录下的JSON文件。

[ 
    { 
     "UserId": "1", 
     "FName": "Hice", 
     "LastName": "Harry" 
    }, 
    { 
     "UserId": "2", 
     "FName": "Andrew", 
     "LastName": "Ads" 
    } 
] 

数据以undefined形式返回。我在这里错过了什么？

更新的代码

我被@skubsi

更新我的代码按建议Service.js

;(function(app) { 
    app.factory('authService', ['$log', '$http','$location', function($log, $http,$location) { 

     var url = 'js/user.json'; 
     var authService = {}; 
     var userExist=null; 

     authService.authenticate = function(userid,success,error) { 
      $http.get(url).success(function(data){ 
       success(data); 
      }) 
      .error(error); 

     }; 
     return authService; 


    }]); 
})(angular.module('userApp')); 

Controller.js

;(function(app) { 
app.controller('MainController', ['$scope', '$log','$location','authService', function($scope,$log,$location,authService) { 
    var self = this; 
    this.data = null; 

    this.getUsers = function(){ 

     function success(response){ 
      self.data = response; 
     } 

     function error(){ 
      console.log("error"); 
     } 
     authService.authenticate(1,success,error); 
    } 


}]) 
}(angular.module('userApp'))); 

的index.html

<div class="main" ng-controller="MainController as main"> 
      {{main.data}} 
      <input type="button" name="btngetusers" value ="Get User" ng-click="main.getUsers()"></input> 

     </div> 

    <script src ="js/app.js"> </script> 
    <script src ="js/controller/MainController.js"> </script> 
    <script src ="js/services/authenticate.js"> </script> 

Answer 1

第一件事：你的JSON是无效的，你可以通过输入你在JSONLint提供的JSON验证这一点你自己。

Parse error on line 2: 
[ {  UserId: 123,  
--------------^ 
Expecting 'STRING', '}' 

其次，你传递一个未知的服务为您的控制器：

authenService 

那么你应该意识到承诺是代码，将异步运行，这意味着：

userid = "123"; 
    $scope.data = authService.authenticate(userid); 
    console.log($scope.data); 
    return $scope.data ; 

将无法​​运行同步。 console.log($scope.data);将在您的验证方法完成之前执行很久。所以你需要找到一种方法让你的控制器相应地处理，同时保持顾虑分离。 （而不是陷入deferred-anti-pattern）。

例如，您可以将其他参数添加到您的身份验证功能，这将使该功能回调原始调用者。

authService.authenticate = function(userid, success, error) { //success and error are functions 
    $http.get(url).success(function(data) { 
     //separation of concerns: 
     //execute logic.. set flags, filter w/e belongs to your authentication process. 
     success(data); 
     }) 
     .error(error); //no processing required 
    }; 

所以，在你的控制器所有剩下要做的就是调用authService并向其提供一种方法来设置你的数据：

this.getUsers = function() { 
    //This will enable to set the response to your controllers data model. 
    function success(response) { 
     self.data = response; 
     window.alert(response); 
    } 

    function error() { 
     window.alert('shite happened'); 
    } 

    authService.authenticate(1, success, error); 
    }; 

请注意，我已经使用了controllerAs语法而不是$的范围。为了证明这一机制有效，我为您创建了一个plunker调查。

Answer 2

你authenticationService.authenticate方法不返回任何东西。

具体来说，服务名称为authService和你打电话authenticationService.authenticate。第一