Introduction to AngularJS Modules

If you are interested to learn about the angular expressions

An AngularJS module defines an application. A module in AngularJS is a container of the different parts of an application such as controller, service, filters, directives, factories etc. It supports separation of concern using modules. AngularJS stops polluting global scope by containing AngularJS specific functions in a module. 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.

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

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:

Example

div ng-app="<strong>myApp</strong>" ng-controller=<strong>"myCtrl"
</strong>><br>{{ firstName + " " + lastName }};
/div> &lt;script> var app = angular.module(<strong>"myApp"</strong>, []); app.controller(<strong>"myCtrl"</strong>, function($scope) {  $scope.firstName = "John";<br>  $scope.lastName = "Doe";/script>

Adding a c

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:

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!"

What is Angular module used for?

A module is a collection of services, directives, controllers, filters, and configuration information. angular. module is used to configure the $injector.

Modules and Controllers in Files

It is common in AngularJS applications to put the module and the controllers in JavaScript files. In this example, “myApp.js” contains an application module definition, while “myCtrl.js” contains the controller:

Example

!DOCTYPE html>;html> script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js";
/script>;; body> &lt;div ng-app="<strong>myApp</strong>" ng-controller="<strong>myCtrl</strong>"{{ firstName + " " + lastName }}/div> &lt;script src="<strong>myApp.js</strong>">;/script>script src="<strong>myCtrl.js</strong>">/script> 

myApp.js

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

The [] parameter in the module definition can be used to define dependent modules. Without the [] parameter, you are not creating a new module, but retrieving an existing one.

myCtrl.js

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

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 reduces 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.

Example

!DOCTYPE script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">;
/script> div ng-app="myApp" ng-controller="myCtrl"><br>{{ firstName + " " + lastName }};
/div> &lt;script><br>var app = angular.module("myApp", []);<br>app.controller("myCtrl", function($scope) {<br>  $scope.firstName = "John";<br>  $scope.lastName = "Doe";<br>});/script> /body><br>;/html>

Application Module

An AngularJS application must create a top level application module. This application module can contain other modules, controllers, filters, etc.Example: Create Application Module

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    @* HTML content *@
    <script>
        var myApp = angular.module('myApp', []); 

    </script>
</body>
</html>

In the above example, the angular.module() method creates an application module, where the first parameter is a module name which is same as specified by ng-app directive.The second parameter is an array of other dependent modules []. In the above example we are passing an empty array because there is no dependency.Note: The angular.module() method returns specified module object if no dependency is specified. Therefore, specify an empty array even if the current module is not dependent on other module. Now, you can add other modules in the myApp module.

Modules in Separate Files

In the controller example shown above, we created application module and controller in the same HTML file. However, we can create separate JavaScript files for each module as shown below.Example:Angular Modules in Separate Files

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        {{message}}
    </div>
<script src="app.js" ></script>
<script src="myController.js" ></script>
</body>
</html>

app.js

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

myController.js

myApp.controller("myController", function ($scope) {
    $scope.message = "Hello Angular World!";
});
Introduction to AngularJS Modules
Show Buttons
Hide Buttons