Presentación del lab de angularjs en Codemotion 2015

1. @CarlosGarciaG84
Carlos.garciag.84@gmail.com

2. ¿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

3. ¿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

4. Descubriendo AngularJS
 ¡Empecemos!
 Primero de todo:

5. 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

6. ¿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

7. 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>

8. 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

9. 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

10. 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)

11. Demo