AngularJS Modules

3 Sep by vichu

AngularJS Modules

Reading Time: 2 minutes

The very first thing we want to introduce is the concept of modules. Modules are AngularJS ’s way of packaging relevant code under a single name. For someone coming from a Java background, a simple analogy is to think of modules as packages.

An AngularJS module has two parts to it:

  • A module can define its own controllers, services, factories, and directives. These are functions and code that can be accessed throughout the module.
  • The module can also depend on other modules as dependencies, which are defined when the module is instantiated. What this means is that AngularJS will go and find the module with that particular name, and ensure that any functions, controllers, services, etc. defined in that module are made available to all the code defined in this module.

In addition to being a container for related JavaScript, the module is also what AngularJS uses to bootstrap an application. What that means is that we can tell AngularJS what module to load as the main entry point for the application by passing the module name
to the ng-app directive.

Let’s clear this up with the help of a few examples. This is how we define a module named vishalsrini:

angular.module(‘vishalsrini’, [ ]);

The first argument to the module function in AngularJS is the name of the module. Here, we define a module named vishalsrini. The second argument is an array of module names that this module depends on. Do note the empty square brackets we pass as the second argument to the function. This tells AngularJS to create a new module with the name vishalsrini, with no dependencies.

This is how we define a module named vishalsrini, which depends on two other modules: vishalsrini.ui, which defines our UI widgets, and thirdCompany.fusioncharts, which is a third-party library for charts:

angular.module(‘vishalsrini’,
[‘vishalsrini.ui’, ‘thirdCompany.fusioncharts’]);

If we want to load an existing module that has already been defined in some other file, we use the the angular.module function with just the first argument, as follows:

angular.module(‘vishalsrini’);

This line of code tells AngularJS to find an existing module named vishalsrini, and to make it available to use, add, or modify in the current file. This is how we refer to the same module across multiple files and add code to it.

There are two common mistakes to watch out for:

  • Trying to define a module, but forgetting to pass in the second argument. This would cause AngularJS to try to look up a module instead of defining one, and we
    would get an error (“No module found”).
  • Trying to load a module from another file to modify, but the file that defines the module has not been loaded first. Make sure the file that defines the module is loaded first in your HTML before you try to use it.

Now that the module has been defined, how do we use it? We can of course add our functionality to it, and modularize our codebase into distinct sections. But more importantly, we can tell AngularJS to use these modules to bootstrap our application. The ng-app directive takes an optional argument, which is the name of the module to load during bootstrapping.

Let’s take a look at a complete example to make sense of this:

See the Pen Creating a module in angularjs by Vishal Srinivasan (@vishal_srini) on CodePen.0

This example defines a module (note the empty array as the second argument), and then lets AngularJS bootstrap the module through the ng-app directive

Byvichu

Love to code and Love to learn. A passionate technology lover who likes to sit with laptop even for weeks :D

Leave a Reply

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