WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Modules


An AngularJS module characterizes an application.

The module is a compartment for the diverse pieces of an application.

The module is a holder for the application controllers.

Controllers dependably have a place with a module.


Creating a Module

A module is made by utilizing the AngularJS work angular.module

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

<script>

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

</script>

The "myApp" parameter alludes to a HTML component in which the application will run.

Now you can include controllers, mandates, channels, and that's just the beginning, to your AngularJS application.


Adding a Controller

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

Example

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

<script>

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

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

</script>
Try it Yourself »

You will become familiar with controllers later in this tutorial.


Adding a Directive

AngularJS has a lot of worked in mandates which you can use to include usefulness to your application.

For a full reference, visit our AngularJS mandate reference.

In option you can utilize the module to add your very own mandates to your applications:

Example

<div ng-app="myApp" w3-test-directive></div>

<script>

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

app.directive("w3TestDirective", work() {
    return {
        format : "I was made in an order constructor!"
    };
});
</script>
Try it Yourself »

You will become familiar with orders later in this tutorial.


Modules and Controllers in Files

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

In this model, "myApp.js" contains an application module definition, while "myCtrl.js" contains the controller:

Example

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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 application = angular.module("myApp", []);

myCtrl.js

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

Functions can Pollute the Global Namespace

Global capacities ought to be maintained a strategic distance from in JavaScript. They can undoubtedly be overwritten or obliterated by other scripts.

AngularJS modules decreases this issue, by keeping all capacities nearby to the module.


When to Load the Library

While usually in HTML applications to put contents toward the finish of the <body> component, it is prescribed that you load the AngularJS library either in the <head> or toward the beginning of the <body>.

This is on the grounds that calls to angular.module must be assembled after the library has been loaded.

Example

<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

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

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

</body>
</html>
Try it Yourself »