What is the difference between the $parse, $interpolate and $compile services?

What is the difference between $parse, $interpolate and $compile services? For me they all do the same thing: take template and compile it to template-function.

Those are all examples of services that aid in AngularJS view rendering (although $parse and $interpolate could be used outside of this domain). To illustrate what is the role of each service let's take example of this piece of HTML:

var imgHtml = '<img ng-src="/path/{{name}}.{{extension}}">'

and values on the scope:

$scope.name = 'image';
$scope.extension = 'jpg';

Given this markup here is what each service brings to the table:

• $compile - it can take the whole markup and turn it into a linking function that, when executed against a certain scope will turn a piece of HTML text into dynamic, live DOM with all the directives (here: ng-src) reacting to model changes. One would invoke it as follows: $compile(imgHtml)($scope) and would get a DOM element with all the DOM event bounds as a result. $compile is making use of $interpolate (among other things) to do its job.
• $interpolate knows how to process a string with embedded interpolation expressions, ex.: /path/{{name}}.{{extension}}. In other words it can take a string with interpolation expressions, a scope and turn it into the resulting text. One can think of the $interpolation service as a very simple, string-based template language. Given the above example one would use this service like: $interpolate("/path/{{name}}.{{extension}}")($scope) to get the path/image.jpg string as a result.
• $parse is used by $interpolate to evaluate individual expressions (name, extension) against a scope. It can be used to both read and set values for a given expression. For example, to evaluate the name expression one would do: $parse('name')($scope) to get the "image" value. To set the value one would do: $parse('name').assign($scope, 'image2')

All those services are working together to provide a live UI in AngularJS. But they operate on different levels:

• $parse is concerned with individual expressions only (name, extension). It is a read-write service.
• $interpolate is read only and is concerned with strings containing multiple expressions (/path/{{name}}.{{extension}})
• $compile is at the heart of AngularJS machinery and can turn HTML strings (with directives and interpolation expressions) into live DOM.

$interpolate-->

Let us say you have two variables assigned to $scope object in the controller,

$scope.a = 2;
$scope.b = 3;

var f = $interpolate("Result is : {{a*b}}");
var result = f($scope);
console.log(result);   --->'Result is 6'

This means that $interpolate can take the string which has one or more angular expressions.

Now $parse:

var f1 = $parse("a*b");
var result1 = f1($scope);
console.log(result1);   ----> '6'

**So $interpolate has the capability to evaluate a string with angular expressions mixed up in the string against the scope to get the result**.


Another important difference between $interpolate and $parse,$eval is:

**$interpolate has the capability to work with strings containing filters along with angular expressions.**

This feature is not accessible in $eval , $parse.

console.log($interpolate("Result is : {{a*b | currency : 'USD$'}}")($scope));

---> 'Result is USD $6.00'

$interpolate does not have the write access to the $scope variables as we have in $eval and $parse

$parse , $interpolate --->needs to be injected but $eval need not be injected in the controller or where it is used

$parse , $interpolate give the function which can be evaluated against any context but $eval is always evaluated against $scope.

$eval and $interpolate behind the scenes uses $parse only.

Here is the cute explanation.

var img = img/{{name}}.{{extension}}

$parse - > (name,extension) = > vimal , .jpg
$interpolate -> use angular $parse and convert into string -> img/vimal.jpg
$compile -> can turn html string img/vimal.jpg into live DOM so new img tag will be added inside our DOM with all prototype that a img tag have.