< $ (‘. Element"). Click (function () {
 $ (this) .find (‘. Child"). Append (‘
 +
 ‘’ +
 ‘
’ 
); 
});

=   

Template-Name.Directive.js

 < ‘use strict’; 

 angular.module ("myDirective", []). Directiva ("TemplateName", [function () {
 return {
 restringir: "a", 
 TemplateUrl: ‘Template-Name.html’ 
} 
}]);

mientras AngularJS requiere tres archivos para crear una plantilla en este caso, Ayuda a mantener su código más modular y organizado durante un todo proyecto. Tenga en cuenta que este no es el mejor ejemplo de un plantilla, generalmente son más complicadas que una sola entrada.

Inyección de dependencia

Esto No es una necesidad en jQuery. Mientras no tengas tus scripts llamado como funciones anónimas generalmente puede acceder a sus complementos no problema. Pero no siempre necesita cargar esa biblioteca en cada página. La inyección de dependencia se usa principalmente para la modularidad en un proyecto, (de nuevo manteniéndolo seco) y puede lograr algo similar con Objetos JavaScript. Se trata de mantener sus funciones locales para que Se ejecutan en un entorno controlado.

Angularjs Utiliza una gran inyección de dependencia. De hecho, todo sobre angularjs necesita ser inyectado. Si desea utilizar la solicitud `$ http`, necesita Para inyectarlo en su controlador:

 <. controlador ("mycontroller", ["$ http", function ($ http) {
 // Ahora puede usar $ http 
}]);

Enlace de datos de dos vías

Ahora entramos en las cosas buenas con angularjs. Enlace de datos de dos vías es a la vez una bendición y una maldición potencial. Permite directamente modificación del DOM y en pantalla HTML como tipos de usuario y interactúa con su sitio. jQuery puede Tipo de Haga esto, pero requiere que escribas JavaScript para hacerlo, en lugar de AngularJS, donde está integrado directamente.

¿Por qué ¿Es esto bueno? Bueno, el ejemplo más fácil es que con angularjs le permite realizar una búsqueda y filtrado difuso como los tipos de usuario.

Angular:

Consulte el bolígrafo Yoqmvn por Kyle Jasso ( @JASSOK ==) On Codepen .

In this example, we have a simple input, and an output, to display what two way databinding does. Then, a real world use case, where you can filter a user list in a table. With angular, the only javascript we’re required to write is the array that contains the user list.

jQuery:

Consulte el bolígrafo Zjmeml por Kyle Jasso ( @Jassok =) en Codepen ||– 108 .

The jQuery example, has the same functionality that the angular version does, with the main difference being that there’s 50 lines of javascript written to do the same functionality. The filtering, and data binding should be written to be more modular across the application if it's something you actually wanted to use in production.

Validación de formulario

Esto es otra de esas cosas con las que viene Angularjs fuera del caja. Agregar un elemento de formulario en su página le da acceso a varios Funciones en el DOM. Los siguientes son algunos de los más útiles:

 < $ scope.formname. $ Sucio: boolean 

true si el usuario ya ha interactuado con el formulario.

Verdadero Si el uso falta los campos requeridos.

  $ scope.formname. $ pristine: boolean 

Verdadero Si el usuario aún no ha interactuado con el formulario.

JQuery, Por otro lado, no ofrece ninguna de estas características. Puedes escribir ellos usted mismo, o use un complemento de terceros, como la validación de jQuery Complemento.

allí son muchas otras diferencias entre angularjs y jQuery, pero estas son solo algunas de las cosas más comunes con las que me encuentro mientras trabajo en un proyecto. (Muchas veces desearía que JQuery solo haga datos bidireccionales Validación de formulario vinculante o más fácil.)

Rendimiento y tamaño de archivo

de la diferencia en las características, el rendimiento y el tamaño del archivo son muy Cosas importantes a considerar al elegir un marco de JavaScript o Biblioteca para usar. Las personas tienden a olvidar los teléfonos o tomar Límites de datos y uso concedidos, por lo que me gusta errar por el lado de actuación. Si el sitio se carga rápidamente, el tamaño generalmente no es un problema.

para Esto, vamos a ver el tamaño del proyecto y los tiempos de carga de un Proyecto AngularJS y un proyecto jQuery que cargan sus respectivos Bibliotecas de la carpeta y una CDN (red de entrega de contenido).

