Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Aprender AngularJS Fácil: Expresiones

Jesús Lucas
  • Escrito por Jesús Lucas el 01 de Julio de 2014
  • <1 min de lectura | Programación
Aprender AngularJS Fácil: Expresiones

AngularJS enlaza datos al HTML usando las Expresiones .

Expresiones de AngularJS

La expresiones en AngularJS son escritas dentro de dobles llaves {{ expresión }} . Las expresiones en Angulars enlazan datos al HTML de la misma forma que la directiva ng-bind . AngularJS mostrará los datos de salida exactamente donde la expresión fue escrita. Las expresiones de AngularJS son mucho más que las expresiones de JavaScript. Estas pueden contener literales, operadores y variables. Por ejemplo:
{{ 4 + 4 }} 
{{ nombre + " " + apellidos }}

Números de AngularJS

Los números de AngularJS son como los números en JavaScript: Ejemplo:
<div ng-app="" ng-init="cantidad=1;precio=5">
<p>Total en euros: {{ cantidad * precio }}</p>
</div>
Aquí tienes el mismo ejemplo usando ng-bind :
<div ng-app="" ng-init="cantidad=1;precio=5">
<p>Total en euros: <span ng-bind="cantidad * precio"></span></p>
</div>
Usar ng--init no es muy común. Aprenderás una mejor forma de inicializar datos cuando hablemos de los controladores.

Strings (Cadenas de texto) en AngularJS

Los Strings en AngularJS son como los strings de JavaScript.
<div ng-app="" ng-init="nombre='Paco';apellidos='García Fernández'">
<p>El nombre es {{ nombre + ' ' + apellidos }}</p>
</div>
Aquí tienes el mismo ejemplo usando ng-bind : Ejemplo:
<div ng-app="" ng-init="nombre='Paco';apellidos='García Fernández'">
<p>El nombre es <span ng-bind="nombre + ' ' + apellidos" <="" span=""></span></p>
</div>

Arrays en AngularJS

Los arrays en AngularJS se comportan de la misma manera que en JavaScript. Como vas observando si sabes JavaScript puedes aprender AngularJS de forma rápida. Ejemplo:
<div ng-app="" ng-init="frutas=['manzana','sandia','naranja','fresa']">
<p>Las fruta es {{ frutas[2] }}</p>
<!-- El resultado será: "La fruta es naranja" -->
</div>
Aquí tienes el mismo ejemplo usando ng-bind :
<div ng-app="" ng-init="frutas=['manzana','sandia','naranja','fresa']">
<p>Las fruta es <span ng-bind="frutas[2]"></span></p>
<!-- El resultado será: "La fruta es naranja" -->

Objetos en AngularJS

Al igual que en Javascript, en AngularJS accedemos a las propiedades de los objetos usando el operador . (punto) . Ejemplo:
<div ng-app="" ng-init="coche={marca:'Renault',modelo:'Megane Coupe'}">
<p>La marca del coche es {{ coche.marca }}</p>
<!-- El resultado será: "La marca del coche es Renault" -->
</div>
Usando ng-bind :
<div ng-app="" ng-init="coche={marca:'Renault',modelo:'Megane Coupe'}">
<p>La marca del coche es <span ng-bind="coche.marca"></span></p>
<!-- El resultado será: "La marca del coche es Renault" -->
</div>

En los próximos artículos veremos las directivas y controladores de AngularJS. Suscríbete para estar informado de las últimas actualizaciones y recibe contenidos exclusivos .

Imagen CC por: https://www.flickr.com/photos/pablojimeno/13306586594

Ver Indice Tutorial

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars