angularjs .then() doesn't work (then is not a function)

Question

I have a little problem developing a simple GUI for a game idea using AngularJS (v1.3.15) and Angular-Route. Anyway, for the registration, i want to pre-check the availability for the username while being typed. I set up a $watch, call the factory service to get an $http.post answer, but in my controller, I get the error " fwMainService.checkUsernameAvailability(...).then is not a function ". I triple checked every spelling, the syntax and logic (btw I'm new to Angular). Every other factory function is working as it is supposed to.

Is it because checkUsernameAvailability() should return a promise, not a string?

Any ideas? Thanks in advance!

My Factory:

"use strict";

fwApp.factory('fwMainService', function ($http) {

var mFac = {};

mFac.checkUsernameAvailability = function (username) {
    if(username != '') {
        if(username.length >= 3) {
            $http.post('api/user/usernameInUse.php', {newUser: username})
            /* returns '1' if in use, '0' if free */
            .success(function (res) {
                if(res == '1') { // Username in use
                    return 'In Use!';
                } else if(res == '0') {
                    return 'Free!';
                }
            })
            .error(function (error) {
                console.log("username check error: ", error);
            });
        } else {
            return 'Username too short!';
        }
    } else {
        return ''; // if empty, do not check
    }
};

[...]

// Public API
return {
    checkUsernameAvailability: function (username) {
        return mFac.checkUsernameAvailability(username);
},
[...]

My Controller:

"use strict";    

fwApp.controller('IndexCtrl', 
         ['$scope', '$http', '$timeout', '$location', 'fwMainService', 
function ( $scope,   $http,   $timeout,   $location,   fwMainService) {

/* username input field model = newUser.username */
$scope.$watch("newUser.username", function (newValue, oldValue) {
    if(angular.equals(newValue, oldValue)) {
        return;
    }
    fwMainService.checkUsernameAvailability(newValue).then(function (res) {
        console.log("return", res.data);
        $scope.newUserMsg = res.data; // Setting infobox to "Free!" or "In Use!"
    }, function (error) {
        console.log("username check Error:", error);
    });

});

[...]

Edit #1: I added a jsfiddle: http://jsfiddle.net/Kyrm/71kz617g/6/ Maybe someone gets it working...

Answer 1

The jsFiddle needed some tweaking to work, but in general, what you need to do to make this work is:

• In the mFac.checkUsernameAvailability function you need to return the $http.post() result.
• You need to inject $q to the factory.
• Instead of returning res.data, just return res
• In all occurrences in which you return a string, return $q.when(str) (where str is the string). This will make sure all exist paths of your function return a promise (and then you can call then in all cases).