Can't pass query to $resource service

Question

Can't pass query to $resource service

I have a controller querying a PHP script (via a $resource service). The PHP returns JSON. The controller uses the input from ng-model called "userUsername". I can see that nothing is getting sent to the PHP file. I'm getting returned this in the console:

h {usernameTyped: null, $get: function, $save: function, $query: function, $remove: function…}

app.js

var userAppModule = angular.module("userApp", ["ngResource"]);
userAppModule.factory("User", function($resource) {
    return $resource("php/login-process.php/:username", {}, {
        query: {method: "GET"}
    });
});

controllers.js

function LoginCtrl($scope, $route, $routeParams, $location, User) {
    $scope.loginUser = function() {
        $scope.userQuery = User.query({username: $scope.userUsername}, function(res) {
            console.log(res);
        });
    }
}

I think I've probably got something wrong in the controller function.

angularjs

Answer 1

You're almost right: the problem is the callback. the first paramater, res in your case, is actually the resource object.

You don't need that callback in this case, as ngResource is designed to be able to work without callbacks in the common case:

function LoginCtrl($scope, $route, $routeParams, $location, User) {
    $scope.loginUser = function() {
        $scope.user = User.query({username: $scope.userUsername});

        // Just throwing a watch in here to see what happens
        // to $scope.user
        $scope.$watch('user', function(newValue, oldValue) {
            console.log("user:", newValue, oldValue);
        });
    }
}

You'll see one entry show up immediately in console, that's the empty data that the $resource will assign to your scope object.

When the data eventually comes back from the server, it will be assigned to the $scope.user variable, and you should see a second entry to the console with the data from the server response.