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.
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
1 |
angular.module('myapp', []); |
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
1 |
angular.module('myapp', ['ui.bootstrap', 'ngResource']); |
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:
1 |
angular.module('myApp'); |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="mycontroller.js"></script> </head> <body ng-app="myPopup"> <div class="container"> <div class="panel panel-default" ng-controller="myController"> <div class="panel-body"> <div ng-controller="myPopupController"> <div class="form-group form-group-sm"> <div class="col-sm-6"> <a ng-click="open('New Item')" >Open New Item Popup</a> </div> </div> </div> </div> </div> </body> </html> |
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:
1 |
var myPopup = angular.module('myPopup', ['ui.bootstrap']); |
Next, create controller
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
myapp.controller('myPopupController', ['$scope','$modal',function ($scope, $modal) { $scope.open = function (title) { console.log('opening my popup'); console.log(title); var modalInstance = $modal.open({ templateUrl: 'popup.html', controller: 'popupController', resolve: { title: function () { return title; } } }); } }]); |
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:
1 2 3 4 5 6 7 8 9 10 |
<div class="modal-header"> <h3 class="modal-title">My Popup</h3> </div> <div class="modal-body"> My Popup for module dependency </div> <div class="modal-footer"> <button class="btn btn-warning" type="button" ng-click="close()">Cancel</button> </div> |
We have a controller for this popup also. It is just simple function that is used to cancel the popup:
1 2 3 4 5 6 7 |
// added this myapp.controller('popupController', ['$scope','$modalInstance','title',function ($scope, $modalInstance, title) { $scope.title = title; $scope.close = function () { $modalInstance.dismiss('cancel'); }; }]); |
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 (304 downloads)