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

Answer 2

In order to add a new module you need to make sure that:

1. The JS file is properly loaded on your page together with the other modules and angular.js
2. The module is properly declared for example: angular.module('myModule').directive(....) is not a module declaration, because doesn't have the dependencies array like this: angular.module('myModule',[]).directive(....)
3. Add the dependency on the declaration of your app, or add the module as dependency of other which already is a dependency of your app: angular.module('app',['app.my-directives']).config(...)- angular.module('app.my-directives',[]).directive('SomeDirective',function(){})

Here I have a full example of a working application using angular-ui-route (I recommend you this routeProvider instead of the default provider, it's more expressive and robust), I hope it works for you, it has 2 states each one with different views, and several modules for directives and factories:

Images Gallery with AngularJS

Images Gallery with AngularJS Live

PS: ignore the web.js file, it's only for deploy the dist folder using Node.JS

I hope this solve your issue, please update the question with the plunker