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

Question

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.

Tootsie

Answer 1

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.

Windburn

Nicely explained. Voted Up! :) – Mulholland

Nice. Can you please provide example usages and results for each of them? It's still not 100% clear to me and i think that would help a lot. Thanks! – Crusted

Excellent indeed. Here you can find a few more examples of real life usage (and it's a good simple article about speeding up Angular as well): speeding-up-angular-js-with-simple-optimizations "For example, instead of rendering a global navigation using ng-repeat, we could create our own navigation using the $interpolate provider to render our template against an Object and convert it into DOM nodes." – Anethole

Great explanation. I have been searching every where what is actually $interpolate in AnjularJS and finally i got a compact and informative answer. – Monaghan

Example has been used so effectively to explain all three service objects. We need more of these kind of clear and basic explanations in various areas of angular js to make it more approachable to beginners. – Gaffer

Nice explanation. Simple and very easy to understand. If you explain it with a fiddle example then it will become more good. Thank you. – Ramin

very well explained!! – Gilliland

Very Nice Explained.. but i want know if anyone could tell that can we use all three services manually? if yes then how ? – Herbivore

Answer 2

$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.

Pedestal

Answer 3

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.

Qnp