Introduccin a AngularJS

Introduccin a AngularJS
 Qu es AngularJS?

Es un proyecto de cdigo abierto, realizado en JavaScript,

(desarrollado, mantenido e impulsado por la gente de Google) que contiene un
conjunto de libreras tiles para el desarrollo de aplicaciones web y propone
una serie de patrones de diseo para llevarlas a cabo.

En pocas palabras, es lo que se conoce como un framework para el

desarrollo, en este caso sobre el lenguaje JavaScript con programacin del
lado del cliente.

Introduccin a AngularJS
 Qu es un framework?
La palabra inglesa "framework" (marco de trabajo) define, en trminos
generales, un conjunto estandarizado de conceptos, prcticas y criterios para
enfocar un tipo de problemtica particular que sirve como referencia, para
enfrentar y resolver nuevos problemas de ndole similar.

En eldesarrollo desoftware, unframeworkoinfraestructura digital, es una

estructura conceptual y tecnolgica de soporte definido, normalmente con
artefactos o mdulos desoftwareconcretos, que puede servir de base para la
organizacin y desarrollo de software. Tpicamente, puede incluir soporte
deprogramas,bibliotecas, y unlenguaje interpretado, entre otras herramientas,
para as ayudar a desarrollar y unir los diferentes componentes de un proyecto.

Representa unaarquitectura desoftwareque modela las relaciones

generales de las entidades del dominio, y provee una estructura y una especial
metodologa de trabajo, la cual extiende o utiliza las aplicaciones del dominio.

Introduccin a AngularJS
 Caractersticas de un framework

- Inversin de Control

- Comportamiento por defecto

- Extensibilidad

- Son incompletos, no usables al 100%, deben ser completados

- Dirigen la solucin o proyecto

Introduccin a AngularJS
 Patrn de diseo MVC

Elmodelovistacontrolador (MVC)es un patrn dearquitectura de

softwareque separa losdatosy lalgica de negociode una aplicacin de
lainterfaz de usuarioy el mdulo encargado de gestionar los eventos y las
comunicaciones. Para ello MVC propone la construccin de
trescomponentesdistintos que son elmodelo, lavistay elcontrolador, es decir,
por un lado define componentes para la representacin de la informacin, y por
otro lado para la interaccin del usuario.
Este patrn dearquitectura de softwarese basa en las ideas dereutilizacin de
cdigoy laseparacin de conceptos, caractersticas que buscan facilitar la tarea
de desarrollo de aplicaciones y su posterior mantenimiento.

Introduccin a AngularJS
Patrn de diseo MVC en AngularJS

Vistas:Ser el HTML y todo lo que represente datos o informacin.

Controladores:Se encargarn de la lgica de la aplicacin y sobre todo de las

llamadas "Factoras" y "Servicios" para mover datos contra servidores o memoria
local en HTML5.

Modelo de la vista:En Angular el "Modelo" es algo ms de aquello que se

entiende habitualmente cuando te hablan del MVC tradicional, o sea, las vistas
son algo ms que el modelo de datos. Toda esa informacin, que es til para el
programador pero que no forma parte del modelo del negocio, es a lo que
llamamos el "scope" que es el modelo en Angular.

Introduccin a AngularJS
 Qu ofrece AngularJS?
Client-side template
El sistema de plantillas en AngularJS es diferente del utilizado en otros
frameworks. Por lo general es el servidor el encargado de mezclar la plantilla con
los datos y devolver el resultado al navegador. En AngularJS el servidor
proporciona los contenidos estticos (plantillas) y la informacin que se va a
representar (modelo) y es el cliente el encargado de mezclar la informacin del
modelo con la plantilla para generar la vista.

Data binding
Con AngularJS podemos sincronizar el modelo y la vista automticamente
utilizando ciertas directives del framework. Esta sincronizacin es bidireccional,
es decir, la informacin se sincroniza tanto si cambia el valor en la vista como si
lo hace el valor en el modelo.

