Angular Modules

As our application grows, we need to consider the possibility of splitting it into different modules. It comes with it a lot of advantages, which is the best way to test and evolve each module separately from the others and also to share each module with other projects. A module can be easily detachable. This module helps with better code management and it helps to work in large teams. Loose coupling allows developers to create their parts of the project independently.

The angular.module() method is used to create a module. The syntax to create an AngularJS module is as follows.

var aModule = angular.module("<moduleName>", ["<injectedModule1>","<injectedModule2>"]);

In the above code, the angular.module() function takes two parameters: the first is the module name and second([]) is the array of dependent module. The parameters used to create a module are as follows:

PropertyDescription
<moduleName>This represents the name of the module registered to AngularJS
<injectedModule><injectedModule1> and <injectedModule2> are modules that are injected as input to the targeted module


snippet
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="payrollApp" ng-controller="EmployeeController">
{{ Name }} {{ Age }}
</div>

<script>
var app = angular.module("payrollApp", []);
app.controller("EmployeeController", function($scope) {
$scope.Name = "Michael";
$scope.Age = "30";
});
</script>
</body>
</html>
Related Tutorial