$ Parse, $ interpolate ve $ compile services arasındaki fark nedir?

Arasındaki fark nedir $parse, $interpolateve $compilehizmetler? Benim için hepsi aynı şeyi yapıyor: şablonu alın ve şablon işlevine derleyin.

Bu angularjs yardım (her ne kadar render görünümünde olduğu tüm hizmetleri örnekleridir $parseve $interpolatebu etki alanının dışında kullanılabilir). Her bir hizmetin rolünün ne olduğunu göstermek için bu HTML parçasına örnek verelim:

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

ve kapsamdaki değerler:

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

Bu işaretleme göz önüne alındığında, her hizmetin masaya getirdiği şey:

• $compile- tüm biçimlendirmeyi alabilir ve belirli bir kapsama karşı yürütüldüğünde, bir HTML metninin bir parçasını dinamik hale getirecek ve tüm ng-srcdeğişikliklerle (burada :) model değişikliklerine tepki veren bir bağlantı işlevine dönüştürebilir . Birisi şu şekilde çağırır: $ compile (imgHtml) ($ scope) ve sonuç olarak tüm DOM olay sınırlarıyla bir DOM öğesi alır. $compileyapım kullanmak olduğunu $interpolateonun işi yapmak için (diğer şeyler arasında).
• $interpolategömülü enterpolasyon ifadeleriyle bir dizenin nasıl işleneceğini bilir, örn /path/{{name}}.{{extension}}.: Başka bir deyişle, enterpolasyon ifadeleri, bir kapsam içeren bir dize alabilir ve onu sonuçtaki metne dönüştürebilir. $interpolationHizmet çok basit, dize tabanlı bir şablon dili olarak düşünülebilir . Yukarıdaki örnek göz önüne alındığında, sonuç olarak dizeyi $interpolate("/path/{{name}}.{{extension}}")($scope)almak için bu hizmeti şöyle kullanır:path/image.jpg
• $parse$interpolateifadesini ( name, extension) bir kapsama karşı değerlendirmek için kullanılır . Belirli bir ifade için değerleri okumak ve ayarlamak için kullanılabilir . Örneğin, nameifadeyi değerlendirmek için şunlar yapılabilir: $parse('name')($scope)"image" değerini elde etmek. Değeri ayarlamak için:$parse('name').assign($scope, 'image2')

Tüm bu hizmetler AngularJS'de canlı bir kullanıcı arayüzü sağlamak için birlikte çalışıyor. Ancak farklı seviyelerde çalışırlar:

• $parseyalnızca bireysel ifadelerle ilgilidir ( name, extension). Bu bir okuma-yazma hizmetidir.
• $interpolatesalt okunurdur ve birden çok ifade içeren dizelerle ilgilidir ( /path/{{name}}.{{extension}})
• $compile AngularJS makinelerinin kalbinde yer alır ve HTML dizelerini (yönergeler ve enterpolasyon ifadeleriyle) canlı DOM'ye dönüştürebilir.

$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'

$ eval ve $ ayrıştırmada olduğu gibi $ interpolate'in $ scope değişkenlerine yazma erişimi yok

$ parse, $ interpolate ---> enjekte edilmesi gerekiyor ancak $ eval kontrolöre veya kullanıldığı yere enjekte edilmeye gerek yok

$ parse, $ interpolate herhangi bir bağlama göre değerlendirilebilen fonksiyon verir ancak $ eval her zaman $ kapsamına göre değerlendirilir.

$ eval ve $ interpolate sahne arkasında sadece $ parse kullanır.

İşte sevimli açıklama.

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.