Introduccin a AngularJS
 Qu ofrece AngularJS? (Cont.)
Directives
Lasdirectivesson el plato fuerte de AngularJS. Mediante el uso de las mismas
podemos extender la sintaxis de HTML y darle el comportamiento que
deseemos. Podemos creardirectivesa nivel de elemento, de atributo, de clase y
de comentario.

Filters
Losfiltersnos permiten modificar el modo en el que se va a presentar la
informacin al usuario.

La utilizacin de los mismos es similar a los Pipeline de Unix:

{{ expresion | filtro }}

Dondeexpresionpuede ser cualquier tipo de expresin de AngularJS, como una

variable del$scope, yfiltroel nombre del filtro que le queremos aplicar a la
expresin.

Introduccin a AngularJS
 Qu ofrece AngularJS? (Cont.)
Services
Losservicesson los encargados de comunicarse con el servidor para enviar y
obtener informacin que despus ser tratada por loscontrollerspara mostrarla
en las vistas.

Esta parte es ms compleja de explicar con un ejemplo, por el momento nos

basta con saber que los servicesse pueden dividir en tres categoras:
services,factoriesyproviders.

Uno de losservicesincluidos en el framework es$resource, el cual nos permite

encapsular la interaccin con servicios RESTful sin tener que tratar directamente
con las llamadas http.

Introduccin a AngularJS
 Dos mundos en AngularJS

Ahora tenemos que examinar AngularJS bajo otra perspectiva, que nos facilite entender
algunos conceptos y prcticas habituales en el desarrollo. Para ello dividimos el
panorama del framework en dos reas.
Parte del HTML:Es la parte declarativa, con las vistas, as como las directivas y filtros
que nos provee AngularJS, as como los que hagamos nosotros mismos o terceros
desarrolladores.
Parte Javascript puro:Que sern los controladores, factoras y servicios.

Introduccin a AngularJS
 NG-APP
Las directivas son atributos que extienden a los ya existentes en HTML y
comienzan con el prefijo ng- . La directiva ng-app inicializa una nueva aplicacin
de AnguarJS. Sin esta directiva no podemos comenzar a trabajar con nuestra
aplicacin.

<div ng-app="" ng-init="nombre='Paco'">

<p>Nombre: <input type="text" ng-model="nombre"></p>

<p>Has escrito: {{ nombre }}</p>

</div>

En el ejemplo anterior se ha utilizado tambin la directiva ng-init que inicializa

variables y la directiva ng-model que vincula un elemento de formulario con un
dato para que este sea tambin manipulado por el usuario

Introduccin
. a AngularJS
 NG-BIND
Me permite mostrar el scope o elemento manipulado en la vista. Si bien es una
directiva til suele reemplazarse por el uso de {{expresin}} que es ms fcil y til
al momento de trabajar, por ejemplo:

<elemento ng-bind=''dato''> </elemento>

Existe otra forma de mostrar un dato en la vista que es de la siguiente forma:

{{dato}}

Por supuesto esta forma es ms prctica y rpida para manipular nuestro html
y en muchos casos nos termina siendo ms conveniente.

<p> mi {{dato}}</p>

Introduccin a AngularJS
 NG-CONTROLLER
Me permite vincular un controlador con un elemento de mi html
Recordemos que el trabajar asignado un controlador a cierta parte de mi html
tambin genera un contexto o mbito de accin de ese controlador.
Por tanto el controlador que manipula un dato para ser mostrado en la vista, no
podr mostrar ese dato si no fijamos correctamente el controlador anidando
aquellos elementos o expresiones que mostrarn el valor de ese scope o dato

Por ejemplo:

var app = angular.module('miApp', [])

app.controller('miCtrl', function($scope){
$scope.dato = 'valor del dato' })

<elemento ng-app=''miApp'' ng-controller=''miCtrl''> {{dato}}</elemento>

