Expression AngularJs

Expression allows us to bind model object in view without taking help of directives. They are useful for accessing scope models and functions.

An expression is a simple piece of code that will be evaluated by the Angularjs framework and can be written between double curly brackets, for example, {{ Studen.name }}. This way of writing expressions is known as interpolation and allows you to easily interact with anything from the scope and its one way data binding from model object to view.
We can tell Angular to treat a region of the page as an expression using the {{ }} handlebars style syntax. Anything between the curly braces will be compiled, like so:
    {{ ‘Hello’ + ‘World’ }}
This will output: HelloWorld

The double curly bracket {{}} called an expression, which is composed of one or more data models. The main purpose of an expression is binding the model data to the view unidirectional; that is, syncing from model to view. You can also perform operations like multiplication, division etc. on the models, as shown in the example below. AngularJS evaluates this expression and replaces it with the calculated value. The beautiful thing is that the expression is re-evaluated each time any of the data models it depends on changes. In our case, whenever a user types anything into input fields the data-models are updated. As a result, the expression {{salary*percentage*0.01}} is re-evaluated automatically which, in turn, updates the DOM for

Example 1: Adding two number
<!DOCTYPE html>
<html ng-app>
<head>
  <title>Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app=""> <h1>Calculate sum</h1>
  <input type="number" ng-model="num1">
  <input type="number" ng-model="num2">
  <p>Simple Angular Sum: {{num1 +  num2}}</p>
</div>
</body>
</html>
Example 2: Angular expressions – Text vs. Number 
The example demonstrates how Angular expressions are evaluated when using type=”text” and type=”number” for the input element.
Controller
 var app = angular.module('app', []);
 app.controller('ctrl', function($scope) {     
 $scope.textInput = { value: '5' };         
 $scope.numberInput = { value: 5 }; 
 });

View
<div ng-app="app" ng-controller="ctrl">    
 <input type="text" ng-model="textInput.value">    
 {{ textInput.value + 2 }}    
 <input type="number" ng-model="numberInput.value">    
 {{ numberInput.value + 2 }} 
</div>
When using + in an expression bound to text input, the operator will concatenate the strings (first example), displaying 52 on the screen. When using + in an expression bound to number input, the operator return the sum of the numbers (second example), displaying 7 on the screen.
Using numbers
<p>Expense on item : {{cost * quantity}}</p>
Using strings
<p>Hello {{employee.firstname + ” ” + employee.lastname}}!</p>
Using object
<p>Id : {{employee.id}}</p>
Using array
<p>Stock : {{stocks[3]}}</p>
Besides exhibiting the available objects in the scope, the expressions also give us the ability to perform some calculations such as {{2+2}}. However, if you put aside the similarities with JavaScript’s eval() function, which is also used to evaluate expressions, AngularJS doesn’t use the directive explicitly.
The expressions also forgive the undefined and null values, without displaying any error; instead, it doesn’t show anything.
<html ng-app="myApp">
<html>
<script src="js/angular.min.js"></script>
<body ng-controller="myCtrl">
<div >
  First Name : {{ student.firstName }}<br/>
  Second Name : {{ student.secondName }} <br/>
  Id : {{ student.id }}<br/>
  Full Name : {{ student.fullName() }}
  OR <br/>
  Full Name : {{ student.firstName + " " + student.secondName }}
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope){
    $scope.student = {
      firstName : "Arjun",
      secondName : "Smith",
      id : 110,
      fullName : function(){
        return $scope.student.firstName + " " + $scope.student.secondName;
      }
    };
  });
</script>
</body>
</html>