What is AngularJS Modules




Using AngularJS Modules, you can control functionalities and behavior if AngularJS application with the help of Controllers and Directives.

These terms may be create curiosity at this moment which is really important but we’ll cover controllers and directives in other blogs.

Let’s have a look on Modules as of now.

Modules are used to define the application. Remember AngularJS application starts form the HTML tag having AngularJS directive ng-app. This is container for different part of the application and application controllers. AngularJS controllers are always dependent of AngularJS Modules.

We’ll learn following lessons in this blog:

  1. Create a new Module
  2. Using Controller with Module
  3. Using Directives with Module
  4. Modules and Controllers in separate JS files
  5. 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.


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:


Let’s see another example:

In this case, we can see that AngularJS HTML element

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. Web page will be changed to Image ‘directive2’ i.e. output is overridden by return statement in directive constructor.


Image ‘directive1′

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




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 logics in local AngularJS module.

For HTML based application, JavaScript scripts are placed at the end of element but in case of AngularJS, it is recommended to load AngularJS library either in or start of element.  As angular.module can be compiled after loading AngularJS library.


Be Connected…

Satyendra Mishra



THREE QUERIES offers easy access to information about SharePoint and associated technologies, project management, agile and scrum methodologies that helps developers, administrators, architects, technical managers, business analysts and end users. It has grown from there. We provide an important knowledge base for those involved in managing, architecture and developing software projects of all kinds. With weekly/daily exclusive updates, we keep you in touch with the latest business, management, technology thinking.

WE ARE CONNECTED ~ Follow us on social media to get regular updates and opinion on what's happening in the world of SharePoint, front-end, back end web technologies and project management. If you like this article, please share it and follow us at Facebook, Twitter, Instagram and LinkedIn

About Satyendra Mishra

Microsoft certified, motivated, energetic and accomplished SharePoint Consultant and Architect with 13+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. He has been fortunate to be a part of over 20+ Web/Mobile/Software SharePoint and .Net projects delivery with various companies across different industry sectors. This has provided him a valuable insight and experience especially in successful implementation of technology solutions. Having very strong System Architecture, Technological, Management & Analytical Skills, Knowledge of Office 365, SharePoint, .Net, JavaScript, React, Angular, Azure, SQL. In 2016, he decided to start sharing the knowledge back to society in the form for content writing and blogging.
View all posts by Satyendra Mishra →

Leave a Reply

Your email address will not be published. Required fields are marked *