AngularJS Modules

AngularJS module defines an application.

A module is a container for different parts of the application.

A module is a container for the application controller.

Controllers always belong to a module.

Create a module

By using AngularJS functions,angular.module Create a module:

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
The "myApp" parameter refers to the HTML element in which the application will run.

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

Add Controller

Add a controller to your application and use ng-controller The directive refers to the controller:

Example

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

Try It Yourself

You will learn more about controllers later in this tutorial.

Add Directives

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

For a complete reference, please visit our AngularJS directive reference.

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

Example

<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "I was made in a directive constructor!"
  };
});
</script>

Try It Yourself

You will learn more about directives in the later part of this tutorial.

modules and controllers in the file

It is common in AngularJS applications to place modules and controllers in JavaScript files.

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

Example

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/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", []);

The [] parameters in the module definition can be used to define dependent modules.

If there are no [] parameters, you are not creating a new module, but retrieving an existing module.

myCtrl.js

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

Functions may pollute the global namespace

Avoid using global functions in JavaScript. They are easily 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 to place scripts in HTML applications <body> is common at the end of the element, but it is recommended that you <head> or <body> at the beginning of the file to load the AngularJS library.

This is because the library must be loaded before compiling references angular.module Usage.

Example

<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName = "Gates";
});
</script>
</body>
</html>

Try It Yourself