Category Archives: AngularJS

My experience with Angular2 – (project and npm package)

Angular2, AngularJS, Javascript

I have about 2 year with Angular, with the first version, and I have a some repos with that about a little experiments for specifics ideas.

Here, my last repo: https://github.com/dimaslz/angular1.x-es6-webpack

And now, from some months ago, I have started to test with Angular2, the new tendency :). As you can know, now Angular2 is  oriented by components, like ReactJS. You can see that all files are like “directives”, and the control into this class is the controller. I will talk about only some differences and curiosities, I will not enter in deep how to work with Angular2.

Now, in your template, you and use the component like  <app></app>,<div app></div>,<div class="app"></div> in the html as previous version. Is not necessary add ng-app, ng-controller like Angular1.x.

The component that you want use in html (app for example), should be have this code:

Other thing that has changed, is the service, provider and factory not exist, only Service.

Ran out the doubts about if we should use service, provider or factory to do a service.

And other thing important for me, is that now is very easy to do a load lazy a component, you have not use libs like ocLazyLoad

Finally, Angular2 is very very easy to learn, the transition from Angular1.x it has been confortable, only you need to dedicate time to search and try thing to understand.

During my learning, I tried to do a component and also I published it for know how to do a library and install it in other project, and was born the following npm package:

And I did the component ng2-notify

This component is for show a notification in the UI when you do some action. You can see a demo in following url: http://dimaslz.github.io/ng2-notify/ ( https://github.com/dimaslz/ng2-notify ) Now, it is a 1.3.o version with Angular2 Beta 9.
Please!! if yo have some doubt, find some bug or you want a feature, let me know and open a Pull Request about.

 

So, it is all, if you want show a little project, I did (I am doing fix and improvements little by little) a little project http://todoapp.dimaslz.io/#/tasks/allhttps://github.com/dimaslz/todoApp-angular2 ) with gulp, nodeJS + MongoDB for API, SASS (compass).

Thanks for read me, I hope that my experience that helped you.

tags: , , , ,

Vetando a Jquery en tu proyecto AngularJS

AngularJS, Consejo, Javascript

Cualquier get started de un proyecto AngularJS, normalmente viene adjunta la librería JQuery para facilitarnos la vida a la hora de actuar en diferentes elementos, pero en el equipo donde trabajo, nos tomamos como reto/determinación, evitar usar JQuery y así no ensuciar el código mezclando librerías.

¿Y el por qué de esta decisión?, pues al fin y al cabo, Jquery para lo que normalmente lo usamos en Angular, es para trabajar de forma mas cómoda haciendo referencia a selectores html, pero si lo pensamos un poco, es algo que podemos evitar, y por ello, ahorrarnos la carga de otra librería extra innecesaria en nuestra aplicación.

Por ejemplo, para hacer click en un elemento en la web, ya tenemos el “ng-click” y declaramos un método en el “scope”, no es necesario irnos a Jquery y usar el “$(‘selector’).on(‘click’, function() {});”, podemos usar:

y esto lo podemos llamar en el html como  <div ng-click="methodName()">Content to click</div>

Una alternativa propia de Javascript, para trabajar con selectores, es el  document.querySelector(".example");  que con JQuery es lo mismo que hacer: $(".example");. Y sí, escribimos unos cuantos caracteres mas, pero nos seguimos ahorrando miles de lineas de una librería extra.

Una web, por pocos KB que nos ahorremos, siempre es positivo. Si es cierto que hoy día con las buena velocidades de conexión y métodos de caché, optimizamos mucho las cargas de archivos, pero aun así, si podemos seguir rascando KB, pues mejorará nuestro tiempo de carga y performance en la aplicación.

Considero una mala práctica/costumbre muchos ejemplos que hay por internet, que a la hora de hacer un mínimo autocomplete, utilizan Angular + JQuery, cosa que pensando 5 minutos mas, usando directivas, consigues el mismo resultado. Quizás un aporte positivo, que con JQuery no genera watchers en la aplicación, pero hay muchos métodos y buenas prácticas para llevar a cabo el mismo resultado y con una performance optima.

La última versión de Angular que hay disponible cuando estoy escribiendo este post, son unos 126KB minificados, y si ahora en un proyecto, añadimos JQuery son 84KB minificados, es decir, mas del 60% extra  en una librería que la usamos puntualmente para ciertas cosas.

Espero que esto sirva como un punto de vista diferente a plantear las cosas 😉

tags: , , ,

Componente AngularJS – Ejecutando callback al dejar de actuar en un elemento

AngularJS, Javascript

Lo que quiero compartir hoy, es una pequeña directiva que actúa como componente, para el control de una acción, después de actuar en un elemento.

En un ejemplo práctico, la idea sería de tener el mismo control que con el evento “onblur” que podemos disponer en un input cualquiera, pero en este caso, se me dio la necesidad de tener el comportamiento “onblur” en un elemento cualquiera.

