AngularJs expression with number and string

Angular JS expression and ng-bind directive

AngularJs Expression uses to bind data with HTML. We can write angualarJS expression inside braces {{ }} or we can use ng-bind directive.

In this tutorial, I am going to show you :

  1. Angular JS simple expression

  2. Angular JS ng-init directive

  3. Angular JS ng-bind directive

  4. Angular JS expression with number

  5. Angular JS expression with string

Angular JS simple expression

{{5+2}} = 7


<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app>
Simple Expression sum example : {{5+2}}
</body>
</html>

Angular JS ng-init directive

ng-init is to assign a value to avariable we can display that value using expression {{}} or ng-bind directive.


<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app ng-init="name='CodeBun'">
{{name}}
</body>
</html>

Angular JS ng-bind directive

ng-bind is an alternative of expression {{}}. Let’s see how to use ng-init directive.

What is the diffrence between ng-bind direcitve and expression{{}} link


<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app ng-init="name='CodeBun'">
<p ng-bind="name"></p>
</body>
</html>

AngularJS expression with number


<body ng-app ng-init="a=15;b=2">
<p>{{a*b}}</p>
</body>

AngularJS expression with string


<body ng-app ng-init="s1= 'AngularJS ';s2='with Codebun'">
<p>{{s1+s2}}</p>
</body>

Add a Comment

Your email address will not be published. Required fields are marked *

six + five =