25 DE ABRIL DE 2016

ANGULAR JS DE 0 A 100
EXPRESIONES EN ANGULAR JS
MSC. NORMAN ARAUZ
NORMAN SALVADOR ARUZ LPEZ
UNAN MANAGUA, FAREM MATAGALPA

Insertamos expresiones en Angular

Las expresiones son la forma en que angular tiene como representar valores dentro de un
documento HTML, es decir una especie de variables, es la forma en que nosotros mostramos en
un documento el resultado de nuestros procesos dentro de nuestra app.
Tomemos como punto de partida la plantilla HTML que aparece en la siguiente imagen,
recordemos tambin que debemos agregar la directiva ng-app:
Directiva angular para convertir
html en app de angular

De esta manera hemos convertido nuestro documento HTML en una app de Angular. Lo
siguiente ser la explicacin sobre las expresiones.
Las expresiones pueden estar en cualquier parte del documento HTML, por ejemplo
iniciaremos insertando una expresin dentro de un prrafo.
Una expresin tiene una sintaxis muy sencilla de utilizar, debo hacerla de la siguiente manera
{{expresin}}. En el siguiente ejemplo escribo una cadena de texto y vamos a saludar:

Expresin cadena es
constante

En el navegador se visualiza:

Ahora estamos viendo una cadena de

texto dentro de nuestro documento,
las expresiones pueden estar en
cualquier parte, por ejemplo si yo no
quisiera que estuviera dentro del
prrafo y en lugar de ello quisiera que
este dentro del titular entonces hago
lo siguiente:

En el navegador:
Vemos como ahora mi
expresin
aparece
completamente
integrada en el titular.
Las expresiones no
solamente
van
a
soportar cadenas de
texto, podremos incluir
tambin nmeros, por
ejemplo vamos a escribir un {{10}}:

En el navegador:
Vemos que nos muestra un nmero,
adems podemos realizar procesos y
clculos simples o complejos, probaremos
con una situacin aritmtica simple para
ilustrar el ejemplo, haremos: {{2+3*4}}
cuyo resultado ser 14 por la presidencia
de operadores, es decir al igual que otros
lenguajes de programacin angular
respeta esta regla.

Veamos el resultado en Google Chrome:

Como vemos presenta el resultado del

clculo. Vamos a ver otro ejemplo
contralando la presidencia de operadores es
decir utilizando parntesis, (2 + 3) * 4 luego
veremos el resultado de esta expresin en el
navegador:

En el navegador:
Vemos como el formato ha variado, por la
precedencia de operadores utilizando
aparentemente la misma expresin.

De esta manera queda demostrado que

Angular JS tambin sigue la precedencia de
operadores de manera nativa al igual que
otros diferentes lenguajes de programacin
orientados o no a objetos.
Las expresiones tambin las podemos mezclar con texto dentro de un documento, as que
podemos utilizar el resultado de la expresin anterior en conjunto con otro texto, por ejemplo
agregaremos fuera de las llaves de cierre de la expresin un texto cualquiera:

En el navegador se visualiza lo siguiente:

Vemos entonces que se representa como un
solo elemento, vamos a continuar con este
proceso y demostrar como se pueden
utilizar mltiples expresiones dentro del
mismo documento: Vamos a agregar otro
prrafo, y dentro de l agregaremos otra
expresin.

En el navegador:

Todos estos clculos se realizan al momento

de cargar la aplicacin asi que ser
totalmente transparente al usuario. Ahora
si inspeccionamos el elemento desde el
navegador veremos que dentro del prrafo
angular ha agregado una directiva de
manera automtica en cada lnea donde
realizamos el clculo, para inspeccionar el
elemento recordemos que haciendo click
derecho sobre alguna parte del navegador
para cargar lo que normalmente no es
visible para el usuario en tiempo de
ejecucin:

Vemos que nos aparece integrada la expresin con el resto del contenido HTML, y esto ser
totalmente transparente al usuario.
La siguiente parte de las expresiones en angular es el uso de filtros. Veamos en el siguiente
apartado de Uso de filtros.

Uso de filtros en Angular JS

Para el uso de filtros en Angular tomaremos en cuenta la siguiente plantilla:

Los filtros en angular, nos permiten darle formato a nuestra informacin en HTML, de esta
forma podremos cambiar ligeramente la informacin que obtenemos de nuestra app para que
se ajuste a nuestras necesidades, como vemos en la imagen anterior ya tenemos ligado el
documento al framework de angular y adems de eso hemos indicado que el documento se trata
de una aplicacin de angular.
Vamos a imaginar que tenemos una tienda de verduras, donde venderemos diferentes tipos de
verduras, crearemos una lista con tres tipos de elementos diferentes:

Vamos a guardar y verlo dentro de Google Chrome:

Como vemos se ha creado una lista con los

elementos indicados en el documento HTML. Lo
siguiente ser agregar los precios para lo cual
agregaremos
expresiones
con
formatos
diferentes para cada valor, esta es la utilidad de
los filtros:

En el navegador aparecer:
El filtro hace que el nmero que agregamos sea
tratado como una moneda, como se logra eso,
estamos trabajando con un filtro que le ha agregado
formato al valor que tenamos. En el caso que no
definamos un formato en especfico se definir por
defecto como si el formato de la moneda fuese en
dlares.

Vamos con el siguiente elemento, supongamos que el precio del brcoli est dado en euros,
veamos:

Guardamos los cambios y revisamos el navegador:

Vemos ahora que el formato de texto ya es ms
especfico, ahora la moneda queda representada
como un euro, podemos realizar el siguiente
cambio, reemplazando el euro por C$, de esta
manera habr una representacin para nuestra
moneda nacional.

Listo, ahora podemos ver que el filtro se puede

personalizar en dependencia del tipo de moneda
que queramos representar. Supongamos que
necesitamos especificar el origen de nuestra
espinaca, es decir es de Nicaragua, pero la
informacin a nivel de formato es incorrecta, por
ejemplo en lugar de Nicaragua dice NICaraGua, esto
lo podemos arreglar tambin con el uso de filtros,
veamos:

Luego en el navegador:
Vemos que lgicamente el error
persiste, tanto en nuestro cdigo
HTML como en el navegador, ahora
corregiremos este y cualquier otro
error relacionado que pudiese
ocurrir:

Guardamos los cambios y vemos en el navegador, igualmente podemos utilizar el filtro

uppercase que indica todo en maysculas.
Lowercase

Uppercase

De esta manera evitaremos cualquier error de escritura en cuanto a uso de caracteres. Los
filtros ayudan a dar formato rpido a la informacin que tengamos en angular js.