Por ejemplo, imaginemos que tenemos un texto en un DIV, y queremos que al hacer click en ese texto, se convierta en un select (en este caso un dropdown de bootstrap). Ahora, tenemos 2 posibles acciones: Hacer click en el Dropdown, desplegar opciones y elegir una o cancelar la operación y que todo vuelva al estado por defecto y aparezca el texto inicial. Pues este segundo caso, no sabía como controlar el ejecutar un método, al hacer click fuera del elemento el cual quería resetear. Después de darle vueltas y no encontrar una solución a esto, decidí hacer una directiva que se encargara de ello, inspirándome en este artículo: http://vadimpopa.com/onblur-like-for-a-div-in-angularjs-to-close-a-popup/.

La idea es facil. Capturamos con un Listener de Javascript los eventos “click” de body y del elemento que contenga nuestro atributo “outClick”. Por lo que ahora podemos decir: Cuando yo hago click en el elemento donde tengo la directiva, es que estoy usando ese elemento, pero si hago click en cualquier punto de la web “body”, quiero que se resetee a su estado inicial.

A continuación os dejo un Fiddle con el ejemplo en marcha.

tags: , , , , ,

Gestionando el localStorage desde AngularJS

AngularJS, Javascript, Web

Lo mas normal, que en nuestros proyectos, necesitemos tener de forma fácilmente accesible algunos datos como puede ser un token de seguridad o el nombre del usuario, roles, permisos, email, foto y demás datos que nos eviten peticiones innecesarias a la API para obtener una información estática.

De primeras, tenemos la posibilidad de usar el nativo localStorage.setItem(key, value)  y localStorage.getItem(key) . Pero según lo que se guarde, tenemos que hacer su conversión a string, y al hacer get su conversión a Objeto bla bla bla. Para evitarnos este trabajo, si queremos, nos lo podemos  picar nosotros mismos un plugin angular, ya que la lógica es bastante fácil, setters y getters con sus respectivas conversiones de tipos por detrás.

Pero ya hay una solución bastante sencilla y que podemos usar, como Angular Local Storage (https://github.com/grevory/angular-local-storage). Si veis el código es muy sencillo, pero ¿para que complicarnos rehaciendo la rueda? Lo he estado usando para unos proyectos y simplifica bastante el uso de localStorage a la par que te inicia un indice cuando comienza la aplicación.

Por lo que en vuestro local storage tendréis almacenada la información a partir del prefijo que hayáis definido y no tenéis que preocuparos de el en cada setter o getter. Otra cosa que comenta en su documentación, es que si no es soportado el localStorage en el navegador, automáticamente guarda la información en cookies.

No voy a poner ejemplos, ya que en su documentación de Github está muy bien explicado y no me gustaría ser redundante.

Angular Local Storage (https://github.com/grevory/angular-local-storage)

tags: , ,

Documentar nuestros proyectos AngularJS con NgDocs

AngularJS, Documentación, Javascript

Si estas trabajando en un proyecto AngularJS, supongo que te habrás topado con la idea de como documentar todo esto de forma automática al mas puro estilo JavaDoc o PHPDoc. Pues es lo que me preguntaba esta semana. Pues buscando, una alternativa sencilla a implementar ha sido NgDocs. NgDocs es un plugin para Grunt o Gulp que nos permite automatizar la generación de documentación mediante una tarea.

Yo tan solo voy a explicar como implementarla para Grunt aunque luego dejaré enlaces tanto para Gulp como para Grunt.

La instalación es muy sencilla:
npm install grunt-ngdocs --save-dev

Una vez hayamos instalado esto, hacemos los siguientes pasos:

Cargamos el plugin en nuestro Gruntfile.js: grunt.loadNpmTasks('grunt-ngdocs');

Y ahora, creamos la tarea:
ngdocs: {
   all: ['src/**/*.js']
}

Registramos la tarea:
grunt.registerTask( 'ngdocs' );

Ahora, para que NgDocs nos sepa describir para que es cada controlador, directiva y demás, deberemos escribir unos comentarios previos al código:

Ahora, ya podríamos lanzar un grunt ngdocs y nos tomará la información de todos los archivos .JS de nuestro proyecto donde tengamos estos comentarios y nos generará un directorio “docs” donde si vamos a http://localhost:port/docs podremos ver una documentación.

La vista que nos presentará es muy parecida a la de AngularJS. Podemos hacer pequeños ejemplos prácticos y también tiene un buscador lateral para hacer la búsqueda entre los apartados.

Para mas información, os dejo los enlaces del plugin en npm:
Grunt: https://www.npmjs.com/package/grunt-ngdocs
Gulp: https://www.npmjs.com/package/gulp-ngdocs

En ambos plugins tenéis un repositorio con un ejemplo e ir haciendo pruebas. En la misma documentación del paquete de npm, invitan a que miremos un artículo de como documentar proyectos en AngularJS https://github.com/angular/angular.js/wiki/Writing-AngularJS-Documentation.

En una próxima edición mostraré como poder documentar métodos y demás apartados que puedan ser útiles.

Nota:
Existe un proyecto, generador de documentación llamado Dgine, que es un tanto mas complejo de configurar y que aún no he probado, pero es un paquete de npm desarrollado por el equipo de AngularJS.

Cuando lo tenga probado compartiré como configurarlo en nuestros proyectos AngularJS y ejemplos.

tags: , , , , ,