Html angularjs中的登录服务实现不工作

这是我的控制器，正在调用登录服务

mod.controller("loginCtrl",function($scope,loginService,$http)
{
      $scope.Userlogin = function()
      {
          var User = {
              userid :$scope.uname,
              pass:$scope.pass
          };

          var res = UserloginService(User);

          console.log(res);
          alert("login_succ");
      }          
});

这是登录服务代码，它接受用户变量并检查用户名和密码

mod.service("loginService",function($http,$q) {
    UserloginService = function(User) {

    var deffered = $q.defer();
    $http({
        method:'POST',
        url:'http://localhost:8080/WebApplication4_1/login.htm',
        data:User
    }).then(function(data) {
        deffered.resolve(data);
    }).error(function(status) {
        deffered.reject({
            status:status
        });
    });
    return deffered.promise;

    // var response = $http({
    //
    //   method:"post",
    //   url:"http://localhost:8080/WebApplication4_1/login.htm",
    //   data:JSON.stringify(User),
    //   dataType:"json"
    // });

    //  return "Name";
  }
});

我已经使用springs创建了一个RESTAPI，它在传递json时返回json中的用户名和密码，如下所示

Console为我显示了此错误

---

您需要为您的应用程序启用CORS以获取指导，请参阅此链接

---

我更喜欢使用Factory来完成您想要做的事情，这类似于：

MyApp.factory('MyService', ["$http", function($http) {

  var urlBase = "http://localhost:3000";

  return {
    getRecent: function(numberOfItems) {
      return $http.get(urlBase+"/things/recent?limit="+numberOfItems);
    },
    getSomethingElse: function(url) {
      return $http.get(urlBase+"/other/things")
    },
    search: function (searchTerms) {
      return $http.get(urlBase+"/search?q="+searchTerms);
    }
  }

}]);

// initialize the loading var, set to false
$scope.loading = false;

// create a reuseable update function, and inside use a promise for the ajax call,
// which is running inside the `Factory`
$scope.updateList = function() {
  $scope.loading = true;
  MyService.getRecent(10).then(function(res) {
    $scope.loading = false;
    $scope.things = res.data;
  });
};
$scope.updateList();

然后在控制器中，您可以导入

MyService

，然后以以下方式使用它：

MyService.getRecent(10).then(function(res) {
  $scope.things = res.data;
});

这是一个很好的处理方法，因为您将

。然后
放在控制器中，如果愿意，您可以在加载状态期间控制UI的状态，如下所示：

MyApp.factory('MyService', ["$http", function($http) {

  var urlBase = "http://localhost:3000";

  return {
    getRecent: function(numberOfItems) {
      return $http.get(urlBase+"/things/recent?limit="+numberOfItems);
    },
    getSomethingElse: function(url) {
      return $http.get(urlBase+"/other/things")
    },
    search: function (searchTerms) {
      return $http.get(urlBase+"/search?q="+searchTerms);
    }
  }

}]);

// initialize the loading var, set to false
$scope.loading = false;

// create a reuseable update function, and inside use a promise for the ajax call,
// which is running inside the `Factory`
$scope.updateList = function() {
  $scope.loading = true;
  MyService.getRecent(10).then(function(res) {
    $scope.loading = false;
    $scope.things = res.data;
  });
};
$scope.updateList();

控制台中的错误显示代码存在两个问题：

未在api中启用。要解决此问题，您需要使用rest api的
访问控制允许源代码
头启用CORS

未处理的拒绝
错误，因为您使用“.error（）”方法处理错误的方式已被弃用。
在Angular js github repo中，根据和，不推荐使用“Promise.error（）”方法。
因此，您需要更改处理错误的方式，如下所示：

$http().then(successCallback, errorCallback);

function successCallback (res) {
    return res;
}

function errorCallback (err) {
    return err;
}


代码中可以避免的另一件事是，您定义了一个新的承诺，并使用
$q
方法解决了它，这不是必需的<默认情况下，code>$http
本身返回一个
promise
，您无需在其中再次定义它即可将其用作promise。您可以直接使用
$http.then（）
“不工作”是一个几乎毫无意义的问题陈述，它告诉我们您是否提供了相关的标题？请在rest API中启用CORS。。将尝试为rest启用cors