Web Programming TutorialsLearn Basic Concept Of Module in AngularJS

Learn Basic Concept Of Module in AngularJS

Angular JS-Module

Angular js is a container for view, directive, controller, filter and configuration file. Angular Module represented by ng-app directives in an application. In this section I am going to explain about usages of Module, Creation of module, and Loading a module in an application.

Example:

<html ng-app ="modulename">

So it helps to define the functionally of view, directive and filter. Ng-app represents which module can be used in current view.

Why to Use Angular js Module

A application that have empty module make its controller function global, usually global value should be avoided in application, they can easily overwritten or destroyed by other script. Angular JS application should always be used with modules, so that it can solve the global value problem. Let see how to create and load module in application.

Defining a Module:

1. Define JavaScript script file
Add js file from your web Application.

2. Declare a module

Angular.module method used to declare a module. And empty array implies that there are no dependencies on this module. We will store the module in variable name called myAppModule.

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

3.Configure a module
Now in this step, myApp module associate with MyAppModule variable. That simply means that application can access functionality of following function within myApp module.

myAppModule.filter('Intro', function () {
    return function (typed_text) {
        return 'Hello World, ' + typed_text + '!';
    };
});

Module Loading

In following piece of code I have added myapp as module name in ng-app directives that implies that following div associate with myapp module. As stated before empty module can have global value which can be overwritten by other script, so it’s better to used module name in application.

<div ng-app="myApp" >
  
  {{ 'we just learnt loading a module' | Intro }}
  
  </div>

Output

Hello World, we just learnt loading a module!

Complete Example :

Jscript.js

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

myAppModule.filter('Intro', function () {
    return function (typed_text) {
        return 'Hello World, ' + typed_text + '!';
    };
});

Module.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>

    <title></title>
    <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
    <script src="JScript.js" type="text/javascript"></script>

</head>
<body >
 
 <div ng-app="myApp" >
    {{ 'we just learnt loading a module' | Intro }}
  
  </div>

</body>
</html>

Hence we have learnt the basic concept of module in AngularJS. In next article we will discuss about routes in angular JS.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -