El tema de este post es una introducción a Angular.js, ya que la herramienta tiene una gran capacidad y planifique hablar de ella en 3 partes:
Como les hable en el post Node.js: Avanzado II, Angular.js es un framework de Frontend, una herramienta que se tiene en la aplicación del lado del cliente, con este podremos tener una interfaz que se actualice junto al modelo en tiempo real.
Angular.js lo podemos usar como una librería que descargamos o agregamos el link al HTML, por tratarse de un tutorial introducción tomo esta última opción.
1 - Hola Angular.js
Lo primero que hacemos es agregar la librería (línea 5 en el ejemplo). Luego le indicamos a nuestra página que trabajamos una aplicación de Angular.js y esto se logra agregando el atributo ng-app en la etiqueta que envuelve la zona de interés. Todos los atributos que comiencen con el nombre ng son atributos que permiten usar funciones de Angular.js.
El otro atributo que uso en el ejemplo es ng-model, este nos permite crear un modelo con el valor de la etiqueta en el que la colocamos, que por lo general es de entrada de valores. En este caso hago un uso muy sencillo de esta función, en la línea 10 le agrego a la etiqueta input un modelo que llamo texto, lo cual permite tomar el valor que se introduzca y usarlo donde queramos, como lo muestro en la línea 12 donde se accede al valor.
Lo más interesante de esta pequeña función de Angular.js es que accedemos al valor y se va modificar en todas las secciones que usemos el modelo, según lo que se tenga en la entrada.
Esta página luce de esta forma:
2 - Controladores
Los controladores de Angular.js son funciones de Javascript que son usadas para aumentar el alcance de la aplicación. Para crear un controlador lo hacemos creando un modulo y usarlo como aplicación, esto es lo que se tiene en la primera línea de 2-controladores.js (en el siguiente tutorial hablaré un poco más sobre el uso de los módulos), en este caso mi modulo lo llamo heroesApp.
Para crear un controlador se llama desde el módulo la función controller y le damos un nombre y una función que determine el comportamiento. Esto se ve en el código en la línea 3 donde llamo al controlador listadoCtrl y creo la función con la variable $scope.
La variable $scope es la que nos permitirá agregar variables y funciones al controlador. Para el ejemplo tenemos en el $scope una lista de valores con el propósito de mostrar una función dentro del HTML para agregar varios elementos. Ahora bien hasta este punto únicamente sabemos crear el controlador más no usarlo, para esto necesitamos hacer lo que se tiene en la línea 10 (asignamos la aplicación) y 14 (asignamos el controlador).
Para mostrar los valores de la lista de heroes usamos la función ng-repeat, la cual permite movernos sobre la lista con un iterador, accediendo a los valores y agregarlos a la página.
Para hacer este ejemplo más interesante tengo otra función en el $scope que permite agregar elementos a la lista y lo bueno de esto viene con la posibilidad que nos entrega Angular.js para acceder y manipular los valores de la entrada que son modelos. Además de esto hago uso de la función ng-submit que es usada en los formularios comúnmente para enviar los valores, a la que le paso como parámetro la función agregarHeroe() que controlará su acción.
Esta página luce como en la siguiente imagen:
3 - Angular.js y CSS
Este ejemplo tiene como objetivo mostrar que podemos usar Angular.js para modificar CSS. Fíjense que podemos cambiar el valor de una clase en una etiqueta simplemente con:
4 - Filtros
Los filtros son funciones que usamos para dar formato a nuestros valores, ordenar y filtrar valores como un buscador.
Para mostrar todas estas funciones de los filtros en el ejemplo se tiene una tabla de datos de unos heroes y la página resultante luce como la siguiente imagen:
Los filtros de formato son:
En este caso el filtro capitalize coloca en mayúscula la primera letra y el resto en minúscula.
Los otros filtros con los que contamos son:
Descarga aquí todos los archivos fuente.
- Introducción.
- Funciones extras (módulos, fábricas, servicios, formularios y animaciones).
- Una aplicación real que use todo lo que pueda de esta herramienta.
Angular.js lo podemos usar como una librería que descargamos o agregamos el link al HTML, por tratarse de un tutorial introducción tomo esta última opción.
1 - Hola Angular.js
Lo primero que hacemos es agregar la librería (línea 5 en el ejemplo). Luego le indicamos a nuestra página que trabajamos una aplicación de Angular.js y esto se logra agregando el atributo ng-app en la etiqueta que envuelve la zona de interés. Todos los atributos que comiencen con el nombre ng son atributos que permiten usar funciones de Angular.js.
El otro atributo que uso en el ejemplo es ng-model, este nos permite crear un modelo con el valor de la etiqueta en el que la colocamos, que por lo general es de entrada de valores. En este caso hago un uso muy sencillo de esta función, en la línea 10 le agrego a la etiqueta input un modelo que llamo texto, lo cual permite tomar el valor que se introduzca y usarlo donde queramos, como lo muestro en la línea 12 donde se accede al valor.
Lo más interesante de esta pequeña función de Angular.js es que accedemos al valor y se va modificar en todas las secciones que usemos el modelo, según lo que se tenga en la entrada.
Esta página luce de esta forma:
Los controladores de Angular.js son funciones de Javascript que son usadas para aumentar el alcance de la aplicación. Para crear un controlador lo hacemos creando un modulo y usarlo como aplicación, esto es lo que se tiene en la primera línea de 2-controladores.js (en el siguiente tutorial hablaré un poco más sobre el uso de los módulos), en este caso mi modulo lo llamo heroesApp.
Para crear un controlador se llama desde el módulo la función controller y le damos un nombre y una función que determine el comportamiento. Esto se ve en el código en la línea 3 donde llamo al controlador listadoCtrl y creo la función con la variable $scope.
La variable $scope es la que nos permitirá agregar variables y funciones al controlador. Para el ejemplo tenemos en el $scope una lista de valores con el propósito de mostrar una función dentro del HTML para agregar varios elementos. Ahora bien hasta este punto únicamente sabemos crear el controlador más no usarlo, para esto necesitamos hacer lo que se tiene en la línea 10 (asignamos la aplicación) y 14 (asignamos el controlador).
Para mostrar los valores de la lista de heroes usamos la función ng-repeat, la cual permite movernos sobre la lista con un iterador, accediendo a los valores y agregarlos a la página.
Para hacer este ejemplo más interesante tengo otra función en el $scope que permite agregar elementos a la lista y lo bueno de esto viene con la posibilidad que nos entrega Angular.js para acceder y manipular los valores de la entrada que son modelos. Además de esto hago uso de la función ng-submit que es usada en los formularios comúnmente para enviar los valores, a la que le paso como parámetro la función agregarHeroe() que controlará su acción.
Esta página luce como en la siguiente imagen:
3 - Angular.js y CSS
Este ejemplo tiene como objetivo mostrar que podemos usar Angular.js para modificar CSS. Fíjense que podemos cambiar el valor de una clase en una etiqueta simplemente con:
- Modelos: Como en la línea 24 del HTML donde se actualiza la clase según el valor del checkbox y como tenemos una clase de CSS que corresponde a ese comportamiento, cambiará el color del texto.
- Atributos: Variables que se tenga dentro del $scope que cambien y correspondan a un valor que modifique la apariencia.
- Funciones: Valores retornados que modifiquen la apariencia como en la línea 28, donde el color será rojo si todas las tareas están sin hacer, amarillo si queda más de una tarea y verde si ya se realizaron todas.
- ng-click: Función que permite detectar un click en la etiqueta donde se usa el atributo. Para este ejemplo tenemos en la línea 18 esta función, la cual tendrá como resultado la eliminación de las tareas marcadas como realizadas.
- angular.forEach: Permite iterar sobre la lista de elementos que sea pasada como parámetro y hacer lo que queramos con la función que se declare. Ejemplo de esto está en la línea 32 del archivo Javascript
4 - Filtros
Los filtros son funciones que usamos para dar formato a nuestros valores, ordenar y filtrar valores como un buscador.
Para mostrar todas estas funciones de los filtros en el ejemplo se tiene una tabla de datos de unos heroes y la página resultante luce como la siguiente imagen:
Los filtros de formato son:
- uppercase: Coloca en letras mayúsculas todo el string que se use. Un ejemplo de esto lo vemos en la línea 36 del archivo HTML. El filtro para colocar las letras en minúsculas es lowercase.
- date:'fullDate': Permite dar formato de fecha. Un ejemplo de esto lo vemos en la línea 37 del archivo HTML. El formato depende mucho de cada región y en este caso se usa la de España, ya que se importa la librería de localización en la línea 7. Si deseamos cambiarla podemos acceder a la página oficial de Angular.js y decidir segun la versión el idioma y formato.
- number: Este nos permite asignar la precisión a los valores punto flotante. En el ejemplo lo vemos en la línea 39, donde asignó una precisión de 3 decimales.
- json: Da formato a un valor de tipo json.
En este caso el filtro capitalize coloca en mayúscula la primera letra y el resto en minúscula.
Los otros filtros con los que contamos son:
- orderBy: Permite ordenar en forma ascendente o descendente según un atributo. Ejemplo de esto lo tenemos en la línea 34 del HTML.
- filter: Permite conectarse con un modelo y hacer funciones tipo buscador dentro se los valores, dando como resultado los valores que coincidan con el patrón de búsqueda. Ejemplo de esto lo tenemos en la línea 34 del HTML, donde el modelo conectado es filtro_busqueda.
- limitTo: Podemos mostrar solamente una cierta cantidad de elementos de una lista.
Descarga aquí todos los archivos fuente.
No hay comentarios:
Publicar un comentario