AngularJS with HTML DOM

In AngularJS it is possible to bind application data to an attribute of HTML DOM element.

AngularJS with HTML DOM

No.NameDescription
1ng-disabledIt is used to disable a given control
2ng-showIt is used to show a given control.
3ng-hideIt is used to hide a given control.
4ng-clickIt is used to represent an AngularJS click event.

AngularJS HTML DOM : Example

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="controller1">
<p>Toggle check buttons to check the status..</p>
<table border="1">
   <tr>
      <td>Disable Button</td>
      <td>Show Button</td>
      <td>Hide Button</td>
   </tr>
   <tr>
      <td><input type="checkbox" ng-model="isChecked1"></td>
      <td><input type="checkbox" ng-model="isChecked2"></td>
      <td><input type="checkbox" ng-model="isChecked3"></td>
   </tr>
   <tr>
      <td><button ng-disabled="isChecked1">Disable</button></td>
      <td><button ng-show="isChecked2">Show</button></td>
      <td><button ng-hide="isChecked3">Hide</button></td>
   </tr>
   <tr>
      <td>{{isChecked1}}</td>
      <td>{{isChecked2}}</td>
      <td>{{isChecked3}}</td>
   </tr>
</table>
</div>
<script>
function controller1($scope) {
   $scope.isChecked1 = true;
   $scope.isChecked2 = true;
   $scope.isChecked3 = true;
}
</script>
</body>
</html>

Output :
AngularJS HTML DOM

Explanation

In the AngularJS we can manage the attribute of an element using the AngularJS directives.

ng-disabled directive

Consider the below code of the button control in HTML -

<button ng-disabled="isChecked1">Disable</button>

In this case ng-disabled attribute will decide whether to disable the control or not depending on the value of isChecked1 variable

We can toggle the value of the isChecked1 on the basis of checkbx check value. Using ng-model directive we can bind the value to variable

<input type="checkbox" ng-model="isChecked1">

ng-show directive

The ng-show directive shows or hides the given HTML element based on the expression provided to the ng-show attribute

ng-hide directive

Add ng-hide attribute to a HTML button and pass it a model. Bind the model to an checkbox and see the variation.

ng-click directive

Add ng-click attribute to a HTML button and update a model. Bind the model to html and see the variation.

November 9, 2024 By Angular JS Tutorials 0 Comments Read more...

AngularJS Tables

In the previous chapter we have learnt about the AngularJS controllers and in this chapter we will be learning about AngularJS filters.

AngularJS Tables

ng-repeatdirective is used to repeat the elements from array and to display elements of array in HTML tables

<tr ng-repeat="student in students">
   <td>{{ student.name  }}</td>
   <td>{{ student.marks }}</td>
</tr>

below are meaning of some of the elements -

VariableExplanation
studentsName of array
studentArray element used in each iteration
student.nameAccess name of student from array element
student.marksAccess marks of student from array element

AngularJS Tables : Examples

AngularJS Tables #1 : Simple Table Example

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="studentController">
<table border="1">
   <tr>
      <th>Name</th>
      <th>Marks</th>
   </tr>
   <tr ng-repeat="student in students">
      <td>{{ student.name }}</td>
      <td>{{ student.marks }}</td>
   </tr>
</table>
</div>
<script>
function studentController($scope) {
    $scope.students = [
         {name:'Suraj',marks:89},
         {name:'Pooja',marks:81},
         {name:'Rajes',marks:69},
         {name:'Omkar',marks:61},
         {name:'Raman',marks:93},
         {name:'Amana',marks:80},
         {name:'Parth',marks:85}
      ]
}
</script>
</body>
</html>

Output :

Try it yourself

November 7, 2024 By Angular JS Tutorials 0 Comments Read more...

AngularJS Filters

In the previous chapter we have learnt about the AngularJS controllers and in this chapter we will be learning about AngularJS filters.

AngularJS Filters

  1. In order to transform the data used in the application we need to use filters.
  2. AngularJS filters are used to change or modify the data used in application.
  3. AngularJS filters are represented using the pipe character.
  4. AngularJS filters can be used along with the AngularJS expressions.

Below are some of the commonly used filters -

S.No.NameDescription
1uppercaseUsed to convert a text to upper case
2lowercaseUsed to convert a text to lower case
3currencyUsed to format text in a currency format.
4filterUsed to filter the array to a subset based on provided criteria.
5orderbyUsed to order an array based on provided criteria.

