span - obtener href javascript

¿Deberíamos usar jQuery con AngularJS?

Question

Cerrado Esta pregunta está basada en la opinión. Actualmente no está aceptando respuestas. Aprende más

¿Quieres mejorar esta pregunta? Actualice la pregunta para que pueda ser respondida con hechos y citas editando esta publicación .

Cerrado hace 4 años .

Nuestro sitio web utiliza actualmente la biblioteca jQuery y obtiene un tráfico de aproximadamente 1 millón mensual. Queremos incluir un enfoque centrado en la API, por lo que decidimos pasar a Javascript MVC y elegimos angularJS para ello.

Ahora mi pregunta es, ¿debería usar jQuery en la parte superior de Angular para poder reescribir un código de manipulación DOM mínimo, o debería volver a escribir todo de forma angular? Estamos utilizando complementos jQuery como plupload, jQuery UI. etc en el sitio web. Sugiera la mejor forma de migración (el tiempo de carga de la página también es importante).

¿Ya pasé por "Thinking in AngularJS" si tengo antecedentes en jQuery? pero no obteniendo una respuesta clara

Answer 1

Aquí hay una buena manera de abordarlo. Si desea mezclar jQuery con Angular ... escriba directivas en AngularJS y en la sección de enlaces de esas directivas puede incluir jQuery para la manipulación DOM.

Tenga en cuenta que AngularJS usa jQuery lite, por lo que gran parte de lo que hace jQuery ya está integrado en Angular.

Por ejemplo, puede usar jQuery lite en angular como este en cualquier lugar de una aplicación angular:

angular.element(''.class'').append(''<p>foo</p>'');

y dentro de una función de enlace de directiva,

angular.module(''TestModule'')
.directive(''jqueryTestDirective'', [''$timeout'', function($timeout) {
    return {
      restrict: ''E'',
      link : function (scope, element) {
        $timeout(function(){  
           element.append(''<p>foo</p>'');
        });
      }
}]);

<jquery-test-directive></jquery-test-directive>

Answer 2

Lo bueno de AngularJS que debe tener en cuenta antes de realizar la migración.

1. Proporciona enlace bidireccional al almacenar solo variables de alcance.
2. Otra cosa que necesitamos es escribir código en comparación con JQuery.
3. Implementación de forma modular (creando angular.module )
4. Cambia la mayor parte del código de Javascript a HTML, que se ve más limpio.
5. Los patrones Singleton están ahí para almacenar datos y compartirlos entre múltiples controladores o servicios.
6. Está construido con una versión más pequeña de jQuery que se conoce como JQlite, que tiene la mayor parte de la funcionalidad básica, pero desea usar JQuery en AngularJS, entonces estará disponible fácilmente, solo necesita agregar la referencia de jQuery, después de eso la funcionalidad de JQLite obtiene convertido en JQuery.

No debe usar jQuery en la parte superior de AngularJS, porque el ciclo de resumen de AngularJS no se ejecutará si hacemos cualquier manipulación DOM angular o manipulación de variable de alcance usando JQuery.

A medida que migra su componente jQuery a AngularJS, debe seguir las siguientes cosas

1. Primero debe buscar el sitio angular-ui-bootstrap porque habían cubierto la mayor parte del componente de la interfaz de usuario que ya se había convertido a angular.
2. Estoy seguro de que no encontrará todas las versiones angulares de complementos, en ese caso debe ajustar ese complemento a la directiva. Lo que le dará un controlador sobre el elemento DOM donde se haya colocado alguna directiva ( ejemplo aquí para Datepicker usando directiva)
3. No intente vincular un evento desde un contexto angular externo que creará un ciclo de resumen, lo que afectará la actualización de la interfaz de usuario.
4. Asegúrese de hacer cualquier llamada ajax que debería usar $http lugar de $.ajax
5. Hay muchos lugares que puede encontrar en el código jquery que serían reemplazados por la directiva ng-class, como si solo agrega y elimina clases, o muestra algún elemento en función de cualquier condición, por lo que ese tipo de código jquery puede reemplazarse por el uso ng-class directiva ng-class
6. Busque los lugares donde solo está eliminando un DOM o agregando DOM que podrían reemplazarse fácilmente por la directiva ng-if , o solo mostrar hide of element se puede hacer usando ng-show / ng-hide
7. También encuentre dicha parte en la interfaz de usuario en la que está creando el mismo DOM utilizando el bucle for que se puede convertir a directiva nativa angular ng-repeat
8. Si tiene algún caso en el que desea mostrar y ocultar elementos múltiples, esa parte del código se implementaría utilizando la directiva ng-switch

Answer 3

Use Angular para construir controladores y clientes API, luego, a medida que el tiempo lo permita, mueva la mayor cantidad de manipulación DOM y lo más posible a las directivas angulares. Luego, espere a que se publique Angular 2 y vuelva a hacerlo.