Why am I getting "$http is not defined" in this controller?

Question

I have an AngularJS application that I'm building. And I'm a little new to Angular, but I've been working through tutorials and such. I've gotten to the point where I'd like to PUT data on the server via a <form>. So, I molded together a couple Angular docs and an SO post:

• This one to construct the form properly;
• and this one + AngularJS POST to Server to construct the controller method.

So, in the end I have this:

HTML

<form id="register-form" ng-controller="RegisterController"
                         ng-submit="registerUser()">
    <label>Display Name</label>
    <input type="text" ng-model="user.displayname"></input>
    <label>Email Address</label>
    <input type="text" ng-model="user.username"></input>
    <label>Password</label>
    <input type="password" ng-model="user.password"></input>
    <a href="#/register" class="button primary gradient"
        onclick="$('#register-form').submit();">Register</a>
</form>

Controller

function RegisterController($scope) {
    $scope.user = { };

    $scope.registerUser = function() {
        $http({
            method: 'PUT',
            url: '/user/register',
            data: $scope.user
        }).success(function(data) {
                    setAjaxMessage(data, true);
                }).error(function(data) {
                    setAjaxMessage(data, false);
                });
    };
}

However, Firefox is logging this error when executing that code:

Error: $http is not defined
RegisterController/$scope.registerUser@http://l.tpb.com/js/controllers.js:22
_functionCall/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js:6541
ngEventDirectives[directiveName]</</</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js:13256
Scope.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js:8218
Scope.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js:8298
ngEventDirectives[directiveName]</</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js:13255
x.event.dispatch@http://l.tpb.com/js/jquery-1.10.2.min.js:5
x.event.add/v.handle@http://l.tpb.com/js/jquery-1.10.2.min.js:5
x.event.trigger@http://l.tpb.com/js/jquery-1.10.2.min.js:5
.trigger/<@http://l.tpb.com/js/jquery-1.10.2.min.js:5
.each@http://l.tpb.com/js/jquery-1.10.2.min.js:4
x.prototype.each@http://l.tpb.com/js/jquery-1.10.2.min.js:4
.trigger@http://l.tpb.com/js/jquery-1.10.2.min.js:5
x.fn[t]@http://l.tpb.com/js/jquery-1.10.2.min.js:6
onclick@http://l.tpb.com/#/register:1

Answer 1

You need to inject it

function RegisterController($scope, $http)