CODEWITHSUNDEEP
javascriptangularjs
ChaseLouisPowers
ChaseLouisPowers

Reputation: 765

Functions separated by Commas in AngularJS

I'm going through AngularJS authentication using this article: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec#.y7nkgrxqo

In the article, they bring up:

.controller('LoginController', function ($scope, $rootScope, AUTH_EVENTS, AuthService) {
  $scope.credentials = {
    username: '',
    password: ''
  };
  $scope.login = function (credentials) {
    AuthService.login(credentials).then(function (user) {
      $rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
      $scope.setCurrentUser(user);
    }, function () {
      $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
    });
  };
})

The .then in $scope.login has two functions that are separated by a comma --- what does this mean?

Upvotes: 1

Views: 139

Answers (3)

Magus
Magus

Reputation: 2992

============Concept one, function as arguments =================

It's not an Angular feature, it's just plain javascript. Javascript will accept anything as an argument to a function, including other functions. This is a quick way of breaking it down:

function ryu(){
    console.log('hadouken!');
}
function ken(){
    console.log('shoryuken!');
}
function fight(x,y){
    x();
    y();
}

This

fight(ryu,ken);

is the same as:

fight(function(){
    console.log('hadouken!');
},function(){
    console.log('shoryuken!');
});

============Concept two, promises =================

The promise thing everyone is talking about in the other answers is just a plus. Promises are a fancy way of 'do something after something'. A quick and dirty way of doing your promise is:

Let's say before the fight happens, a guy has to announce it.

function announce(fight,a,b){
    console.log('3,2,1 fight!');
    //fight will happen after 3 seconds
    setTimeout(function(){
        fight(a,b)
    },3000);
}

//then you run it
annount(fight,ryu,ken);

Upvotes: 0

Ludovic C
Ludovic C

Reputation: 3065

If you read carefully, you can see that $scope.login has only one function. But the Promise.then callback for login has 2, one for success, one for failure. The first will be called if the login succeeded, second if the login failed.

AuthService
    .login(credentials)
    .then(
        // 1st callback (success)
        function (user) {
            // Login succeeded
            $rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
            $scope.setCurrentUser(user);
        }, 
        // 2nd callback (failure)
        function () {
            // Login failed
            $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
        }
    );

Upvotes: 0

adeneo
adeneo

Reputation: 318302

$scope.login only has one function, then() has two functions, as in

promise.then(function(value) {
     // fulfillment
  }, function(reason) {
     // rejection
});

The first function is called when the promise is fulfilled. This function has one argument, the fulfillment value.

The second function is called when the promise is rejected. This function has one argument, the rejection reason.

Promise.then()

Upvotes: 2

Related Questions