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.
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.
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>
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.
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>
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 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>
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 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>