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

 

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Aprender AngularJS Fácil: Filtros

Aprender AngularJS Fácil: Filtros

Frameworks

08 de Julio de 2014

Los filtros se pueden agregar a las expresiones y a las directivas mediante un carácter de barra vertical | . Los filtros de AngularJS se usan para transformar datos.

Aprender AngularJS Fácil: Controladores

Aprender AngularJS Fácil: Controladores

Frameworks

03 de Julio de 2014

Los controladores en AngularJS se encargan de controlar los datos de las aplicaciones AngularJS. Los controladores son Objetos JavaScript. En este post os enseñaremos cómo se utilizan los controlad...

Curso de Angular JS 1.3 y TypeScript

Curso de Angular JS 1.3 y TypeScript

curso

Consigue ser un experto desarrollador de Aplicaciones Web con AngujarJs 1.6 el framework javascript de Google en su versión más usada.

Duración: 16 horas y 25 minutos

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