Quelle est la différence entre les services $ parse, $ interpolate et $ compile?

Quelle est la différence entre $parse, $interpolateet les $compileservices? Pour moi, ils font tous la même chose: prendre un template et le compiler en template-function.

Ce sont tous des exemples de services qui facilitent le rendu des vues AngularJS (bien que $parseet $interpolatepuissent être utilisés en dehors de ce domaine). Pour illustrer le rôle de chaque service, prenons l'exemple de ce morceau de HTML:

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

et valeurs sur la portée:

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

Compte tenu de ce balisage, voici ce que chaque service apporte à la table:

• $compile- il peut prendre tout le balisage et le transformer en une fonction de liaison qui, lorsqu'elle est exécutée sur une certaine portée, transformera un morceau de texte HTML en DOM dynamique et dynamique avec toutes les directives (ici ng-src:) réagissant aux changements de modèle. On l'appellerait comme suit: $ compile (imgHtml) ($ scope) et obtiendrait un élément DOM avec toutes les limites d'événement DOM en conséquence. $compileutilise $interpolate(entre autres) pour faire son travail.
• $interpolatesait traiter une chaîne avec des expressions d'interpolation imbriquées, ex /path/{{name}}.{{extension}}. : . En d'autres termes, il peut prendre une chaîne avec des expressions d'interpolation, une portée et la transformer en texte résultant. On peut considérer le $interpolationservice comme un langage de modèle très simple basé sur des chaînes. Compte tenu de l'exemple ci-dessus, on utiliserait ce service comme: $interpolate("/path/{{name}}.{{extension}}")($scope)pour obtenir lepath/image.jpg chaîne en conséquence.
• $parseest utilisé par $interpolatepour évaluer des expressions individuelles ( name, extension) par rapport à une portée. Il peut être utilisé à la fois pour lire et définir des valeurs pour une expression donnée. Par exemple, pour évaluer l' nameexpression, on ferait: $parse('name')($scope)pour obtenir la valeur "image". Pour définir la valeur, on ferait:$parse('name').assign($scope, 'image2')

Tous ces services travaillent ensemble pour fournir une interface utilisateur en direct dans AngularJS. Mais ils opèrent à différents niveaux:

• $parsene concerne que les expressions individuelles ( name, extension). C'est un service de lecture-écriture.
• $interpolateest en lecture seule et concerne les chaînes contenant plusieurs expressions ( /path/{{name}}.{{extension}})
• $compile est au cœur des machines AngularJS et peut transformer des chaînes HTML (avec des directives et des expressions d'interpolation) en DOM en direct.

$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'a pas l'accès en écriture aux variables $ scope comme nous l'avons dans $ eval et $ parse

$ parse, $ interpolate ---> doit être injecté mais $ eval n'a pas besoin d'être injecté dans le contrôleur ou là où il est utilisé

$ parse, $ interpolate donnent la fonction qui peut être évaluée par rapport à n'importe quel contexte mais $ eval est toujours évalué par rapport à $ scope.

$ eval et $ interpolate dans les coulisses utilise uniquement $ parse.

Voici l'explication mignonne.

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.