AngularJS Module and HTML DOM Examples

December 23, 2014
In this page, we will learn AngularJS module and HTML DOM. Module is a container for controllers, services, filters, directives etc in our app. In AngularJS, HTML DOM supports ng-disabled, ng-show, ng-show and ng-click directives. Find the description of Module and HTML DOM with examples.

AngularJS: Module

In AngularJS, application module is global place for creating, registering and retrieving Angular Modules. A module is a collection of services, directives, controllers, filters, and configuration information. Modules define application and all applications are controlled by modules. AngularJS module is defined inside HTML controller and make our application more readable.
Example
<!DOCTYPE html>
  <html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  </head>
<body>
  <div ng-app="myApp" ng-controller="myControl">
    {{ subject + " " + marks }}
</div>
  <script src="myApp.js"></script>
</body>
</html>

myApp.js
var app = angular.module("myApp", []);
app.controller("myControl", function($scope) {
    $scope.subject = "Math";
    $scope.marks = "60";	
});
In this example, HTML file contain ng-app="myApp" and ng-controller="myController" inside div element and include one myApp.js file. myApp.js file contains all application module definition and controller. myApp is passed as parameter in angular module function and define one variable "app" for access controller. In example myApp property is passed in ng-app="myApp" and myControl is passed in ng-controller="myControll".
Output
Math 60

We can use controller without module. Application does not have module name and controller function controls all properties.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app=" "  ng-controller="myCtrl">
{{ subject +  " "  + marks }}
</div>
<script>
function  myCtrl($scope) {
    $scope.subject = "Physics";
    $scope.marks = "70";
}
</script>
</body>
</html>
Output
Physics 70

In this example no need to add any myApp.js file for module definition. Ng-app = "" will be blank and no need to define module name inside HTML controller. myCtrl pass in ng-controller and access all module definition. And $scope is passed as first argument to controller during its constructor definition. The $scope.subject and $scope.marks are the models which are used in the HTML page.

AngularJS: HTML DOM

In AngularJS, all directives are used to bind application data to the attributes of HTML DOM elements. 4 types of directives are used to bind application data.

1. ng-disabled - Disables a given control.
2. ng-show - Shows a given control.
3. ng-hide - Hides a given control.
4. ng-click - Represents AngularJS click event.

1 - ng-disabled Directive

In AngularJS, the ng-disabled directive are disabled attribute of HTML element. In application, add ng-disabled attribute to an HTML button and pass it a model.
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app=" "  ng-init="mySwitch=true">
  <p><button ng-disabled="mySwitch">Click Me!</button></p>
  <p><input type="checkbox" ng-model="mySwitch"/>Button</p>  
 </div> 
</body>
</html>
In Example the ng-disabled directive binds the application data mySwitch to the HTML button's disabled attribute. The ng-model directive binds the value of the HTML checkbox element to the value of mySwitch. If the value of mySwitch evaluates to true, the button will be disabled and the value of mySwitch evaluates to false, the button will we enabled.

2 - ng-show Directive

In AngularJS, the ng-show directive shows or hides an HTML element. In ng-show directives pass two type of attributes true and false. If pass true, element in ng-show directives element will be visible and pass false attribute in ng-show directives, element will be hide.
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<div ng-show="true">I am visible element.</div>
<div ng-show="false">I am not visible element.</div>
</div> 
</body>
</html>

3 - ng-hide Directive

In AngularJS, the ng-hide directive shows or hides an HTML element.
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="">
     <div ng-hide="true">I am not visible.</div>
<div ng-hide="false">I am visible.</div>
</div> 
</body>
</html> 
In ng-hide directives pass two type attribute true and false. If pass true, element in ng-hide directives element will be visible and pass false attribute in ng-hide directives, element will hide.

4 - ng-click Directive

Add ng-click attribute to an HTML button and update a model.
<html>
<head>
<title>Concretepage</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body>
<div ng-app="">
  <p>Total click: {{ clickCounter }}</p>
   <button ng-click="clickCounter = clickCounter + 1">Click Me!</button>
</div>
</body>
</html> 
Ng-click directives is added inside button element and it changes element model. In ng-click directives pass clickCounter and per click a number is bound in <P> element with {{} clickCounter }.







©2024 concretepage.com | Privacy Policy | Contact Us