javascript - example - diferencia entre factory y service angularjs

¿Cuál es la diferencia entre los servicios $ parse, $ interpolate y $ compile?

Question

¿Cuál es la diferencia entre los servicios $parse , $interpolate y $compile ? Para mí, todos hacen lo mismo: tomar la plantilla y compilarla para la función de plantilla.

Answer 1

Todos estos son ejemplos de servicios que ayudan en el renderizado de vistas de AngularJS (aunque $parse y $interpolate podrían usarse fuera de este dominio). Para ilustrar cuál es el papel de cada servicio, tomemos un ejemplo de este fragmento de HTML:

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

y valores en el alcance:

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

Dado este marcado aquí es lo que cada servicio aporta a la mesa:

• $compile : puede tomar todo el marcado y convertirlo en una función de enlace que, cuando se ejecuta en un determinado ámbito, convertirá un fragmento de texto HTML en un DOM dinámico y en vivo con todas las directivas (aquí: ng-src ) reaccionando al modelo cambios. Uno lo invocaría de la siguiente manera: $ compile (imgHtml) ($ scope) y obtendría como resultado un elemento DOM con todos los límites de eventos DOM. $compile está haciendo uso de $interpolate (entre otras cosas) para hacer su trabajo.
• $interpolate sabe cómo procesar una cadena con expresiones de interpolación incrustadas, ej .: /path/{{name}}.{{extension}} . En otras palabras, puede tomar una cadena con expresiones de interpolación, un alcance y convertirlo en el texto resultante. Uno puede pensar en el servicio $interpolation como un lenguaje de plantilla simple basado en cadenas. Dado el ejemplo anterior, uno usaría este servicio como: $interpolate("/path/{{name}}.{{extension}}")($scope) para obtener la cadena path/image.jpg como resultado.
• $parse es usado por $interpolate para evaluar expresiones individuales ( name , extension ) contra un alcance. Se puede usar tanto para leer como para establecer valores para una expresión dada. Por ejemplo, para evaluar la expresión del name , uno haría: $parse(''name'')($scope) para obtener el valor de "imagen". Para establecer el valor uno haría: $parse(''name'').assign($scope, ''image2'')

Todos esos servicios están trabajando en conjunto para proporcionar una interfaz de usuario en vivo en AngularJS. Pero operan en diferentes niveles:

• $parse se refiere solo a las expresiones individuales ( name , extension ). Es un servicio de lectura y escritura.
• $interpolate es de solo lectura y se ocupa de cadenas que contienen varias expresiones ( /path/{{name}}.{{extension}} )
• $compile está en el corazón de la maquinaria de AngularJS y puede convertir cadenas de HTML (con directivas y expresiones de interpolación) en DOM en vivo.

Answer 2

$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 no tiene el acceso de escritura a las variables $ scope como tenemos en $ eval y $ parse

$ parse, $ interpolate ---> necesita ser inyectado pero $ eval no necesita ser inyectado en el controlador o donde se usa

$ parse, $ interpolate da la función que se puede evaluar contra cualquier contexto, pero $ eval siempre se evalúa frente a $ scope.

$ eval e $ interpolate behind the scenes usa solo $ parse.