Question

我是一名AngularJS新手，我很难让AngularJS表单正常工作。 Chrome Dev Tools告诉我我的模块没有加载。

下面是我的HTML;它是Wordpress模板中的div：

<div ng-app="contact" style="float: left;">
    <form method="post" name="form" role="form" ng-controller="ContactFormController" ng-submit="form.$valid && sendMessage(input)" novalidate>
    <p ng-show="success">Thanks for getting in touch!</p>
    <p ng-show="error">Something wrong happened!, please try again.</p>
    <legend>Contact</legend>
    <fieldset>
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" ng-model="input.name" required>
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" ng-model="input.email" required>
    </div>
    <div>
        <label for="messsage">Message:</label>
        <textarea id="messsage" name="message" ng-model="input.message" required></textarea>
    </div>
    <div>
        <label for="honeypot">I promise I'm not a bot</label>
        <input type="text" id="honeypot" name="honeypot" ng-model="input.honeyPot">
    </div>
    </fieldset>
    <button type="submit" name="submit" value="submit">Submit</button>
    </form>
    </div>

这是我的角度代码：

angular.module("contact", [])
    .controller("ContactFormController", ['$scope', '$http', function($scope, $http) {
    $scope.success = false;
    $scope.error = false;

    $scope.sendMessage = function( input ) {
        $http({
            method: 'POST',
            url: 'http://alamanceforeducation.org/wp-content/themes/flex/library/scripts/processApplecartForm.php',
            data: input,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        })
            .success( function(data) {
                if ( data.success ) {
                    $scope.success = true;
                } else {
                    $scope.error = true;
                }
            } );
    }
}]);

代码改编自教程。任何人都可以帮我解决我做错的事吗？

Answer 1

就您遇到的问题而言，您的代码没有任何问题。问题是您加载脚本的顺序。

订单应该是： 1- angular.js 2- any-angular-dependency.js 3- your-angular-app.js

this is a working copy of your code 我不包括表格，因为只是为了告诉你它没有找到你的角度模块，因为要么你没有包含它或者没有正确地从cdn加载，你可能想要下载它以获得它在本地并包含<script src="angular.js"></script>代码

Answer 2

要添加新模块，您需要确保：

JS文件与其他模块和angular.js
模块已正确声明，例如：angular.module('myModule').directive(....)不是模块声明，因为没有像这样的依赖项数组：angular.module('myModule',[]).directive(....)
添加对应用声明的依赖关系，或将模块添加为已经是应用依赖关系的其他模块的依赖关系： angular.module('app',['app.my-directives']).config(...)- angular.module('app.my-directives',[]).directive('SomeDirective',function(){})

这里我有一个使用 angular-ui-route 的工作应用程序的完整示例（我建议您使用此routeProvider而不是默认提供程序，它更具表现力和健壮性），我希望它适合你，它有2个状态，每个状态有不同的视图，以及几个指令和工厂模块：

Images Gallery with AngularJS

Images Gallery with AngularJS Live

PS：忽略web.js文件，它只用于使用Node.JS部署dist文件夹

我希望这可以解决您的问题，请使用plunker更新问题

为什么我的AngularJS模块从未加载？

2 个答案: