angularjs
TRANSCRIPT
¿Qué es el famoso Angular JS?
Es un Framework Client-Side muy potente
Se basa en la arquitectura MVC
Nos permite interaccionar mucho más con el DOM
Está mantenido por Google
¿Qué nos aporta?
Separación del código en módulos, donde cada módulo tendrá su función
Utiliza inyección de dependencias
Utiliza ámbitos (Scope) para la separación de módulos que sirven para comunicar la vista con el controlador
Utiliza directivas que nos sirven para interactuar o directamente modificar la vista
Filtros personalizados
Routes que nos permiten montar vistas parciales juntando varios templates con sus respectivos controladores
Descubriendo AngularJS
¡Empecemos! Primero de todo:
Bindeo de datos
Aquí le indicamos cual es nuestro controlador, y podemos ver las propiedades informadas en el modelo
En el input indicamos que cualquier cambio que hagamos en él quedará directamente cambiada la propiedad user.name
¿Qué más nos ofrece? Directiva ng-repeat
Nos creará una lista con tantos elementos como tengamos en el modelo También tenemos <div ng-repeat="user in users track by user.id"> Que nos serviría para aplicar el orden por id
Filtrar los datos
Utilizaremos la directiva ng-repeat con el añadido de los casos <div ng-repeat="user in users | filter:'Juan'"> </div>
<div ng-repeat="user in users | filter: {surname:'Garcia‘}”></div>
Otras directivas: ng-select
Generamos un select desde nuestro modelo
Por cada elemento del modelo nos crearía una opción de nuestro select
Y el userSelected recoje el elemento que seleccionamos en nuestra combo
Tipos de ng-select
[select as] label [group by group] for value in array [track by trackexpr]
Select: valor que se seleccionará en la variable indicada por ng-model label: valor que se visualizará como texto del option group: expresión que se usará para agrupar los option en optgroup value: variable que referencia a cada elemento del array array: listado de elementos trackexpr: expresión usada para identificar a cada elemento del array
Directivas ng-show / ng-hide
Las utilizamos para ocultar elementos del DOM, o hacerlos visibles Nos sirve para quitar el elemento del DOM (No solo esconderlo)
Demo