Why is my AngularJS module never loaded?

Question

I am an AngularJS newbie, and am having difficulty getting an AngularJS form to work correctly. Chrome Dev Tools tells me my module is not being loaded.

Below is my html; it is a div within a Wordpress template:

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

This is my angular code:

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;
                }
            } );
    }
}]);

The code is adapted from a tutorial. Can anyone help me out with what I am doing wrong?

Answer 1

There's nothing wrong with your code in terms of the problem you are having. The problem is the order in which you are loading the scripts.

The order should be: 1- angular.js 2- any-angular-dependency.js 3- your-angular-app.js

this is a working copy of your code I'm not including the form because is just to show you that it doesn't find your angular module because either you are not including it or is not loading correctly from cdn, you might want to download it to have it locally and include the <script src="angular.js"></script> tag