Introduction

Introduction

Firstly, we need to download the AngularJS from https://angularjs.org. Also, you can give online link in your HTML page as, given below-

  1. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
What is ngApp?

Use auto-bootstrap for an AngularJS Application.

This is a root element of an Application.

What is ng-init ?

This directive allows you to evaluate an expression in the current scope. It does not create a new scope.

Example
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <meta name="viewport" content="width=device-width" />
  6. <title>Operators in AngularJS</title>
  7. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  8. </head>
  10. <body>
  11. <div ng-app="" ng-init="myArray=[100,350,200,250,540,5,6]">
  12. <p>The third element in array is : <span style="color:red">{{ myArray[2] }}</span></p>
  13. <hr />
  14. <p>Addition operator :<span style="color:red"> {{ myArray[2] + myArray[2]}}</span></p>
  15. <hr />
  16. <p>Subsraction operator :<span style="color:red"> {{ myArray[4] - myArray[0]}}</span></p>
  17. <hr />
  18. <p>Multiplication operator :<span style="color:red"> {{ myArray[5] * myArray[6]}}</span></p>
  19. <hr />
  20. <p>Division operator :<span style="color:red"> {{ myArray[2] / myArray[0]}}</span></p>
  21. <hr />
  22. <p>Modulus operator :<span style="color:red"> {{ myArray[6] % myArray[5]}}</span></p>
  23. <hr />
  24. <p>Equal to operator :<span style="color:red"> {{ myArray[2]==myArray[2] }}</span></p>
  25. <hr />
  26. <p>Equal value and equal type operator :<span style="color:red"> {{ myArray[2] === myArray[2]}}</span></p>
  27. <hr />
  28. <p>Not Equal to operator :<span style="color:red"> {{ myArray[6] != myArray[5]}}</span></p>
  29. <hr />
  30. <p>Greater than operator : <span style="color:red">{{ myArray[6] > myArray[5]}}</span></p>
  31. <hr />
  32. <p>Less than operator :<span style="color:red"> {{ myArray[6] < myArray[5]}}</span></p>
  33. <hr />
  34. <p>Greater than or equal to operator : <span style="color:red">{{ myArray[6] >= myArray[5]}}</span></p>
  35. <hr />
  36. <p>Less than or equal to operator : <span style="color:red">{{ myArray[6] <= myArray[5]}}</span></p>
  37. <hr />
  38. <p>Ternary operator :<span style="color:red"> {{ (myArray[6] > myArray[5]) ? "6 is greater than 5":"5 is less than 6"}}</span></p>
  39. <hr />
  40. <p> && operator : <span style="color:red">{{ myArray[5] < myArray[6] && myArray[6] > myArray[5]}}</span></p>
  41. <hr />
  42. <p> || operator :<span style="color:red"> {{ myArray[5] === myArray[6] || myArray[6] === myArray[5]}}</span></p>
  43. <hr />
  44. <p> ! operator :<span style="color:red"> {{!( myArray[5] === myArray[6])}}</span></p>
  45. </div>
  46. </body>
  48. </html>
Output
Output
Summary

This article will help fresher candidates to understand the operators in AngularJS.