AngularJS — Modules

What are Modules?

Modules organize different parts of an application.

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

Module Dependencies

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

Module Components

Component	Description
Controllers	Handle user interaction
Services	Business logic
Directives	DOM manipulation
Filters	Data transformation

Module Methods

// Get existing module
var app = angular.module('myApp');

// Add controller
app.controller('MyController', function($scope) {});

// Add service
app.factory('MyService', function() {});

// Add directive
app.directive('myDirective', function() {});

// Add filter
app.filter('myFilter', function() {});

File Organization

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

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

// services/userService.js
angular.module('myApp').factory('UserService', function($http) {});

Mini Practice

1. Create a module
2. Add dependencies
3. Organize files by module
4. Use module components

Up Next

Continue with Controllers — AngularJS controllers.