Embed Size (px)
Citation preview
8/15/2019 3- Expresiones en Angular JS
http://slidepdf.com/reader/full/3-expresiones-en-angular-js 1/12
ANGULAR JS DE 0 A 100
EXPRESIONES EN ANGULAR JSMSC. NORMAN ARAUZ
NORMAN SALVADOR ARÁUZ LÓPEZUNAN MANAGUA, FAREM MATAGALPA
25 DE ABRIL DE 2016
8/15/2019 3- Expresiones en Angular JS
http://slidepdf.com/reader/full/3-expresiones-en-angular-js 2/12
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 también que debemos agregar la directiva ng-app:
De esta manera hemos convertido nuestro documento HTML en una app de Angular. Lo
siguiente será la explicación sobre las expresiones.
Las expresiones pueden estar en cualquier parte del documento HTML, por ejemplo
iniciaremos insertando una expresión dentro de un párrafo.
Una expresión tiene una sintaxis muy sencilla de utilizar, debo hacerla de la siguiente manera{{expresión}}. En el siguiente ejemplo escribo una cadena de texto y vamos a saludar:
En el navegador se visualiza:
Expresión cadena es
Directiva angular para convertir
html en app de angular
8/15/2019 3- Expresiones en Angular JS
http://slidepdf.com/reader/full/3-expresiones-en-angular-js 3/12
8/15/2019 3- Expresiones en Angular JS
http://slidepdf.com/reader/full/3-expresiones-en-angular-js 4/12
En el navegador:
Vemos que nos muestra un número,
además podemos realizar procesos y
cálculos simples o complejos, probaremos
con una situación aritmética 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 programación angular
respeta esta regla.
Veamos el resultado en Google Chrome:
8/15/2019 3- Expresiones en Angular JS
http://slidepdf.com/reader/full/3-expresiones-en-angular-js 5/12
Como vemos presenta el resultado del
cálculo. Vamos a ver otro ejemplo
contralando la presidencia de operadores es
decir utilizando paréntesis, (2 + 3) * 4 luego
veremos el resultado de esta expresión en el
navegador:
En el navegador:
Vemos como el formato ha variado, por la
precedencia de operadores utilizando
aparentemente la misma expresión.
De esta manera queda demostrado que
Angular JS también sigue la precedencia de
operadores de manera nativa al igual que
otros diferentes lenguajes de programación
orientados o no a objetos.
Las expresiones también las podemos mezclar con texto dentro de un documento, así que
podemos utilizar el resultado de la expresión anterior en conjunto con otro texto, por ejemplo
agregaremos fuera de las llaves de cierre de la expresión un texto cualquiera:
8/15/2019 3- Expresiones en Angular JS
http://slidepdf.com/reader/full/3-expresiones-en-angular-js 6/12
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 puedenutilizar múltiples expresiones dentro del
mismo documento: Vamos a agregar otro
párrafo, y dentro de él agregaremos otra
expresión.
En el navegador:
8/15/2019 3- Expresiones en Angular JS
http://slidepdf.com/reader/full/3-expresiones-en-angular-js 7/12
Todos estos cálculos se realizan al momento
de cargar la aplicación asi que será
totalmente transparente al usuario. Ahora
si inspeccionamos el elemento desde el
navegador veremos que dentro del párrafo
angular ha agregado una directiva demanera automática en cada línea donde
realizamos el cálculo, 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
ejecución:
Vemos que nos aparece integrada la expresión 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.
8/15/2019 3- Expresiones en Angular JS
http://slidepdf.com/reader/full/3-expresiones-en-angular-js 8/12
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 información en HTML, de estaforma podremos cambiar ligeramente la información 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 además de eso hemos indicado que el documento se trata
de una aplicación 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:
8/15/2019 3- Expresiones en Angular JS
http://slidepdf.com/reader/full/3-expresiones-en-angular-js 9/12
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 número que agregamos seatratado como una moneda, como se logra eso,
estamos trabajando con un filtro que le ha agregado
formato al valor que teníamos. En el caso que no
definamos un formato en específico se definirá por
defecto como si el formato de la moneda fuese en
dólares.
Vamos con el siguiente elemento, supongamos que el precio del brócoli está dado en euros,veamos:
8/15/2019 3- Expresiones en Angular JS
http://slidepdf.com/reader/full/3-expresiones-en-angular-js 10/12
Guardamos los cambios y revisamos el navegador:
Vemos ahora que el formato de texto ya es más
específico, ahora la moneda queda representada
como un euro, podemos realizar el siguiente
cambio, reemplazando el euro por C$, de esta
manera habrá una representación para nuestra
moneda nacional.
8/15/2019 3- Expresiones en Angular JS
http://slidepdf.com/reader/full/3-expresiones-en-angular-js 11/12
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
información a nivel de formato es incorrecta, porejemplo en lugar de Nicaragua dice NICaraGua, esto
lo podemos arreglar también con el uso de filtros,
veamos:
Luego en el navegador:
Vemos que lógicamente el error
persiste, tanto en nuestro código
HTML como en el navegador, ahora
corregiremos este y cualquier otro
error relacionado que pudiese
ocurrir:
8/15/2019 3- Expresiones en Angular JS
http://slidepdf.com/reader/full/3-expresiones-en-angular-js 12/12
Guardamos los cambios y vemos en el navegador, igualmente podemos utilizar el filtro
uppercase que indica todo en mayúsculas.
Lowercase Uppercase
De esta manera evitaremos cualquier error de escritura en cuanto a uso de caracteres. Losfiltros ayudan a dar formato rápido a la información que tengamos en angular js.
