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 :
-
Angular JS simple expression
-
Angular JS ng-init directive
-
Angular JS ng-bind directive
-
Angular JS expression with number
-
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 a string
<body ng-app ng-init="s1= 'AngularJS ';s2='with Codebun'">
<p>{{s1+s2}}</p>
</body>
