« Previous Next »

AngularJS Modules

An AngularJS module defines an application.

The module is a container for the different parts of an application.

The module is a container for the application controllers.

Controllers always belong to a module.

Creating a Module

A module is created by using the AngularJS function angular.module.

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

<script>
var app = angular.module("myApp", []);
</script>

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

Adding a Controller

Add a controller to your application, and refer to the controller with the ng-controller directive:

Output :

Adding a Directive

AngularJS has a set of built-in directives which you can use to add functionality to your application.

For a full reference, visit our AngularJS Directive Reference.

In addition, you can use the module to add your own directives to your applications:

Output :

Modules and Controllers in Files

It is common in AngularJS applications to put the module and the controllers in separate JavaScript files.

In this example, myApp.js contains the application module definition, while myCtrl.js contains the controller:

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

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

Output :

Functions Can Pollute the Global Namespace

Global functions should be avoided in JavaScript. They can easily be overwritten or destroyed by other scripts.

AngularJS modules reduce this problem by keeping all functions local to the module.

When to Load the Library

While it is common in HTML applications to place scripts at the end of the <body> element, it is recommended that you load the AngularJS library either in the <head> or at the start of the <body>.

This is because calls to angular.module can only be compiled after the library has been loaded.

Output :

« Previous Next »