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

180

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

Stepan Suvorov
sumber

Jawaban:

464

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.
pkozlowski.opensource
sumber
11
Dijelaskan dengan baik. Terpilih! :)
AlwaysALearner
2
Bagus. Bisakah Anda memberikan contoh penggunaan dan hasil untuk masing-masing? Ini masih belum 100% jelas bagi saya dan saya pikir itu akan banyak membantu. Terima kasih!
Alejandro García Iglesias
2
Sangat bagus. Di sini Anda dapat menemukan beberapa contoh penggunaan kehidupan nyata (dan ini adalah artikel sederhana yang bagus tentang mempercepat Angular juga): mempercepat-angular-js-dengan-optimasi-sederhana "Misalnya, alih-alih merender navigasi global menggunakan ng-repeat, kita bisa membuat navigasi kita sendiri menggunakan penyedia $ interpolate untuk membuat template kita terhadap suatu objek dan mengubahnya menjadi node DOM. "
Nadav Lebovitch
Penjelasan yang bagus. Saya telah mencari di mana-mana apa yang sebenarnya $interpolatedi AnjularJS dan akhirnya saya mendapat jawaban yang ringkas dan informatif.
Damith
Contoh telah digunakan secara efektif untuk menjelaskan ketiga objek layanan. Kami membutuhkan lebih banyak penjelasan yang jelas dan mendasar dalam berbagai bidang sudut agar lebih mudah didekati oleh pemula.
Raja
3
$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.

Dhana
sumber
0

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.
Gajender Singh
sumber