Online Snippets Library

Create Module in AngularJS

AngularJS allow us to manage all our JavaScript code into modules to avoid declaring objects and variables in the global namespace. We can consider AngularJS module as container-fluid for the services, controllers, application etc.

A Controller always belong to a module.

Syntax

A AngularJS module can be defined by calling the angular.module function like below.

angular.module("modulename", []);

Example

HTML
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
</head>
<body ng-app="firstModule" >
<div ng-controller="simpleController">
<strong>First name:</strong> {{firstName}}<br />
<strong>Last name:</strong> {{lastName}}</span><br />
<strong>Full name:</strong> {{getFullName()}}<br />
<label>Set First name: <input type="text" ng-model="firstName"/></label><br />
<label>Set Last name: <input type="text" ng-model="lastName"/></label>
</div>
</body>
</html>
JavaScript
angular.module("firstModule", [])
var simpleController = function ($scope)
{
  // Initialize the model variables
  $scope.firstName = "Max";
  $scope.lastName = "Joe";
  // Define utility functions
  $scope.getFullName = function ()
  {
return $scope.firstName + " " + $scope.lastName;
  };
};