In this post, we are going to cover one of the most important feature in AngularJS called Modules. We looked at features like controllers, filters and directives in the previous posts. We have also discussed how to create and include controllers in angular application, but it is not a recommended way to do, especially when you are dealing with big applications. We can use AngularJS Module API to modularize angular applications.
Contents
What is a Module?
Module can be treated as a container for the different parts of your application like controllers, filters, services, directives ,etc, which specify how an application should be bootstrapped. Module is an important part of the AngularJS dependency injection system.
Here is the general syntax for creating a module:
- angular.module(“myModule”, []);
Here myModule is the name of the module. [] is where you inject the dependencies.
Why Modules?
- Helps package our code into reusable modules.
- The declarative process is easier to understand.
- Modules can be loaded in any order.
- Easily testable and maintainable components.
- Helps organize your application.
Creating a Controller in a Module
In this section, we are going to explain how to create a controller in a module. It is very simple and we use the following steps to achieve that task.
|
1 2 3 4 |
var myFirstModule = angular.module("myFirstModule ", []); myFirstModule.controller("MyController", function); |
Here we have created a module called myFirstModule and defined a controller named MyController in it.
You can also create services, providers and factories using the angular module API. The following table briefly describes some of the mostly used methods in the API.
In this post, we are not going to look into the details of these concepts. We will see these concepts in the coming posts.
Creating a Controller in a Module Example
The following example demonstrates how to create a controller in angular module. In this example, we will create a module called demoApp and will define the controller, blogController in it.
angular-module
|
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 |
<!DOCTYPE html> <html ng-app="demoApp"> <head> <title> AngularJS - Module</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> </head> <body> <div ng-controller="blogController"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{firstName + " " + lastName}} <br> Blog Name : {{blogName }} </div> <script> var app = angular.module("demoApp", []); app.controller("blogController", function($scope) { $scope.firstName = "Pankaj", $scope.lastName = "Kumar", $scope.blogName = "JournalDev" }); </script> </body> </html> |
We use ng-app directive to specify the name of the module used in the application. You will see the following output in your browser.
AngularJS Application Files
Earlier we looked at how to include controllers in external files. That is very helpful when you deal with big applications. In any angular application, we use mainly two types of files, one with module and other with controllers. Let’s look in to it.
The following example demonstrates this usage.
First, we create a module in the app.js file.
app.js
|
1 2 3 |
var app = angular.module("demoApp", []); |
Second step is to define the controllers in controller.js file.
controller.js
|
1 2 3 4 5 6 7 |
app.controller("blogController", function($scope) { $scope.firstName = "Pankaj", $scope.lastName = "Kumar", $scope.blogName = "JournalDev" }); |
Third step is to include these two files in our application.
angular-module
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html ng-app="demoApp"> <head> <title> AngularJS - Module</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> </head> <body> <div ng-controller="blogController"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{firstName + " " + lastName}} <br> Blog Name : {{blogName }} </div> <script src="app.js"></script> <script src="controller.js"></script> </body> </html> |
You will see the following output in your browser.
That’s all for now and we will see more angular concepts in the coming posts.