使用AngularJS通过$ http发布到服务器

Question

我确定这将是其他一些帖子的副本，但是我找不到它？

我刚刚开始研究Angular，并根据各种在线资源编写了以下内容。

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>

而我的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');
            });

        };

    }]);

在控制台中，我得到：

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) 

当我取消注释JS中的第一个console.log时，emailAddress将在控制台中写出。

任何指向我要去哪里错误的指针都非常感谢。

谢谢，

托尼

Answer 1

主要问题在于您的控制器依赖性，您已将$http隐式放置在function参数中，但未在其数组符号中放置。

更改：

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

至

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

此外，更改input标签中的name值属性，使其与变量名一致-因为在验证表单时将使用这些名称。

例如<form name>.<input name>.$pristine或<form name>.<input name>.$error

更改：

    <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 />

至：

    <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 />