Las expresiones están escritas entre dobles llaves: {{expresión}}
Las expresiones unen los datos a HTML del mismo modo que lo hace la directiva ng-bind
Las expresiones en AngularJS son muy parecidas a las de JavaScript, pudiendo mantener; literales, operadores y variables.
Si eliminamos la directiva ng-app del div, el navegador solo mostrará la expresión como texto ya que no se ejecuta el script.
Variables en AngularJS
Numéricas
Las variables se deben de declarar para que podamos utilizarlas, para ello usamos la directiva ng-init como podemos ver en el siguiente ejemplo:
Como puede verse se inicializan las dos variables con ng-init y tras ello se realiza la operación aritmetica en la expresión.
Este mismo ejemplo con ng-bind quedaría:
Cadenas
De forma análoga a como se declaran las variables con números podemos declarar y usar las cadenas y trabajar con ellas:
JSON
También podemos declarar y trabajar con objetos tipo JSON siguiendo la siguiente forma:
Arrays
Y finalmente declaramos y usamos un array:
A pesar de esta forma de inicializar las variables, no es muy común hacerlo de este modo, aprenderemos una forma mejor cuando hablemos de los controladores, pero de momento nos es valida, ya que nos ha servido para poder mostrar como se llaman desde el propio código HTML.
Las expresiones unen los datos a HTML del mismo modo que lo hace la directiva ng-bind
Las expresiones en AngularJS son muy parecidas a las de JavaScript, pudiendo mantener; literales, operadores y variables.
<!DOCTYPE html>
<html>
<body>
<div ng-app>
<p>Mi primera expresión: {{ 5 + 6 }}</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Si eliminamos la directiva ng-app del div, el navegador solo mostrará la expresión como texto ya que no se ejecuta el script.
Variables en AngularJS
Numéricas
Las variables se deben de declarar para que podamos utilizarlas, para ello usamos la directiva ng-init como podemos ver en el siguiente ejemplo:
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-init="cantidad=3;coste=5">
<p>Total a pagar: {{ cantidad * coste }}</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Como puede verse se inicializan las dos variables con ng-init y tras ello se realiza la operación aritmetica en la expresión.
Este mismo ejemplo con ng-bind quedaría:
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-init="cantidad=3;coste=5">
<p>Total a pagar: <span ng-bind="cantidad * coste"></span></p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Cadenas
De forma análoga a como se declaran las variables con números podemos declarar y usar las cadenas y trabajar con ellas:
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-init="nombre='Miguel';apellido='López'">
<p>el nombre completo es: {{ nombre + " " + apellido }}</p>
<p>el nombre completo con ng-bind es: <span ng-bind="nombre + ' ' + apellido"></span></p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
JSON
También podemos declarar y trabajar con objetos tipo JSON siguiendo la siguiente forma:
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-init="persona={nombre:'Miguel',apellido:'López'}">
<p>El apellido es {{ persona.apellido }}</p>
<p>El nombre con ng-bind es <span ng-bind="persona.nombre"></p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Arrays
Y finalmente declaramos y usamos un array:
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-init="puntos=[0,15,30,40]">
<p>El tercer resultado de puntos es: {{ puntos[2] }}</p>
<p>El cuarto resultado segun ng-bind es: <span ng-bind="puntos[3]"></span></p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
A pesar de esta forma de inicializar las variables, no es muy común hacerlo de este modo, aprenderemos una forma mejor cuando hablemos de los controladores, pero de momento nos es valida, ya que nos ha servido para poder mostrar como se llaman desde el propio código HTML.
No hay comentarios:
Publicar un comentario