[AngularJS Tutorial] AngularJS Module Example + Bootstrap Popup

This tutorial shows you how to create AngularJS Module Example and AngularJS Module what is. You also to get the advantages of AngularJS modules, inject dependencies and load the module. At the end of tutorial, we show you a Bootstrap popup example that demonstrates how to inject external module for AngularJS module.

Table of contents:
1. AngularJs Modules Introduction
2. Advantages of AngularJS Modules
3. Module with no dependencies
4. Module with dependencies
5. Load an AngularJS Module
6. Create AngularJS Module Example with Bootstrap Popup

AngularJs Modules Introduction
In AngularJS, a module is a container for the different parts of an application, an application controller, service, filter, directive, etc.

We can add controllers, directives, filters, and more, to our AngularJS module.

A module can be used by AngularJS to start an application. In AngularJS, a module is defined or called using angular.module function.

A module can depend on other modules

Advantages of AngularJS Modules
It is easier to understand and maintained source code.
We can package code as reusable modules.
The modules can be loaded in any order (or even in parallel).
Unit tests only have to load relevant modules, which keeps them fast and we can override configuration if need.

Module with no dependencies

Here is a syntax to define a module named myapp with no dependencies

The first argument is the module name, ‘myapp’ that will bind to ng-app directive. The second argument is an array of module names that this module depends on. Here, Empty square brackets means that this module does not have any dependencies.

Module with dependencies
Here is a syntax to define a module named myapp with dependencies

This module depends on two modules ui.bootstrap and ngResource. It means that the myapp module can access all the funtionalities of module ui.bootstrap and ngResource.

Load an AngularJS Module

If we need to use some functionalities of a certain module defined elsewhere. You can load it by using syntax like below:

In the above code, myApp is module name that we need to load.
If we just want to load an existing module defined elsewhere, call module function with only one parameter which is name of module.

angular.module(‘myApp’);

Create AngularJS Module Example with Bootstrap Popup
Let’s take a popup example that we can demonstrate about loading AngularJS module and dependency:

First of all, we create HTML document for our application like below:

In this above code, we have added AngularJS library already. One more, you see bootstrap library too, we will use bootstrap css in this example and bootstrap javascript like dependency.

Create AngularJS module named myPopup and depens on module ui.bootstrap like this:

Next, create controller

This creates a controller, named myPopupController on the myPopup module. A controller is just a function in AngularJS. The $scope parameter is a service built-in AngularJS. The $modal parameter is a service that come from the UI Boostrap library, it helps us create the popup.

Create popup html

We take a simple popup. Here is popup html:

We have a controller for this popup also. It is just simple function that is used to cancel the popup:

Live demo

Now, you can create your own AngularJS Module Exmaple that AngularJS depens on other module. If you have any opinion, please leave comment.
Thank you very much

Download complete source code by hitting the below link

angularjs-module-bootstrap-popup.zip (177 downloads)