Working with Modules in Angular JS Application

Share this article

Please don’t make any confusion in your mind. Understanding the concept of Modules is very easy in Angular JS. Modules are the top-level components for AngularJS applications. Although, we can build simple AngularJS Application without using the reference modules, but this is not recommend doing so because simple applications Become complex applications over time, and you’ll just end up having to rewrite the application when it becomes Unmanageable. Working with modules is easy, and the handful of additional JavaScript statements that you need to set up and manage modules in your Angular JS Application is very important. Angular JS Modules have three main roles in an AngularJS Application :

It will allow us to associate an AngularJS application with a region of an HTML document.
It will act as a gateway and make easy to use AngularJS framework features
It will help in organizing the code and components for your AngularJS application

As this article is also a part of Concepts while working with Angular JS Application . So, you must read other tutorials in order to complete understanding to developing Angular JS Application. Since, we are going to learn several concepts. That’s why I have broken this article into several small article. Which allow us to easily understand several Angular JS features and concepts. Following are the list of articles.

Problems	Solutions
Create an AngularJS module.	Use the `angular.module` method.
Set the scope of a module.	Use the `ng-app` attribute.
Define a controller.	Use the `Module.controller` method.
Apply a controller to a view.	Use the `ng-controller` attribute.
Pass data from a controller to a view.	Use the `$scope` service.
Define a directive.	Use the `Module.directive` method.
Define a filter.	Use the `Module.filter` method
Use a filter programmatically.	Use the `$filter` method.
Define a service.	Use the `Module.service`, `Module.factory`, or `Module.provider` method.
Define a service from an existing object or value.	Use the `Module.value` method.
Add structure to the code in an application.	Create multiple modules and declare dependencies from the module referenced by the `ng-app` attribute.
Register functions that are called when modules are loaded.	Use the `Module.config` and `Module.run` methods.

Setting the Boundaries of an AngularJS Application

The first step when creating an AngularJS app is to define a module and associate it with a region of the HTML document. It is very important as now you know from above paragraph in order to organize our code. Modules are defined with the angular.module method. Following code example shows that how to creates the module for the example app.

...
var myApp = angular.module("exampleApp", []);
...

The module method supports the three arguments described below, although it is common to use only the first two. We will learn details in other tutorial.

nameThe name of the new module
requires The set of modules that this module depends on
config The configuration for the module, equivalent to calling the Module.config method

Summary: You should read above mentioned articles in order to completely understanding to developing an Angular JS application. This article is a part of Concepts while working with Angular JS Application, which is divided in to pieces of tutorials in order to understand easily. I hope you will like this article and find it useful.

Setting the Boundaries of an AngularJS Application

Recommended Articles!