Episode 8 of 25

Modules

Learn how to organise your AngularJS app into modules.

A module is a container for the different parts of your AngularJS app — controllers, services, filters, and directives.

Creating a Module

// Create a module named 'myApp' with no dependencies
var app = angular.module('myApp', []);

Using the Module in HTML

<html ng-app="myApp">
<!-- or -->
<div ng-app="myApp">...</div>

Adding Components to a Module

var app = angular.module('myApp', []);

// Add a controller
app.controller('MainCtrl', function($scope) {
    $scope.message = "Hello from the controller!";
});

// Add a filter
app.filter('reverse', function() {
    return function(input) {
        return input.split('').reverse().join('');
    };
});

// Add a directive
app.directive('myHeader', function() {
    return {
        template: '<h1>Welcome!</h1>'
    };
});

Module Dependencies

Modules can depend on other modules:

// Create sub-modules
var controllers = angular.module('app.controllers', []);
var services = angular.module('app.services', []);

// Main module depends on sub-modules
var app = angular.module('myApp', [
    'app.controllers',
    'app.services',
    'ngRoute',        // Angular's routing module
    'ngAnimate'       // Angular's animation module
]);

File Organisation

// app.js — main module
angular.module('myApp', ['ngRoute']);

// controllers.js — controllers
angular.module('myApp')
    .controller('MainCtrl', function($scope) { });

// Note: angular.module('myApp') without [] retrieves
// the existing module instead of creating a new one.