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 我已将json文件放在js目录下。

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

数据以未定义的形式返回。我在这里失踪了什么？

更新代码

我正按照@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

您的authenticationService.authenticate方法不会返回任何内容。

具体而言，服务名称为authService，您正在呼叫authenticationService.authenticate。

Answer 2

首先要做的事：您的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）。

例如，您可以向authenticate函数添加其他参数，这将使该函数能够回调原始调用者。

 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语法而不是$ scope。为了证明这种机制有效，我创建了一个plunker供您调查。

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

2 个答案: