Qual é a diferença entre os serviços $ parse, $ interpolate e $ compile?

Qual é a diferença entre $parse, $interpolatee $compileserviços? Para mim, todos fazem a mesma coisa: pegue o modelo e compile-o para a função modelo.

Todos esses são exemplos de serviços que auxiliam na renderização de exibição do AngularJS (embora $parsee $interpolatepossam ser usados ​​fora deste domínio). Para ilustrar qual é o papel de cada serviço, vamos dar um exemplo desta parte do HTML:

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

e valores no escopo:

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

Dada essa marcação, aqui está o que cada serviço traz para a tabela:

• $compile- pode pegar toda a marcação e transformá-la em uma função de vinculação que, quando executada em um determinado escopo, transformará um pedaço de texto HTML em DOM dinâmico e dinâmico, com todas as diretivas (aqui ng-src:) reagindo às alterações do modelo. Alguém poderia invocá-lo da seguinte forma: $ compile (imgHtml) ($ scope) e obteria um elemento DOM com todos os limites do evento DOM como resultado. $compileestá fazendo uso $interpolate(entre outras coisas) para fazer seu trabalho.
• $interpolatesabe como processar uma string com expressões de interpolação incorporadas, ex /path/{{name}}.{{extension}}. : . Em outras palavras, ele pode pegar uma string com expressões de interpolação, um escopo e transformá-la no texto resultante. Pode-se pensar no $interpolationserviço como uma linguagem de modelos muito simples e baseada em strings. Dado o exemplo acima, seria usado este serviço como: $interpolate("/path/{{name}}.{{extension}}")($scope)para obter a path/image.jpgstring como resultado.
• $parseé usado $interpolatepara avaliar expressões individuais ( name, extension) em relação a um escopo. Pode ser usado para ler e definir valores para uma determinada expressão. Por exemplo, para avaliar a nameexpressão que se faria: $parse('name')($scope)obter o valor "imagem". Para definir o valor que se faria:$parse('name').assign($scope, 'image2')

Todos esses serviços estão trabalhando juntos para fornecer uma interface do usuário ao vivo no AngularJS. Mas eles operam em diferentes níveis:

• $parsese preocupa apenas com expressões individuais ( name, extension). É um serviço de leitura e gravação.
• $interpolateé somente leitura e se preocupa com cadeias que contêm várias expressões ( /path/{{name}}.{{extension}})
• $compile está no coração do mecanismo AngularJS e pode transformar seqüências de caracteres HTML (com diretivas e expressões de interpolação) em DOM ao vivo.

$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 não tem acesso de gravação às variáveis ​​$ scope, como temos em $ eval e $ parse

$ parse, $ interpolate ---> precisam ser injetados, mas $ eval não precisa ser injetado no controlador ou onde é usado

$ parse, $ interpolate fornecem a função que pode ser avaliada em qualquer contexto, mas $ eval é sempre avaliado em relação ao $ scope.

$ eval e $ interpolam nos bastidores usam apenas $ parse.

Aqui está a explicação fofa.

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.