AngularJS Module
A module defines an application.
A module is a container for the different parts of an application.
A module is a container for the application controllers.
Controllers are typically defined in a module.
Creating a Module
You can create a module using the angular.module function in AngularJS:
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
The "myApp" parameter corresponds to the HTML element that acts as the application's container.
Now you can add controllers, directives, filters, etc., to your AngularJS application.
Adding a Controller
You can add a controller to your application using the ng-controller directive:
AngularJS Example
You can learn more about controllers in the AngularJS Controllers section.
Adding Directives
AngularJS provides many built-in directives that you can use to add functionality to your application.
For a complete list of directives, refer to the AngularJS Reference.
Additionally, you can use modules to add your own directives to the application:
AngularJS Example
You can learn more about directives in the AngularJS Directives section.
Modules and Controllers in JS Files
Typically, AngularJS applications include modules and controllers in JavaScript files.
In the following example, "myApp.js" contains the application module definition, and "myCtrl.js" 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>
myApp.js
| | The [] parameter in the module definition is used to define dependencies. <br>The brackets [] indicate that the module has no dependencies. If there are dependencies, their names would be listed within the brackets. | | --- | --- |
myCtrl.js
Functions Affecting the Global Namespace
Global functions should be avoided in JavaScript as they can be overwritten by other script files.
AngularJS modules keep the scope of all functions within the module, thus avoiding this issue.
When to Load the Library?
| | In our examples, all AngularJS libraries are loaded in the head of the HTML document. | | --- | --- |
For HTML applications, it is generally recommended to place all scripts at the bottom of the <body> element.
This improves page load speed as the HTML loading is not blocked by script loading.
In our multiple AngularJS examples, you will see that the AngularJS library is loaded in the <head> section of the document.
In our example, AngularJS is loaded in the <head> element because the call to angular.module can only be made after the library is loaded.
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>