Angularjs

1.3. AngularJS vs JQuery

Si hablamos de Javascript ¿entonces AngularJS y JQuery son complementarias o competidores?

Realmente las comparaciones son odiosas pero en este caso incluso más. Son dos conceptos totalmente diferentes: JQuery es un conjunto de funciones en una librería y AngularJS un framework MVC.

Pero en definitiva si se utilizan ambas para endulzar un poco el código javascript y sobretodo para hacer más sencillo el desarrollo web en cliente.

JQuery

JQuery simplificó al mundo el tratamiento de javascript y la manipulación del DOM en el desarrollo web mediante sus funciones. Llegando a ser prácticamente un estandar y dominar frente al resto de librerías tales como prototype o extjs

JQuery sirve para acceder y modificar cualquiera de los elementos de la página HTML. Los famosos selectores (y su simplificación) nos permitia acceder a los elementos, modificar sus propiedades, suscribirte a eventos para dotar de comportamiento a ciertas acciones.

Con JQuery podemos controlar cualquier situación que suceda en nuestros elementos de nuestra página web de una forma mucho más cómoda y sencilla que con Javascript "a pelo".

Otra gran ventaja de JQuery es que conseguía simplificar la compatibilidad con la mayor gama de navegadores.

Hay que decir que algunos plugins y librerias adicionales intentan dotar a JQuery de ese estatus de framework como Javascript MVC.

Utilizar JQuery cuando si tus requisitos son sencillos, pequeñas funcionalidades en páginas independientes o el javascript va a tener poco peso en la aplicación web.

AngularJS

Sin embargo sí es un framework MVC es mucho más, nos dota de muchas otras utilidades y nos aporta los patrones de diseño. Es ahí donde aparece AngularJS

No sólo se tienen una funciones para acceder a elementos del HTML y poder modificarlos sino que ofrece un mecanismo para extender el HTML en sí. AngularJS marca una serie de normas y hábitos (framework) en la programación del desarrollo en cliente.

¿Entonces AngularJS se ha comido a jQuery? Mmm... son cosas diferentes

De hecho jqLite esta includo en AngularJS. Dentro del propio AngularJS existe una pequeña implementación de JQuery (jqLite) con la mínima funcionalidad necesaria que nos facilita el acceso al DOM.

Es decir que AngularJS puede utilizar un subconjunto de JQuery aunque no es estrictamente necesario utilizarlo. Si AngularJS detecta que no se esta cargando JQuery entonces pondrá en marca su propia librería de acceso al DOM.

Utiliza AngularJS si vas a crear una aplicación web compleja (similar a las aplicaciones de escritorio) con un uso intensivo de Javascript.

¿Puedo utilizar entonces JQuery dentro de AngularJS? ¿Sí o no?

Sí, puedes utilizarlo pero no es estrictamente necesario.

En caso de utilizarlo se debe quedar en la utilización de JQuery restringido a las vistas, filtros y creación de directivas. Nunca utilizarlo en controladores, factorías o servicios.

Cuidado con los hábitos de los desarrolladores con experencia en JQuery porque puede llevar a mala praxis como la de acceder al DOM desde un controlador con selectores JQuery provocando así acoplamiento y problemas en el futuro de la aplicación.

En definitiva pese a poder ser utilizado se recomienda evitar siempre que se pueda usar JQuery con AngularJS a no ser que sea esstrictamente necesario.

Comparativa de código jQuery vs AngularJS

Aunque son cosas totalmente diferentes como acabamos de explicar vamos a poner el ejemplo del "Hola mundo" para que se vea la diferencia de trabajo y código.

La idea es escribir un nombre en un campo de texto y volcarlo en una etiqueta H1.

JQuery

<html>
    <body>
        Nombre: <input type="text" id="nombre" />

        <p>
        Hola mundo JQuery!!! Soy <b><span id="nom"></span></b>
        </p>

        <script src="jquery.min.js"></script>
        <script>
            $(function(){
                var texto = $("#nombre");
                var titular = $("#nom");

                texto.on("keyup", function(){
                    titular.text(texto.val());
                });
            });
    </script>
    </body>
</html>

AngularJS

<html ng-app>
    <body>
        Nombre: <input type="text" ng-model="nombre" />

        <p>
        Hola mundo AngularJS!!! Soy <b>{{ nombre }}</b>
        </p>

        <script src="angular.min.js"></script>
    </body>
</html>

Como se puede apreciar con AngularJS el trabajo es mucho más sencillo y rápido.