Over a million developers have joined DZone.

AngularJS - Why & How to Create Custom Module

DZone's Guide to

AngularJS - Why & How to Create Custom Module

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

This article represents key concepts and code samples on why and how to create a custom module with  AngularJS. Please feel free to comment/suggest if I missed to mention one or more important points.
Following are the key points described later in this article:
  • Why create a custom module?
  • How to create a custom module?
Why Create A Custom Module?

A module in AngularJS wires together some of the following components:

  • Controllers
  • Directives
  • Filters
  • Service
In simple words, a module could also be thought of as container of above components. As per the design, if there is a need to bundle together one or more of the above and reuse it in one or more modules in future, one could go for creating a module. From the design perspective, following could be considered as  best practice:
  • A module per feature could be designed.
  • It would be good to group similar/related service, filters and directives as part of the module for future reuse.
How to Create A Custom Module?

Creating a custom module is as simple as using angular.module API thereby passing the name and module dependencies and, defining one or more components. Take a look at following:

angular.module( "ModuleName", [] )
.factory( "ServiceName", [ 'depName', function( depName){
// code goes here...
.filter( "filterName", [ 'depName', function(depName)]{
// code goes here...
.directive( "directiveName", [ 'depName', function( depName ){
// code goes here...

At lower level, a module is primarily a collection of two kind of blocks that are following:

  • Configuration blocks: Configuration blocks get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. The above code, actually, is applied as configuration blocks in that order in the following way:
angular.module('ModuleName', []).
  config(function($provide, $compileProvider, $filterProvider) {
    $provide.factory('ServiceName', [ 'depName', function( depName){
// code goes here...
    $filterProvider.register('filterName', [ 'depName', function(depName)]{
// code goes here...
    $compileProvider.directive('directiveName', [ 'depName', function( depName ){
// code goes here...
  • Run blocks: Run blocks get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks.

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

java ,html5 ,tutorial ,html & xhtml ,angularjs

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}