Examples of AngularJS filters

AngularJS filter #1 : uppercase

Filter is used to transform the textual content to uppercase format.

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="fname='Pritesh';lname='Taral'">
   <p>First name is {{ fname | uppercase }}</p>
   <p>Last name is  {{ lname | uppercase }}</p>
</div>
</body>
</html>

Output :

First name is PRITESH
Last name is TARAL

AngularJS filter #2 : lowercase

Filter is used to transform the textual content to lowercase format.

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="fname='Pritesh';lname='Taral'">
   <p>First name is {{ fname | lowercase }}</p>
   <p>Last name is  {{ lname | lowercase }}</p>
</div>
</body>
</html>

Output :

First name is pritesh
Last name is taral

AngularJS filter #3 : currency

Filter is used to transform the numeric values into currency format.

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="priceController">
<p>Quantity   : <input type="number" ng-model="qty"></p>
<p>Unit Price : <input type="number" ng-model="price"></p>
<p>Total = {{ (qty * price) | currency }}</p>
</div>
<script>
function priceController($scope) {
    $scope.qty   = 5;
    $scope.price = 10;
}
</script>
</body>
</html>

Output :
currency angularjs filter

AngularJS filter #4 : orderby

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="studentController">
<ul>
   <li ng-repeat="student in students | orderBy:'marks'">
      {{ student.name + ' Marks : ' + student.marks }}
   </li>
</ul>
</div>
<script>
function studentController($scope) {
    $scope.students = [
         {name:'Suraj',marks:89},
         {name:'Pooja',marks:81},
         {name:'Rajes',marks:69},
         {name:'Omkar',marks:61},
         {name:'Raman',marks:93},
         {name:'Amana',marks:80},
         {name:'Parth',marks:85}
      ]
}
</script>
</body>
</html>

Output :
AngularJS filter orderby

In this example we have created an array of the students like -

$scope.students = [
   {name:'Suraj',marks:89},
   {name:'Pooja',marks:81},
   {name:'Rajes',marks:69},
   {name:'Omkar',marks:61},
   {name:'Raman',marks:93},
   {name:'Amana',marks:80},
   {name:'Parth',marks:85}
]

In order to sort all these array elements we can use orderby filter.

<li ng-repeat="student in students | orderBy:'marks'">
    {{ student.name + ' Marks : ' + student.marks }}
</li>

AngularJS filter #5 : filter

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="studentController">
<p><input type="text" ng-model="sname"></p>
<p ng-repeat="student in students | filter: sname | orderBy:'marks'">
  {{ student.name + ' Marks : ' + student.marks }}
</p>
</div>
<script>
function studentController($scope) {
    $scope.students = [
         {name:'Suraj',marks:89},
         {name:'Pooja',marks:81},
         {name:'Rajes',marks:69},
         {name:'Omkar',marks:61},
         {name:'Raman',marks:93},
         {name:'Amana',marks:80},
         {name:'Parth',marks:85}
      ]
}
</script>
</body>
</html>

Output :
AngularJS Filter filters

November 7, 2024 By Angular JS Tutorials 0 Comments Read more...

AngularJS controllers

In the previous chapters we have learnt about the AngularJS expressions and AngularJS directives. In this chapter we will be learning about the controllers in AngularJS

AngularJS Controllers Basics:

  1. ng-controller directive is used to define the controller in AngularJS.
  2. AngularJS controllers are used to control the flow of data in application.
  3. AngularJS controller is a JavaScript object having attributes and functions.
  4. AngularJS controller accepts $scope as a parameter.
  5. $scope parameter is used to refer the application or module controlled by controller.

Syntax of controller

We have declared a controller using the ng-controller directive

<div ng-app="" ng-controller="exampleContoller">
...
</div>

Definition of controller is written inside the script code block as shown below -

<script>
function exampleContoller($scope) {
      $scope.str1 = "123",
      $scope.str2 = "ABC",
      $scope.concatString = function() {
         return $scope.str1 + " " + $scope.str2;
      }
}
</script>

Explanation

In the above definition of AngularJS controller we have written following things -

  1. We have defined the AngularJS application using ng-app directive.
  2. Our AngularJS application runs inside a div tag.
  3. ng-controller directive is used for naming the AngularJS controller object.
  4. AngularJS controller is nothing but a standard JavaScript object constructor having same name as that of controller. i.e exampleContoller
  5. AngularJS will invoke exampleContoller function with a $scope object as parameter
  6. $scope is the application object which is an owner of application variables and functions

