Apa perbedaan antara layanan $ parse, $ interpolate, dan $ compile?

Apa perbedaan antara $parse, $interpolatedan $compilelayanan? Bagi saya mereka semua melakukan hal yang sama: ambil templat dan kompilasi ke templat-fungsi.

Itu semua adalah contoh layanan yang membantu dalam rendering tampilan AngularJS (meskipun $parsedan $interpolatedapat digunakan di luar domain ini). Untuk mengilustrasikan apa peran dari setiap layanan, mari kita ambil contoh dari bagian HTML ini:

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

dan nilai pada ruang lingkup:

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

Diberikan markup ini di sini adalah apa yang dibawa setiap layanan ke meja:

• $compile- dapat mengambil seluruh markup dan mengubahnya menjadi fungsi penghubung yang, ketika dieksekusi terhadap lingkup tertentu akan mengubah sepotong teks HTML menjadi dinamis, langsung DOM dengan semua arahan (di sini ng-src:) bereaksi terhadap perubahan model. Seseorang akan memanggilnya sebagai berikut: $ compile (imgHtml) ($ scope) dan akan mendapatkan elemen DOM dengan semua batasan event DOM sebagai hasilnya. $compilememanfaatkan $interpolate(antara lain) untuk melakukan tugasnya.
• $interpolatetahu cara memproses string dengan ekspresi interpolasi tertanam, mis /path/{{name}}.{{extension}}. : . Dengan kata lain dapat mengambil string dengan ekspresi interpolasi, ruang lingkup dan mengubahnya menjadi teks yang dihasilkan. Orang dapat menganggap $interpolationlayanan sebagai bahasa template berbasis string yang sangat sederhana. Mengingat contoh di atas orang akan menggunakan layanan ini seperti: $interpolate("/path/{{name}}.{{extension}}")($scope)untuk mendapatkan path/image.jpgstring sebagai hasilnya.
• $parsedigunakan oleh $interpolateuntuk mengevaluasi ekspresi individu ( name, extension) terhadap cakupan. Ini dapat digunakan untuk membaca dan mengatur nilai untuk ekspresi yang diberikan. Misalnya, untuk mengevaluasi nameekspresi yang akan dilakukan: $parse('name')($scope)untuk mendapatkan nilai "gambar". Untuk mengatur nilai yang akan dilakukan:$parse('name').assign($scope, 'image2')

Semua layanan tersebut bekerja bersama untuk menyediakan UI langsung di AngularJS. Tetapi mereka beroperasi pada level yang berbeda:

• $parsehanya mementingkan ekspresi individu ( name, extension). Ini adalah layanan baca-tulis.
• $interpolatedibaca saja dan berkaitan dengan string yang berisi banyak ekspresi ( /path/{{name}}.{{extension}})
• $compile adalah jantung dari mesin AngularJS dan dapat mengubah string HTML (dengan arahan dan ekspresi interpolasi) menjadi DOM langsung.

$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 tidak memiliki akses tulis ke variabel $ scope seperti yang kita miliki dalam $ eval dan $ parse

$ parse, $ interpolate ---> perlu disuntikkan tetapi $ eval tidak perlu disuntikkan di controller atau di mana ia digunakan

$ parse, $ interpolate memberikan fungsi yang dapat dievaluasi terhadap konteks apa pun tetapi $ eval selalu dievaluasi terhadap $ scope.

$ eval dan $ interpolate di belakang layar hanya menggunakan $ parse.

Inilah penjelasan yang lucu.

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.