Login Service implementation in angularjs not working

Question

This is my controller which is calling the login service

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");
      }          
});

And this is the login service code which takes the User variable and checks for username & password

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";
  }
});

I have created a rest api using springs which upon passing json return back the username and password in json like this

Postman screenshot

Console shows me this error for angular Error in console

"not working" is a virtually meaningless problem statement that tells us next to nothing — charlietfl
– charlietfl, Commented Dec 29, 2016 at 7:09

Kanya Ravi · Accepted Answer · 2016-12-29 07:15:17Z

1

You need to enable CORS for your application for guidance see this link https://htet101.wordpress.com/2014/01/22/cors-with-angularjs-and-spring-rest/

answered Dec 29, 2016 at 7:15

Kanya Ravi

1011 gold badge1 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kristian · Accepted Answer · 2016-12-29 07:19:22Z

I prefer to use Factory to do what you're trying to do, which would be something like this:

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);
    }
  }

}]);

And then in your controller you can import MyService and then use it in this way:

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

This is a great way to handle it, because you're putting the .then in your controller and you are able to control the state of the UI during a loading state if you'd like, like this:

// 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();

Supradeep · Accepted Answer · 2016-12-29 07:58:53Z

The error in the console shows two issues with your code:

CORS is not enabled in your api. To fix this you need to enable CORS using Access-Control-Allow-Origin header to your rest api.
Unhandled rejection error, as the way you are handling errors with '.error()' method is deprecated. 'Promise.error()' method is deprecated according to this and this commit in Angular js github repo. Hence you need to change the way you are handling errors as shown below :
```
$http().then(successCallback, errorCallback);

function successCallback (res) {
    return res;
}

function errorCallback (err) {
    return err;
}
```

One more thing in your code which can be avoided is you have defined a new promise and resolving it using $q methods, which is not required. $http itself returns a promise by default, which you need not define again inside it to use it as a Promise. You can directly use $http.then().

Collectives™ on Stack Overflow

Login Service implementation in angularjs not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related