In this case we have created two application level properties and one application level method

EntityExplanation
str1Application level property
str2Application level property
concatStringApplication level method
$scopeApplication level object

Example

Example #1 : AngularJS controller

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="exampleContoller">
  <p>Enter String 1 : <input type="text" ng-model="str1"></p>
  <p>Enter String 2 : <input type="text" ng-model="str2"></p>
</div>
<script>
function exampleContoller($scope) {
      $scope.str1 = "123",
      $scope.str2 = "ABC"
}
</script>
</body>
</html>

Output :
angularjs controller example 1

Example #2 : AngularJS controller (Method)

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="exampleContoller">
<p>Enter String 1 : <input type="text" ng-model="str1"></p>
<p>Enter String 2 : <input type="text" ng-model="str2"></p>
<p>Result String : {{concatString()}}</p>
</div>
<script>
function exampleContoller($scope) {
      $scope.str1 = "123",
      $scope.str2 = "ABC",
      $scope.concatString = function() {
         return $scope.str1 + " " + $scope.str2;
      }
}
</script>
</body>
</html>

Output :
angularjs controller example 2

Example #3 : AngularJS controller (JSON Object)

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="exampleContoller">
<p>Enter String 1 : <input type="text" ng-model="svar.str1"></p>
<p>Enter String 2 : <input type="text" ng-model="svar.str2"></p>
<p>Result String : {{svar.concatString()}}</p>
</div>
<script>
function exampleContoller($scope) {
   $scope.svar = {
      str1: "123",
      str2: "ABC",
      concatString : function() {
         var iObj;
         iObj = $scope.svar;
         return iObj.str1 + " " + iObj.str2;
      }
   };
}
</script>
</body>
</html>

Output :
angularjs controller example 2
Consider the below code for AngularJS controller -

function exampleContoller($scope) {
   $scope.svar = {
      str1: "123",
      str2: "ABC",
      concatString : function() {
         var iObj;
         iObj = $scope.svar;
         return iObj.str1 + " " + iObj.str2;
      }
   };
}

In this case we have defined an application level json object i.e svar, This application level object is again having the attributes and methods.

str1,str2 are attributes of json object while concatString is an method of json object

November 5, 2024 By Angular JS Tutorials 0 Comments Read more...

AngularJS directives

In the previous chapter we have already seen basics of AngularJS and expressions used in AngularJS. This tutorial explains the AngularJS directives in simple and easy way

AngularJS Directives

AngularJS directives are used for extending HTML elements. AngularJS directives usually starts with ng- prefix.

Below is the list of few AngularJS directives -

DirectiveExplanation
ng-appDirective used to start an AngularJS Application
ng-initDirective used to initialize application data
ng-modelDirective used to define a model (i.e variable to be used in AngularJS application)
ng-repeatDirective used to repeat html elements

Examples

AngularJS Directives #1 : ng-app

  1. In each AngularJS application ng-app directive is root element.
  2. ng-app directive is initialized automatically when a web page is loaded.
  3. ng-app directive is used to start an AngularJS application
  4. ng-app directive is used to load various AngularJS modules in an application

Consider the below example -

<body ng-app="">
...
</body>

In this case we have defined a default AngularJS application using ng-app attribute of a body element.

Meaning of above code snippet is that we can include AngularJS syntax anywhere inside the body tag.

<div ng-app="">
...
</div>

We can even define the default AngularJS application inside the div element. In the above example our AngularJS syntax can be recognized inside div element only.

AngularJS Directives #2 : ng-init

In order to initialized the data used inside the AngularJS application ng-init directive is used. Variables used inside AngularJS application are pre-initialized befoe execution of AngularJS application.

Recommanded Article : Initializing values inside AngularJS application

<div  ng-app="" ng-init="student = [{subject:'MAT',marks:'78'},
                                    {subject:'ENT',marks:'98'},
                                    {subject:'HND',marks:'90'}]">
</div>

In the above example, we have initialized an array of students using JSON array

AngularJS Directives #3 : ng-model

Variables or models used in the AngularJS application are defined using ng-model directive. In below example we have we have defined a model named fname & lname.

