AngularJS Modules
Using AngularJS Modules, you can control functionalities and behavior of AngularJS application with the help of Controllers and Directives.
These terms may create curiosity at this moment, which is really important but we'll cover Controllers and directives in other write-ups.
Let's have a look at Modules as of now.
Modules are used to define the application. Remember, AngularJS application starts from the HTML tag having AngularJS directive ng-app. This is a container for different parts of the application and application Controllers. AngularJS Controllers are always dependent on AngularJS Modules.
We'll learn the following lessons in this article.
- Create a new Module
- Using Controller with Module
- Using Directives with Module
- Modules and Controllers in separate JS files
- Recommendation of using JavaScript and AngularJS libraries
Create a new Module
![]()
Here 'angularJSApp' variable associated with a HTML element refers to AngularJS application with the help of directive ng-app. We can define a module using an API, as shown in the code above.
var app = angular.module("angularJSApp",[]);
This variable 'app' can be used further to work with different parts of AngularJS application.
Using Controller with Module
![]()
After creating a reference to module, we can work with inner variables in AngularJS application. In the above example, we can see that we are setting 'firstName' and 'lastName' variables using AngularJS Controller which is always dependent on module.
Output
![]()
Using Directives with Module
![]()
We can also create custom directives in AngularJS. In the above example, a custom directive 'sm-directive-test' is implemented. Its output is provided below.
Output
![]()
Let's see another example,
![Controller with Module]()
In this case, we can see that AngularJS HTML element <div> has inner Text and anonymous constructor of custom directive has one statement as alert ('Hi'). Let's see the behavior of AngularJS in this case.
As soon as we run your application, we will see output web page as Image 'directive1'. Inner text is being displayed and alert message is also being shown.
When we click OK on alert message, the web page will be changed to image 'directive2' i.e. output is overridden by return statement in directive constructor.
Output
![Controller with Module]()
Image 'directive1',
![Controller with Module]()
Image 'directive2',
Modules and Controllers in separate JS files
We can have separate JavaScript files for AngularJS which is more secure and recommended approach. Let's see an example below-
![Controller with Module]()
smApp.js,
![Controller with Module]()
smCtrl.js,
![Controller with Module]()
Output
![Controller with Module]()
Recommendation of using JavaScript and AngularJS libraries
We should avoid global functions. They can easily be destroyed or overwritten by other JavaScripts. AngularJS reduces this problem by keeping the logics in local AngularJS module.
For HTML based applications, JavaScript scripts are placed at the end of <body> element but in case of AngularJS, it is recommended to load AngularJS library either in <head> or at the start of <body> element. As angular.module can be compiled after loading AngularJS library.