Яка різниця між службами $ parse, $ interpolate та $ compile?

У чому різниця між $parse, $interpolateі $compileпослуги? Для мене всі вони роблять те саме: беруть шаблон і складають його до шаблону-функції.

Це все приклади служб, які допомагають у наданні перегляду AngularJS (хоча $parseі $interpolateможуть використовуватися поза цим доменом). Щоб проілюструвати, яка роль кожної служби, давайте для прикладу цей фрагмент HTML:

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

та значення в області застосування:

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

Враховуючи цю розмітку, ось що послуга вносить до таблиці:

• $compile- він може зайняти всю розмітку і перетворити її на функцію зв’язку, яка при виконанні на певній області перетворить фрагмент тексту HTML в динамічний, живий DOM з усіма директивами (тут ng-src:), що реагують на зміни моделі. Можна викликати це так: $ compile (imgHtml) ($ obseg) і отримав би DOM елемент із усіма межами події DOM. $compileвикористовує $interpolate(серед іншого), щоб виконувати свою роботу.
• $interpolateзнає, як обробити рядок із вбудованими інтерполяційними виразами, напр /path/{{name}}.{{extension}}.: Іншими словами, він може взяти рядок з інтерполяційними виразами, сферою та перетворити його в отриманий текст. $interpolationСлужбу можна розглядати як дуже просту, строкову мову шаблонів. Враховуючи наведений вище приклад, можна скористатися такою послугою, як: $interpolate("/path/{{name}}.{{extension}}")($scope)отримати path/image.jpgрядок як результат.
• $parseвикористовується $interpolateдля оцінки окремих виразів ( name, extension) проти області. Його можна використовувати як для читання, так і для встановлення значень для заданого виразу. Наприклад, для оцінки nameвиразу, який можна було б зробити: $parse('name')($scope)отримати значення "image". Щоб встановити значення, слід зробити:$parse('name').assign($scope, 'image2')

Всі ці служби працюють разом, щоб забезпечити живий інтерфейс в AngularJS. Але вони працюють на різних рівнях:

• $parseстосується лише окремих виразів ( name, extension). Це послуга читання-запису.
• $interpolateє лише для читання і стосується рядків, що містять декілька виразів ( /path/{{name}}.{{extension}})
• $compile лежить в основі механізму AngularJS і може перетворити рядки HTML (з директивами та інтерполяційними виразами) у пряму DOM.

$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 не має доступу для запису до змінних $ range, як у нас у $ eval та $ parse

$ parse, $ interpolate ---> потрібно вводити, але $ eval не потрібно вводити в контролер або там, де він використовується

$ parse, $ інтерполят дають функцію, яку можна оцінити в будь-якому контексті, але $ eval завжди оцінюється відповідно до $ range.

$ eval та $ interpolate за лаштунками використовують лише $ parse.

Ось миле пояснення.

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.