<div ng-app="">
  <p>Enter first Name: <input type="text" ng-model="fname"></p>
  <p>Enter last  Name: <input type="text" ng-model="lname"></p>
</div>

Example of ng-model directive

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div  ng-app="">
  <p>Enter first Name: <input type="text" ng-model="fname"></p>
  <p>Enter last  Name: <input type="text" ng-model="lname"></p>
  <hr />
  <p>Youu first name : <span ng-bind="fname"></span></p>
  <p>Youu first name : <span ng-bind="lname"></span></p>
</div>
</body>
</html>

AngularJS Bind Expression

AngularJS Directives #4 : ng-repeat

ng-repeat directive repeats html elements for each item in a collection. In below example, we have iterated over array of students.

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div  ng-app="" ng-init="students = [{subject:'MAT',marks:'78'},
                           {subject:'ENT',marks:'98'},
                           {subject:'HND',marks:'90'}]">
   <div id="container">
      <div class="list" ng-repeat="student in students">
         <p>Name of  subject : {{ student.subject }}</p>
         <p>Marks in subject : {{ student.marks }}</p>
      </div>
   </div>                     
</div>
</body>
</html>

Output :

Name of subject : MAT
Marks in subject : 78
Name of subject : ENT
Marks in subject : 98
Name of subject : HND
Marks in subject : 90
November 3, 2024 By Angular JS Tutorials 0 Comments Read more...

AngularJS Expressions

We have already learnt the basics of AngularJS. This tutorial explains the AngularJS expressions in simple way.

AngularJS Expressions

  1. Whenever we write AngularJS Expression then we need to write them in the pair of double curly braces.
{{ expression }}
  1. AngularJS expressions binds data to HTML using ng-bind directive. It will print the output of the expression where expression appears
  2. AngularJS expressions can have literals, operators and variables as operands of the expression

Examples

Example #1 : AngularJS Expressions

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="">
    <p>Expression Ex 1 : {{ 10 + 10 }}</p>
    <p>Expression Ex 2 : {{ 10 - 10 }}</p>
    <p>Expression Ex 3 : {{ 10 * 10 }}</p>
    <p>Expression Ex 4 : {{ 10 / 10 }}</p>
    <p>Expression Ex 5 : {{ 10 % 10 }}</p>
</div>
</body>
</html>

Output :

Expression Ex 1 : 20
Expression Ex 2 : 0
Expression Ex 3 : 100
Expression Ex 4 : 1
Expression Ex 5 : 0

Example #2 : Introducing number and variables

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="num1=10;num2=10">
    <p>Expression Ex 1 : {{ num1 + num2 }}</p>
    <p>Expression Ex 2 : {{ num1 - num2 }}</p>
    <p>Expression Ex 3 : {{ num1 * num2 }}</p>
    <p>Expression Ex 4 : {{ num1 / num2 }}</p>
    <p>Expression Ex 5 : {{ num1 % num2 }}</p>
</div>
</body>
</html>

Output :

Expression Ex 1 : 20
Expression Ex 2 : 0
Expression Ex 3 : 100
Expression Ex 4 : 1
Expression Ex 5 : 0

In this example we have declared the two variables num1 and num2 which are initialized to 10.

Example #3 : String in expression

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="fname='Pritesh';lname='Taral'">
   <p>My name : {{ fname + " " + lname }}</p>
</div>
</body>
</html>

Output :

My name : Pritesh Taral

In order to initialize the variable with string value we need to use string in pair of single quotation mark

Example #4 : Objects in AngularJS expression

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="author={fname:'Pritesh',lname:'Taral'}">
   <p>My First name : {{ author.fname }}</p>
   <p>My Last name  : {{ author.lname }}</p>
</div>
</body>
</html>

Output :

My First name : Pritesh
My Last name : Taral

We have declared the variable of type object and name of variable is author

author = { 
         fname:'Pritesh',
         lname:'Taral'
         }

In order to access the value of object in AngularJS Expressions we can use dot operator

Expression in AngularJSOutput printed
{{ author.fname }}Pritesh
{{ author.lname }}Taral

Example #5 : Array in AngularJS expression

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="marks=[70,75,80,85,90]">
   <p>Marks of student 1 : {{ marks[0] }}</p>
   <p>Marks of student 2 : {{ marks[1] }}</p>
   <p>Marks of student 3 : {{ marks[2] }}</p>
   <p>Marks of student 4 : {{ marks[3] }}</p>
   <p>Marks of student 5 : {{ marks[4] }}</p>
