Search within TutorialsPark

AngularJS : Modules and Components


Learn how to build AngularJS application using Modules and Components of different types


AngularJS : Modules

A Basic feature of a Maintable Application is the structure of the code, AngularJS allows the user to divide the front end code of the application into small reusable components called modules

A Module can be thought of as a container which can hold different components of your application with one name common to all.

The different modules in an AngularJS Application are controller, directives, filters and services.

The key is angular.module , its a gateway into Module API, it has all the mechanism to configure AngularJS . It is used to register, create and get all AngularJS modules together.


AngularJS Modules: Using Modules

Modules comprise the top most components of an AngularJS Application, you can even create an Application without making use of modules at all, but that would be an very badly build application, and difficult to maintain and upgrade.

AngularJS needs to know about the different components of an AngularJS application, and how they are attached together.Hence an application is divided into reusable modules and their dependencies are specified.

The following are the important uses of Modules in an AngularJS application.

1. To attach a particular AngularJS application within a specified region of an HTML Document.

2. It acts a getway to AngularJS API and other features of the framework

3. It is used to organize the and bring together various components of the application, and work in co-ordination.


AngularJS Modules: Defining the Limits of an AngularJS Application

The primary step while creating an AngularJS application is to define a module and its boundaries within the HTML document.

To define a module use the method angular.module.Any given module can support three arguments as given below, however generally only two are used.

Table : Arguments for method angular.module

Name Description
name To specify the name of the module
requires To specfiy the set of modules that the current module is dependent upon.
config To set the configuration for the module.

Syntax: AngularJS Modules

The convention is to to assign names to modules with App as suffix, to denote that the module represents the top-level AngularJS application.


AngularJS Modules: Applying a Module

Done with Defining a module, the next step is to apply it to the HTML code block using the attribute ng-app.

When AngularJS is the only framework used in the Application, then the attribute ng-app must be applied on the html element itself.

When AngularJS is used in combination with other framework, the attribute should be applied only the code block where it would be required.

Syntax: AngularJS ng-app Attribute


AngularJS : A Sample Project using Modules

We create a sample AngularJS Project using modules. Its a bare minimum application and has no functionality.

Example: Angular JS Setting the Controller and its Behaviour

Give it a TRY! » Note: The operator || show the name of day if defined, or else NA is displayed.