Continuando con los tutoriales de AngularJS, en esta ocasión hablaremos de las características que hacen de este framework un MVC verdaderamente dinámico y único en Javascript. Si quieres ver el tutorial anterior, puedes dar click este enlace ” Lo que no es AngularJS “.
- 2-Way-data-binding – Una de las características más importantes, se refiere a que AngularJS esta continuamente observando los cambios que suceden tanto en la Vista, así como en el Modelo y sincroniza datos entre estos.
-
Expresiones (expressions) – Cualquier valor que tenga que ser reflejado en la vista, se coloca dentro de llaves dobles {{ expresión ó valor }} . También se pueden evaluar expresiones como:
- {{ 1+2 }} —> reflejará 3.
- {{ a+b }} —> reflejará el valor de a más el valor de b.
- {{ user.name }} —> reflejará el valor que viene de un attributo en un objeto.
- {{ item[index] }} —> reflejará el valor que se encuentra dentro de un arreglo.
También podemos usar filtros (más adelante tocaremos el tema) para darle formato al valor reflejado en la vista. Por ejemplo:
- {{ sueldo.mensual | currency }} —> reflejará “2000” en “$2,000.00”
-
Directivas (directives) – Las directivas nos permiten crear nuestros propios elementos
HTML. Usando las directivas, es la manera correcta de “manipular” el
DOM, en caso de tener que hacerlo. Esto permite decirle al compilador
HTML de Angularjs, que añada comportamiento específico a ese elemento HTML. Podemos crear elementos HTML de 4 maneras:- Como elemento (E) – <mi-elemento></mi-elemento>.
- Como atributo (A) – <div mi-elemento><,/div>.
- Como clase ( C ) – <div class=”mi-elemento”></div>.
- Como comentario – <!– directive: mi-elemento –>
El uso de las Directivas es muy extenso, por lo que tendremos un tutorial dedicado.
- Vistas y Rutas(views and routes) – Cuando una aplicación web depende de muchas páginas HTML (vistas), estamos trabajando en una SPA (single page application), lo que significa que podemos agregar un solo elemento HTML (contenedor) dentro de un solo archivo HTML, y dentro de éste poder renderizar cada página que tenga que mostrarse, sin tener que recargar la URL. El render entre páginas dentro del contenedor es inmediato.
Esto se logra con otra directiva llamada ng-view o ui-view, y una librería llamada o , temas que mostraremos en otro tutorial.
Es probable que no haya mencionado otras características de AngularJS, y esto puede deberse a ciertas razones:
- Según la documentación de AngularJS, cada característica está dentro de una categoría en específico (plantillas, estructura de la aplicación, otras características y testing). Por lo que cada una es importante, pero dentro de ciertos esquemas de una aplicación web.
- Cada programador/desarrollador encuentra una característica más importante que otra, debido a que como tal, les ha salvado la vida (salvo su mejor opinión).
- Cada programador/desarrollador las puede dividir en “características” y “componentes”.
¿Qué otra caracterísca de AngularJS consideras como tal, o como un componente?. Déjanos tus comentarios.