</div>
</body>
</html>

Output :

Marks of student 1 : 70
Marks of student 2 : 75
Marks of student 3 : 80
Marks of student 4 : 85
Marks of student 5 : 90

In this tutorial we have declared an array which is accessed in the AngularJS Expressions using the arrayname and subscript variable

Example #6 : ng-bind directive in AngularJS

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="marks=[70,75,80,85,90]">
   <p>Marks of Student 1 : <span ng-bind="marks[0]"></span></p>
   <p>Marks of Student 2 : <span ng-bind="marks[1]"></span></p>
   <p>Marks of Student 3 : <span ng-bind="marks[2]"></span></p>
   <p>Marks of Student 4 : <span ng-bind="marks[3]"></span></p>
   <p>Marks of Student 5 : <span ng-bind="marks[4]"></span></p>
</div>
</body>
</html>

Output :

Marks of student 1 : 70
Marks of student 2 : 75
Marks of student 3 : 80
Marks of student 4 : 85
Marks of student 5 : 90

Mistakes

While using the AngularJS expressions, some of the novice users may commit some mistake which causes AngularJS to stop working.

  1. Some times novice user may forgot to include the angularjs library file in the webpage.
  2. Some times ng-app directive is missing so browser does not recognise which section is programmed using AngularJS.
  3. Any of the syntax error in the script such as invalid variable name,wrong expression may stop working of complete AngularJS script.
November 2, 2024 By Angular JS Tutorials 0 Comments Read more...

AngularJS Extends HTML

In the previous tutorial we have learnt about setting up environment for AngularJS . In this chapter we will be learning how angularJS is used to extend the HTML markup page using ng-directives.

AngularJS Extends HTML

<!DOCTYPE html>
<html>
<head>
    <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="">
  <p>Enter name of person in below text box - </p>
  <p><input type="text" ng-model="name" value=""></p>
  <p ng-bind="name"></p>
</div>
</body>
</html>

Output :

-

Explanation

DirectiveExplanation
ng-appThis directive defines an AngularJS application
ng-modelThis directive is used to binds the value of HTML controls to an application data
ng-bindThis directive binds application data to the HTML view
July 27, 2024 By Angular JS Tutorials 0 Comments Read more...

AngularJS Environment : Setup

In the last chapter we have learnt about the Angular JS introduction and Basic Example of the Angular JS.

Angular JS Environment Setup :

  1. Angular JS is client side scripting language.
  2. Angular JS is a JavaScript framework.
  3. Angular JS library is written in JavaScript.
  4. Angular JS comes in minified and non minified file we need to simply add it to the page using script tag.

AngularJS in Head Tag :

Consider the following example -

<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS Introduction</title>
    <script src="angular.min.js"></script>
</head>
<body>
    Enter your name :
    <input type="text" ng-model="yourname" />
    <h1>Hello {{ yourname }}</h1>
</body>
</html>

AngularJS in Body Tag :

We have placed the angular js code in the head tag of the page. It is re-commended to put javascript code in the bottom of the page.

<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS Introduction</title>
</head>
<body>
    Enter your name :
    <input type="text" ng-model="yourname" />
    <h1>Hello {{ yourname }}</h1>
	<script src="angular.min.js"></script>	
</body>
</html>

If we include the Angular JS code at the bottom of the body tag then it will improves page loading as HTML loading will not be blocked by scripts loading.

Output :

July 27, 2024 By Angular JS Tutorials 0 Comments Read more...

AngularJS Introduction

What is AngularJS ?

  1. AngularJS is an open-source JavaScript framework
  2. AngularJS is created by Google inc.
  3. AngularJS is based on model–view–controller(MVC) capability
  4. AngularJS is used to create browser based application.
  5. AngularJS is simple and syntax are easy to write.

Example :

<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS Introduction</title>
    <script src="angular.min.js"></script>
</head>
<body>
    Enter your name :
    <input type="text" ng-model="yourname" />
    <h1>Hello {{ yourname }}</h1>
</body>
</html>

Output of Code :


We will be learning the AngularJS in upcoming tutorials. In the next chapter we will learn basic example of Angular JS.

December 17, 2024 By Angular JS Tutorials 0 Comments Read more...