- AngularJS Introduction
- AngularJS Environment Setup
- AngularJS MVC
- AngularJS Directives
- AngularJS Expressions
- AngularJS Data Types
- AngularJS Controllers
- AngularJS Models
- AngularJS Scopes
- AngularJS Filters
- AngularJS Services
- AngularJS Service Creation
- AngularJS Tables
- AngularJS Select
- AngularJS DOM
- AngularJS Events
- AngularJS Forms
- AngularJS Validation
- AngularJS API
- AngularJS Modules
- AngularJS Include
- AngularJS Animations
AngularJS Data Types
In the last article we covered AngularJS expressions. We saw how AngularJS evaluates an expression and returns results. In this article we shall study AngularJS data types that are used to store different types of data.
There are four major AngularJS data types.
- Numbers
- Strings
- Arrays
- Objects
In the following sections, we shall see how to declare each of the above data types and how to store values in these data types.
AngularJS Number Variables
Angular JS numbers variables are created by simply storing a number in AngularJS variable. Take a look at the following example to see how AngularJS creates number variables.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="num1=10;num2=3">
Number1 multiplied by Number2: {{ num1 * num2 }}
<p ng-bind="num1 * num2"></p>
</div>
</body>
</html>Download the code Try the code
In the above code, if you look at the “ng-init” directive, you should see that it contains two number type variables num1 and num2. Next, expression as well as “ng-bind” directive is displaying the product of these two variables.
AngularJS String Variables
To declare a string variable in AngularJS, simply assign some value withing quotes to a variable. Take a look at the followin example to see how string variables are declared in AngularJS.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="fname='Eric';lname='Cantona'">
{{fname +" "+lname}}
<p ng-bind="fname +' '+lname"></p>
</div>
</body>
</html>Download the code Try the code
In the above code, the “ng-init” directive initializes two string variables “fname” and “lname”. It is important to note here that to semi-colon separates one variable from the other inside “ng-init”.
AngularJS Arrays
AngularJS arrays store collection of data. It is very easy to declare arrays in AngularJS, have a look at the following example.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="colors=['red','green','blue','yellow']">
<p>The second color in the list is {{ colors[1] }}</p>
<p>The second color in the list is <span ng-bind="colors[1]"></span></p>
</div>
</body>
</html>Download the code Try the code
In the above code, the “ng-init” directive initializes a string array named colors. The array contains names of four colors. Next, the expression and ng-bind directive, both are used to display the second item in the array. However, it is important to note that AngularJS arrays store first item at 0th index.
AngularJS Objects
AngularJS objects are similar to objects in JavaScript. Take a look at the following example to see how to initialize and access objects in AngularJS.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="result={mathematics:'passed',english:'fail'}">
<p>Result for mathematic is : {{ result.mathematics }}</p>
</div>
</body>
</html>Download the code Try the code