X
HOME HTML5 CSS3 JAVASCRIPT SQL PHP5 JQUERY ANGULAR BOOTSTRAP3 XML MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

AngularJS Modules


Modules define applications. All application controllers should belong to a module.

Modules make your application more readable, and keep the global namespace clean.


AngularJS Module Example

In this example, "myApp.js" contains an application module definition, "myCtrl.js" contains a controller:

AngularJS Example

<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<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 »


Controllers Pollute the Global Namespace

All examples in this tutorial, have used global values (global variables or global functions).

Global values should be avoided in applications. They can easily be overwritten or destroyed by other scripts.

AngularJS modules can solve (or reduce) this problem.


A Controller Without a Module

The application does not have a name, and the controller function is global:

AngularJS Example

<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

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

<script>
function myCtrl($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
}
</script>

</body>
</html>

Try it Yourself »


A Controller With a Module

The application has a name (ng-app="myApp"), and the controller is a property of the module:

AngularJS Example

<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/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 »


When to Load the Library?

Note In all our examples, the AngularJS library is loaded in the <head> section.

A common advise for HTML applications, is to place all scripts at the very bottom of the <body> element.

But, in many AngularJS examples, you will see the library in the <head> element.

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

Another solution is to load the AngularJS library in the <body> element, but before your own AngularJS scripts:

AngularJS Example

<!DOCTYPE html>
<html>
<body>

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

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

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

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

</body>
</html>

Try it Yourself »


AngularJS Application Files

Now that you know what modules are, and how they work, it is time to build your application file.

Your application should have at least one module file, and one controller file for each controller.

First create a module file "myApp.js":

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

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

Then create the controller file(s). In this case "myCtrl.js":

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

Finally, edit your HTML page:

AngularJS Example

<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<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 »



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook