Qual è la differenza tra i servizi $ parse, $ interpolate e $ compile?

Qual è la differenza tra $parse, $interpolatee $compileservizi? Per me fanno tutti la stessa cosa: prendono template e compilarlo in template-function.

Questi sono tutti esempi di servizi che aiutano nel rendering della vista di AngularJS (anche se $parsee $interpolatepotrebbero essere utilizzati al di fuori di questo dominio). Per illustrare qual è il ruolo di ciascun servizio, prendiamo un esempio di questo pezzo di HTML:

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

e valori nell'ambito:

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

Dato questo markup, ecco cosa porta ogni servizio in tavola:

• $compile- può prendere l'intero markup e trasformarlo in una funzione di collegamento che, se eseguito in un determinato ambito, trasformerà un pezzo di testo HTML in dinamico, DOM attivo con tutte le direttive (qui ng-src:) che reagiscono alle modifiche del modello. Uno lo invocherebbe come segue: $ compile (imgHtml) ($ scope) e otterrebbe di conseguenza un elemento DOM con tutti i limiti di evento DOM. $compilesta usando $interpolate(tra le altre cose) per fare il suo lavoro.
• $interpolatesa come elaborare una stringa con espressioni di interpolazione incorporate, ad es /path/{{name}}.{{extension}}. : . In altre parole, può prendere una stringa con espressioni di interpolazione, un ambito e trasformarla nel testo risultante. Si può pensare al $interpolationservizio come a un linguaggio modello molto semplice basato su stringhe. Dato l'esempio sopra si userebbe questo servizio come: $interpolate("/path/{{name}}.{{extension}}")($scope)per ottenere la path/image.jpgstringa come risultato.
• $parseviene utilizzato $interpolateper valutare singole espressioni ( name, extension) rispetto a un ambito. Può essere utilizzato sia per leggere che per impostare valori per una determinata espressione. Ad esempio, per valutare l' nameespressione si dovrebbe fare: $parse('name')($scope)per ottenere il valore "immagine". Per impostare il valore si dovrebbe fare:$parse('name').assign($scope, 'image2')

Tutti questi servizi stanno lavorando insieme per fornire un'interfaccia utente live in AngularJS. Ma operano su diversi livelli:

• $parseriguarda solo le singole espressioni ( name, extension). È un servizio di lettura / scrittura.
• $interpolateè di sola lettura e riguarda stringhe contenenti espressioni multiple ( /path/{{name}}.{{extension}})
• $compile è al centro dei macchinari di AngularJS e può trasformare stringhe HTML (con direttive ed espressioni di interpolazione) in DOM live.

$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 non ha accesso in scrittura alle variabili $ scope come in $ eval e $ parse

$ parse, $ interpolate ---> deve essere iniettato ma $ eval non deve essere iniettato nel controller o dove viene utilizzato

$ parse, $ interpolate danno la funzione che può essere valutata in qualsiasi contesto ma $ eval viene sempre valutato in base a $ scope.

$ eval e $ interpolate dietro le quinte usano solo $ parse.

Ecco la bella spiegazione.

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.