Using AngularJS to post to server using $http

Question

I'm sure this will be a duplicate of some other post, but I just can't find it?

I have just started looking at Angular and have written the following as per various sources online.

HTML:

<div data-ng-app="appAuthentication">

    <form name="authentication" method="post" data-ng-controller="AuthenticationController" data-ng-submit="doAuthentication(authentication)" novalidate>

        <fieldset>

            <label for="sign-in-email-address">Email address:</label>
            <input id="sign-in-email-address" name="sign-in-email-address" data-ng-model="authentication.emailAddress" type="text" required />

            <label for="sign-in-password">Password:</label>
            <input id="sign-in-password" name="sign-in-password" data-ng-model="authentication.password" type="password" required />

            <button type="submit">Go &#187;</button>

        </fieldset>

    </form>

</div>

And my Angular:

angular.module('appAuthentication', [])

    .controller('AuthenticationController', ['$scope', function($scope, $http) {

        $scope.authentication = {
            emailAddress: '',
            password: ''
        };

        $scope.doAuthentication = function(authentication) {

            // console.log('Hello ' + authentication.emailAddress);

            $http({
                method : 'POST',
                url : '/actions/authentication/sign-in.php',
                data : authentication.emailAddress
            })
            .success(function () {
                console.log('Success');
            })
            .error(function () {
                console.log('Failure');
            });

        };

    }]);

In the console I am getting:

TypeError: undefined is not a function
    at k.$scope.doAuthentication (http://cms2.indypub.co.uk/static/scripts/core.js:16:4)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:176:88
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:193:165
    at k.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:111:373)
    at k.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:112:121)
    at HTMLFormElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:193:147)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:31:161
    at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:7:290)
    at HTMLFormElement.c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:31:143)

When I uncomment the first console.log in the JS the emailAddress is written out in the console.

Any pointers to where I am going wrong greatly appreciated.

Thanks,

Tony.

ryeballar · Accepted Answer · 2014-08-02 14:18:18Z

2

The main problem is in your controller dependencies, you have implicitly put $http in the function parameter but not in its array notation.

change:

controller('AuthenticationController', ['$scope', function($scope, $http) {
  // your code
});

to

controller('AuthenticationController', ['$scope', '$http', function($scope, $http) { 
  // your code
});

Furthermore, change your name value attributes in your input tags, make it so it conforms like a variable name - Since you'll be accessing these names when validating forms.

e.g. <form name>.<input name>.$pristine or <form name>.<input name>.$error

change:

    <label for="sign-in-email-address">Email address:</label>
    <input id="sign-in-email-address" name="sign-in-email-address" data-ng-model="authentication.emailAddress" type="text" required />

    <label for="sign-in-password">Password:</label>
    <input id="sign-in-password" name="sign-in-password" data-ng-model="authentication.password" type="password" required />

to:

    <label for="sign-in-email-address">Email address:</label>
    <input id="sign-in-email-address" name="sigInEmailAddress" data-ng-model="authentication.emailAddress" type="text" required />

    <label for="sign-in-password">Password:</label>
    <input id="sign-in-password" name="signInPassword" data-ng-model="authentication.password" type="password" required />

edited Aug 2, 2014 at 14:18

answered Aug 2, 2014 at 14:12

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

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

3 Comments

Tony Merryfield Over a year ago

@ryeballar - spot on, worked immediately :) I suspect I have a long uphill journey ahead of me with Angular and the documentation seems to be quite difficult to follow, any good resources out there?

ryeballar Over a year ago

You can try codeschool(campus.codeschool.com/courses/shaping-up-with-angular-js/intro) or egghead.io

ryeballar Over a year ago

Note that in the egghead.io lessons list, you start at page 12 because thats where the very first uploads started

Collectives™ on Stack Overflow

Using AngularJS to post to server using $http

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related