Tamaño del archivo

Al momento de escribir, la versión minificada de AngularJS es Casi doble el de jQuery.

Performance

para estos números, estamos viendo el tiempo de carga promedio de un muy simple Página que simplemente incluye el archivo Minified AngularJS o JQuery, y ejecuta un `console.log` en la ventana. Estos números se promedian más de 10 Carga cada uno.

primero cosa a tener en cuenta esto es que casi nunca es una buena idea Incluya bibliotecas directamente desde su fuente, pero eso es para otra Discusión sobre CDN. Sin embargo, basado en estos números, podemos ver que Incluso con un tamaño de archivo más grande, AngularJS tenía un mejor tiempo de carga promedio, DomLoad, y finalizar.

Siguiente, Echaremos un vistazo a la carga del mismo proyecto, solo esta vez, incluyendo la biblioteca del CDN proporcionada directamente desde los sitios web donde puede descargar cada uno. Obviamente puede incluir cada uno de múltiples Diferentes CDN para encontrar uno que sea más rápido si necesita.

Al cargar desde el CDN, vemos una historia ligeramente diferente. Angularjs termina antes, pero jQuery carga el DOM más rápido.

• DOMCONTENTLOGADO (DomLoad es un evento disparado cuando el documento HTML inicial es completamente cargado y analizado sin hojas de estilo, imágenes y subtramas cargados).
• Carga se dispara cuando un recurso y todas sus dependencias han terminado de cargar.
• Finalización , es el tiempo que lleva cargar contenido asíncrono, o requisitos mínimos para que algo se muestre en la página.

Proyecto de ejemplo

Me mencioné al principio que hay un nuevo marco de JavaScript cada otra semana y || 140 TodoMVC is a great resource to compare and contrast these different frameworks. It's a very simple app, that allows a user to add, edit, delete, and complete tasks. We’re going to use this as the comparison example.

Primero, veamos algunas estadísticas sobre los diferentes proyectos.

Puede encontrar estos ejemplos y más a ToDomvc: Angularjs - JQuery || 147

An important note about the size of the two projects is that the AngularJS project has testing in it (Karma and Jasmine). The angular project also has more working files to pay attention to. Load times are very similar as well.

Los proyectos son muy pequeños, y no debería tardar mucho en revisar el estilo diferente de código entre AngularJS y jQuery.

¿Cuál debería usar?

como Inicialmente mencionado, comparar AngularJS con jQuery es un poco como Comparación de manzanas con naranjas. AngularJS es un marco, y jQuery es un biblioteca. Ambos ofrecen una cantidad decente de funcionalidad, el rendimiento es similar, y la diferencia de tamaño es insignificante.

el La distinción general que tiendo a hacer implica cuánta interacción es necesario del usuario. jQuery se queda corta con facilidad de uso y organización Cuando hay una gran cantidad de datos, formularios y rápidamente Cambiar contenido. Eso no quiere decir que no pudieras hacer todo con jQuery que puedes con angularjs, pero para mí, me parece bastante revelador que la biblioteca jQuery es la mitad del tamaño de Angularjs y, sin embargo, se carga Más lento. Esta es solo una opinión personal, pero creo que jQuery es Bastante hinchado y podría deberse a cierta optimización.

como Trabajo más con JavaScript, me encuentro descubriendo más y más razones para evitar jQuery a favor de JavaScript puro siempre que sea posible. Sin embargo, sigue siendo una excelente opción cuando necesitas un mínimo Interacción JavaScript.

Angularjs, por otro lado, es excelente para a gran escala o Proyectos interactivos. Ofrece muchas características incorporadas realmente útiles que no he mencionado, como el poder de `ng-repeat`, directivas y servicios que lo ayudan a mantener su solicitud o sitio web seco. Como con la mayoría de las herramientas, tiene sus propios inconvenientes y puede ser exagerado en algunas situaciones.

Entonces, ¿qué debes usar? Bueno, un poco es preferencia personal. I Personalmente no me gusta usar jQuery, y para mí y para los otros desarrolladores Aquí en Brolik es un último recurso retroceder. Hemos estado haciendo un esfuerzo Para mejorar la optimización de nuestros sitios web, y JQuery tiende a hacer Esto es más difícil para nosotros hacerlo. Para mí entonces, la respuesta es Angularjs, pero eso se debe a un gusto personal del marco.