AngularJS Modules with Examples

  Total Views : 935
  Comments : 0
 
  Keywords : What is a module in angularjs, Use of modules in angularjs with example, Angularjs module is a container of different part of application, Learn angularjs module tutorial with example

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.

What is Angular Modules?

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.

Syntax of Creating AngularJS Modules

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 controllersdirectivesfilters, etc. Now we will see how to add controllers to module in angularjs.

Adding Controller to Modules 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.

Example of using Controllers with Modules in AngularJS

Following is the example of creating module and adding controller to module in angularjs

 

Live Preview

<!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.

Output of AngularJS Module with Controller

Following is the result of using module with controller in angularjs applications.

 

Welcome To Tutlane.com

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.

Adding Directives to Module 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.

Syntax of using Directives with Module in AngularJS

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

Example of using Directives with Module in AngularJS

Following is the example of using directives with module in angularjs application.

 

Live Preview

<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

Output of using Directives with Modules in AngularJS

Following is the output of using directives with modules in angularjs applications.

 

Welcome to Tutlane.com

Finally we can say that a module in angularjs is a collection of services, directives, controllers, factory, filters and configuration information. 

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User