AngularJS Module

A module defines an application.

Modules are containers for the different parts of an application.

Modules are containers for application controllers.

Controllers usually belong to a module.

Create a Module

You can use AngularJS'sangular.modulefunction to create a module:

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []);

</script>

The "myApp" parameter corresponds to the HTML element that runs the application.

Now you can add controllers, directives, filters, and so on to your AngularJS application.

Add a Controller

You can use theng-controllerdirective to add a controller to the application:

AngularJS Example

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

</script>

Try it Yourself »

You can in theAngularJS Controllerschapter learn more about controllers.

Add a Directive

AngularJS provides many built-in directives that you can use to add functionality to your application.

For a complete reference, see theAngularJS Reference Manual。

In addition, you can use modules to add your own directives to your application:

AngularJS Example

<div ng-app="myApp" example-directive></div>

<script>

var app = angular.module("myApp", []);

app.directive("exampleDirective", function() {
    return {
        template : "I was created in the directive constructor!"
    };
});
</script>

Try it Yourself »

You can in theAngularJS Directiveschapter learn more about directives.

Modules and controllers are included in JS files

Usually AngularJS applications include modules and controllers in JavaScript files.

In the following example, "myApp.js" contains the definition of the application module, and the "myCtrl.js" file contains the controller:

AngularJS Example

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

Try it Yourself »

myApp.js

var app = angular.module("myApp", []);

Note In the module definition, the [] parameter is used to define the module's dependencies.
The square brackets [] indicate that the module has no dependencies; if there are dependencies, the names of the dependent modules are written in the brackets.

myCtrl.js

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName= "Doe";
});

Functions affect the global namespace

Global functions should be avoided in JavaScript, because they can easily be overwritten by other script files.

AngularJS modules scope all functions under the module, avoiding this problem.

When should the library be loaded?

Note In our examples, all AngularJS libraries are loaded in the head of the HTML document.

For HTML applications, it is usually recommended to place all scripts at the bottom of the <body> element.

This improves page loading speed because HTML loading is not constrained by script loading.

In many of our AngularJS examples, you will see that the AngularJS library is loaded in the <head> section of the document.

In our examples, AngularJS is loaded in the <head> element because calls to angular.module can only be made after the library has finished loading.

Another solution is to load the AngularJS library in the <body> element, but it must be placed before your AngularJS scripts:

AngularJS Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

</body>
</html>

Try it Yourself »
Other Extensions