Here we will learn module in angularjs with example, use of module in angularjs, how to add controller to module in angularjs with exampleor add how to add directives to module in angularjs with example.
A module in angularjs is a container of different parts of application like controllers, services, directives, filters etc.
Generally in most of the applications we have a single entry point (main method) that instantiate and club together different parts of the application. In angularjs applications we don’t have that main method instead we have modules that specify how our application will be structured and bootstrapped.
Generally we will create modules by using angular.module function and the syntax of using angular modules in applications will be like as shown following.
<script type="text/javascript">
var app = angular.module('angularmoduleapp', []);
</script>
<div ng-app="angularmoduleapp">....</div>
The angular.module is a global place of creating, retrieving and registering the modules. All the modules in an application either it is angular core module or 3rd party that should be available in the application should be registered using angular.module.
As stated earlier module is container of controllers, directives, filters, etc. Now we will see how to add controllers to module in angularjs.
Following is the syntax of adding controllers to angularjs modules.
<script type="text/javascript">
var app = angular.module('angularmoduleapp', []);
app.controller('angularmodulectrl', function ($scope) {
$scope.msg = 'Welcome to Tutlane.com';
});
</script>
<div ng-app="angularmoduleapp" ng-controller="angularmodulectrl">
<b> {{ msg }}</b>
</div>
If you observe above syntax we added controller to “app” module. In next chapters you will learn more about controllers. Now we will see complete example of using controllers with modules in angularjs applications.
Following is the example of creating module and adding controller to module in angularjs.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Modules Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('angularmoduleapp', []);
app.controller('angularmodulectrl', function ($scope) {
$scope.msg = 'Welcome to Tutlane.com';
});
</script>
</head>
<body>
<div ng-app="angularmoduleapp" ng-controller="angularmodulectrl">
<b> {{ msg }}</b>
</div>
</body>
</html>
If we run application we will get output like as shown below.
Following is the result of using module with controller in angularjs applications.
Now we will see how to add directives to modules in angularjs. In angularjs we have built in directives for reference check this Directives in AngularJS.
We will see how to add directives to module. Here we will create our own custom directive and use it in angularjs application.
Following is syntax of using directives with modules in angularjs.
<script type="text/javascript">
var app = angular.module('angularmoduleapp', []);
app.directive('w3TestDirective', function () {
return {
template: 'Welcome to Tutlane.com'
};
});
</script>
<div ng-app="angularmoduleapp" w3-test-directive></div>
Now we will see full example to use directives with modules in angularjs
Following is the example of using directives with module in angularjs application.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Adding Directives to Modules Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('angularmoduleapp', []);
app.directive('w3TestDirective', function () {
return {
template: 'Welcome to Tutlane.com'
};
});
</script>
</head>
<body>
<div ng-app="angularmoduleapp" w3-test-directive></div>
</body>
</html>
If we run above example we will get output like as shown below.
Following is the output of using directives with modules in angularjs applications.
Finally we can say that a module in angularjs is a collection of services, directives, controllers, factory, filters and configuration information.