-
Notifications
You must be signed in to change notification settings - Fork 12
Algunas cosas peliagudas de angular
Angular recuerda el valor viejo y lo compara con el nuevo en todos los campos enlazados. Esto es dirty-checking básico y funciona en todos los navegadores bajo cualquier circunstancia. Si hay un cambio en el valor, lanza el evento de cambio (digest) sobre todo el scope.
El método $apply(), al que llamamos cuando modificamos el DOM (migrando del viejo paradigma al nuevo de Angular) llama a $digest().
En contraste con dirty-checking (angular) encontramos los escuchadores de eventos (KO, backbone): Mientras el dirty-checking puede parecer simple e incluso ineficiente, resulta semánticamente correcto siempre, mientras que los escuchadores de eventos tienen muchos casos marginales y requieren de mecanismos como trazado de dependencias para poder tener corrección semántica. Por ejemplo el dependency tracking de Knockout es una funcionalidad avanzada para un problema que angular no tiene.
Los escuchadores de cambios tienen más inconvenientes, si te interesa puedes leer esta respuesta de Misko Every en Stack Overflow
Cuando miramos numeros reales en lugar de argumentos teóricos, resulta que el dirty-checking de Angular es realmente rápido en la mayoría de los casos sin embargo hay que tener algunos casos en cuenta.
- Escribe un controlador con dos modelos
userycompanyy una vista que los muestre - Ahora añade un filtro que muestre el user en mayúsculas y además escriba el valor por consola
- Añade una función al scope que devuelva el String
'user' + ' ' + 'companyy muéstralo en la vista - Añade un botón que modifique el user y otro que modifique la company
- Abre la aplicación, observa el resultado de la consola. Pulsa cada uno de los botones y observa el resultado de la consola
- Evita enlazar (data-binding) con funciones. Si puedes guarda el resultado en un modelo del scope y enlaza con el modelo.
- Evita poner código complejo en los filtros, nada de llamadas Ajax o cálculos complejos
- Cachea los resultados
Cuando un scope se define dentro de otro este hereda del que llamaremos padre. El tipo de herencia es como la herencia típica de prototype de JavaScript, esto es: Podemos consultar las propiedades del scope padre pidiéndoselas al hijo pero cuando las modificamos a través del hijo, lo que se hace es crear una nueva propiedad en el hijo con el nuevo valor.
Una explicación mucho más completa en [http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs]
Aunque la documentación oficial de Angular es suficiente en la mayoría de casos, es especialmente escasa en cuanto a directivas se refiere. Aunque la mayoría de las aplicaciones pueden resolverse utilizando las directivas básicas de Angular y otras ya existentes como AngularStrap o Angular UI es muy útil conocer el funcionamiento interno de las directivas.
Para aprender a escribirlas yo recomiendo el artículo Build Custom Directives with AngularJS de ng-newsletter y The Hitchhiker’s Guide to the Directive
Ya existen muchísimos recursos disponibles online sobre Angular, AngularJS-Learning es una recopilación de muchísimos enlaces a directivas, tutoriales, libros, vídeos, artículos, etc.
El Reddit de Angular es un buen sitio para enterarse de las novedades sobre Angular
Sin embargo en este punto mi consejo es escribir código, cuanto más mejor. Seguro que has visto fallos en este tutorial, si es así o quieres contribuir con él por supuesto eres bienvenido.