AngularJS Interpolation

Interpolation markup with embedded expressions will provide data-binding to text nodes and attribute values.
The AngularJS allows the user to manually run the template compilation.
Interpolation allows us to live update a string of text based upon conditions of a scope, for instance.
To run an interpolation on a string template, we need to inject the $interpolate service in our application.
The $interpolate service is used to compile a string with markup into an interpolation function.
The $interpolate service is used by the HTML $compiles service for data binding.
The compiler adds the $watch method for watches the changes in the string.
If we want to use different beginning and ending symbols in our application for binding the string, we can modify them by configuring the $interpolateProvider.
The default symbol of expression is {{ (open curly braces) and }} (closing curly braces).
To modify the beginning string, we can set the starting symbol with the startSymbol() method.
To modify the ending string, we can set the ending symbol with the endSymbol() method.

Example for interpolation:

<a ng-href="img/{{username}}.jpg">Hello {{username}}!</a>

Methods of Interpolation in AngularJS:

Methods	Description
startSymbol()	This method is used the symbol to denote the start of expression in the interpolated string. Default to {{.
endSymbol()	This method is used the symbol to denote the end of expression in the interpolated string. Default to }}.

Syntax for Interpolation in AngularJS:

Syntax for $interpolate service

$interpolate (text, [mustHaveExpression], [trustedContext], [allOrNothing]);

Parameter value for $interpolate Service in AngularJS:

Value	Type	Description
text	string	The text with markup to interpolate.
mustHaveExpression(optional)	boolean	If set to true, then the interpolation string must have embedded expression in order to return an interpolation function. String with no embedded expression will return null for the interpolation function.
trustedContext(optional)	string	When provided, the returned function passes the interpolated result through $sce.getTrusted(interpolatedResult, trustedContext) before returning it.
allOrNothing(optional)	boolean	if true then the returned function returns undefined unless all embedded expressions evaluate to a value other than undefined.

Syntax for $interpolateProvider

app.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol([value]);
  $interpolateProvider.endSymbol([value]);
});

Parameter value for $interpolateProvider in AngularJS:

Value	Type	Description
value (optional)	string	New value to set the starting symbol to.
value (optional)	string	New value to set the ending symbol to.

Sample code for Interpolation with $interpolateProvider in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
    </head>
    <body>
        <h2>Interpolation in AngularJS Tutorials</h2>
        <div ng-app="myApp" ng-controller="myCtrl" >
            <h4>-msg-</h4>
        </div>
        <script>
            var app= angular.module('myApp', [])
            app.config(function($interpolateProvider) {
                $interpolateProvider.startSymbol('-');
                $interpolateProvider.endSymbol('-');
            });   
            app.controller("myCtrl",["$scope", function($scope){
                 $scope.msg= "Welcome To AngularJS Tutorials";
            }]);                    
        </script>
    </body>
</html>

$interpolateProvider:

$interpolateProvider configuration of Application Module.

 var app= angular.module('myApp', [])
 app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('-');
    $interpolateProvider.endSymbol('-');
 });

Code Explanation for $interpolateProvider in AngularJS:

Code Explanation for AngularJS Interpolation

The AngularJS application is defined by