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

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.