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"; });
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>
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>
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>
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>