What is a Module?

You can think of a module as a container for the different parts of your app – controllers,services,filters,directives,etc.

Why?

Most applications have a main method that instantiates and wires together the different parts of the application.

Angular apps don't have a main method. Instead modules declaratively specify how an application should be bootstrapped. There are several advantages to this approach:

• The declarative process is easier to understand.
• You can package code as reusable modules.
• The modules can be loaded in any order (or even in parallel) because modules delay execution.
• Unit tests only have to load relevant modules,which keeps them fast.
• End-to-end tests can use modules to override configuration.

The Basics

I'm in a hurry. How do I get a Hello World module working?

<div ng-app="myApp">
  <div>
    {{ 'World' | greet }}
  </div>
</div>

// declare a module
var myAppModule = angular.module('myApp',[]);

// configure the module.
// in this example we will create a greeting filter
myAppModule.filter('greet',function() {
 return function(name) {
    return 'Hello,' + name + '!';
  };
});

it('should add Hello to the name',function() {
  expect(element(by.binding("'World' | greet")).getText()).toEqual('Hello,World!');
});

Important things to notice:

• TheModuleAPI
• The reference tomyAppmodule in<divng-app="myApp">. This is what bootstraps the app using your module.
• The empty array inangular.module('myApp',[]). This array is the list of modulesmyAppdepends on.

Recommended Setup

While the example above is simple,it will not scale to large applications. Instead we recommend that you break your application to multiple modules like this:

• A module for each feature
• A module for each reusable component (especially directives and filters)
• And an application level module which depends on the above modules and contains any initialization code.

You can find a community
style guideto help yourself when application grows.

The above is a suggestion. Tailor it to your needs.

Theangular.moduleis a global place for creating,registering and retrieving Angular modules. All modules (angular core or 3rd party) that should be available to an application must be registered using this mechanism.

Passing one argument retrieves an existingangular.Module,whereas passing more than one argument creates a newangular.Module

Module

A module is a collection of services,controllers,and configuration information.angular.moduleis used to configure the$injector.

// Create a new module
var myModule = angular.module('myModule',[]);

// register a new service
myModule.value('appName','MyCoolApp');

// configure existing services inside initialization blocks.
myModule.config(['$locationProvider',function($locationProvider) {
  // Configure existing providers
  $locationProvider.hashPrefix('!');
}]);

Then you can create an injector and load your modules like this:

var injector = angular.injector(['ng','myModule'])

However it's more likely that you'll just usengApporangular.bootstrapto simplify this process for you.

Usage

angular.module(name,[requires],[configFn]);

Arguments

Returns