Introduccin a AngularJS
 NG-MODEL
Vincula un elemento de formulario con mi aplicacin y es lo nico obligatorio
para poder a su vez acceder a los datos de ese elemento de formulario (vista) y
Tambin manipularlo desde el cdigo (controlador).

Por caso:

<script>
var app = angular.module('miApp', [])
app.controller('miCtrl', function($scope){
$scope.nombre = 'manuel' })
</script>
<div ng-app=''miApp'' ng-controller=''miCtrl''>
<input type=''text'' ng-model=''nombre''>
</div>
</script>

Introduccin a AngularJS
 NG-SHOW
Me permite mostrar o no cierta informacin en mi documento.
La verdad es que es una directiva que puede utilizarse de manera compleja si
se quiere y daremos algunos ejemplos de la misma:

Como toggle:

<a href ng-click="mostrar = !mostrar">Haceme click</a>

<div ng-show=''mostrar''> contenido </div>

Vinculado a un ng-model
<input type=''checkbox'' ng-model=''caja''>

<div ng-show=''caja''>contenido </div>

.

Introduccin a AngularJS
 NG-SHOW
Con un ng-model ms complejo:

<input type=''text'' ng-model=''campo''>

<div ng-show=''campo == 'juan'''>juan </div>

<div ng-show=''campo == 'ana'''>ana</div>
<div ng-show=''campo == 'roberto'''>roberto </div>

Como producto de una funcin

<input type=''text ng-model=''campo''>

<div ng-show=''mostrar(campo)''>contenido </div>

Nota: ng-show muestra un elemento cuando un es true y ng-hide lo esconde

cuando es true, luego en el resto de los ejemplos ambos funcionaran con las
mismas posibilidades.

Introduccin a AngularJS
 FUNCIONES
El llamado a funciones desde angular es muy sencillo tan slo hay que anteponer
El prefijo ng. Por ejemplo:

<script>
var app = angular.module('miApp', [])
app.controller('miCtrl', function($scope){
$scope.alerta = function(nombre){
alert('hola sos' + nombre)
}
})

</script>

<button ng-click=''alerta('carlos')>Carlos </button>

Introduccin a AngularJS
 NG-SWITCH
Tiene un sistema similar a ng-show y ng-hide pero me permite mostrar u ocultar
elementos de una manera ms cmoda si es que tenemos varias opciones para
mostrar u ocultar . Por ejemplo:

<select ng-model=''menu''>
<option value=''opcion1''> Opcion 1 </option>
<option value=''opcion2''> Opcion 2 </option>
</select>

<elemento ng-switch="menu">
<elemento ng-switch-when="opcion1> opcion 1</elemento>
<elemento ng-switch-when="opcion2> opcion 2</elemento>
<elemento ng-switch-default>...</elemento>
</elemento>

Introduccin a AngularJS
 NG-IF
La verdad es que si bien en su descripcin ms tcnica dice que remueve
elementos si se da que un dato es true o verdadero sera igual su funcionamiento
a ng-show y ng-hide en todo caso, tambin se lo utiliza para plantear ciertas
situaciones como por caso:

<body>
<div ng-if="variable == 5">
<!--hacemos todo lo que queramos-->
</div>
<div ng-if="variable != 5">
<!--hacemos todo lo que queramos-->
</div>

</body>

Introduccin a AngularJS
 NG-REPEAT
Si queremos iterar dentro de un arreglo de objetos lo haremos de la siguiente
forma:

var app = angular.module('miApp', [])

app.controller('ctrl', function($scope){

$scope.datos = [{nombre: 'nombre1', apellido: 'apellido1'},{nombre: 'nombre2',

apellido: 'apellido2'} ]
}

<div ng-app=''miApp''>
<ul ng-controller=''ctrl''>
<li ng-repeat=''dato in datos''
{{dato.nombre}}
{{dato.apellido}}
</li>

Introduccin a AngularJS