Expresiones de AngularJS
AngularJS usa expresiones para unir datos a HTML.
La expresión de AngularJS está escrita en aparatos ortopédicos dobles: {{Expression}} .
Las expresiones AngularJS unen los datos a HTML, que es similar a la directiva NG unida .
AngularJS "emitirá" datos en la ubicación donde se escribe la expresión.
Las expresiones AngularJS son muy parecidas a las expresiones de JavaScript : pueden contener literales, operadores y variables.
Instancia {{5 + 5}} o {{FirstName + "" + LastName}}
Código de ejemplo:
< }} </p> </div> </body> </html>
Resultados de ejecución:
Mi primera expresión: 10
Números de AngularJS
Los números de AngularJS son como números de JavaScript:
Código de ejemplo:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div -pp-app = "" "" "" "" "" "" "" "," "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "" "," "" "" "", "" "" "" "," "" "" "" "," "" "" "", "" "" "" "", " ng-init = "cantidad = 1; costo = 5"> <p> Precio total: {{cantidad * costo}} </p> </div> </body> </html>Resultados de ejecución:
Precio total: 5
El mismo ejemplo usando NG-Bind:
Código de ejemplo:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div -pp-app = "" "" "" "" "" "" "" "," "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "" "," "" "" "", "" "" "" "," "" "" "" "," "" "" "", "" "" "" "", " ng-init = "cantidad = 1; costo = 5"> <p> Precio total: <span ng-bind = "cantidad * costo"> </span> </p> </div> </bod> </html>
Resultados de ejecución:
Precio total: 5
Nota: Usar Ng-Init no es muy común. Aprenderá una mejor manera de inicializar los datos en el capítulo del controlador.
Cadena AngularJS
Las cadenas de AngularJS son como cadenas JavaScript:
Código de ejemplo:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div -pp-app = "" "" "" "" "" "" "" "," "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "" "," "" "" "", "" "" "" "," "" "" "" "," "" "" "", "" "" "" "", " ng-init = "firstName = 'John'; LastName = 'Doe'"> <p> Name: {{FirstName + "" + LastName}} </p> </div> </body> </html>Resultados de ejecución:
Nombre: John Doe
El mismo ejemplo usando NG-Bind:
Código de ejemplo:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div -pp-app = "" "" "" "" "" "" "" "," "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "" "," "" "" "", "" "" "" "," "" "" "" "," "" "" "", "" "" "" "", " ng-init = "firstName = 'John'; LastName = 'Doe'"> <p> Nombre: <span ng-bind = "firstName + '' + lastName"> </span> </p> </div> </body> </html>
Resultados de ejecución:
Nombre: John Doe
Objetos AngularJS
Los objetos AngularJS son como objetos JavaScript:
Código de ejemplo:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div -pp-app = "" "" "" "" "" "" "" "," "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "" "," "" "" "", "" "" "" "," "" "" "" "," "" "" "", "" "" "" "", " ng-init = "persona = {FirstName: 'John', LastName: 'Doe'}"> <p> El apellido es {{Person.lastName}} </p> </div> </body> </html>Resultados de ejecución:
Llamado Doe
El mismo ejemplo usando NG-Bind:
Código de ejemplo:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div -pp-app = "" "" "" "" "" "" "" "," "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "" "," "" "" "", "" "" "" "," "" "" "" "," "" "" "", "" "" "" "", " ng-init = "persona = {FirstName: 'John', LastName: 'Doe'}"> <p> El apellido es <span ng-bind = "persona.lastname"> </span> </p> </div> </body> </html>Resultados de ejecución:
Llamado Doe
Matriz AngularJS
Las matrices AngularJS son como matrices JavaScript:
Código de ejemplo:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div -pp-app = "" "" "" "" "" "" "" "," "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "" "," "" "" "", "" "" "" "," "" "" "" "," "" "" "", "" "" "" "", " ng-init = "puntos = [1,15,19,2,40]"> <p> El tercer valor es {{puntos [2]}} </p> </div> </body> </html>Resultados de ejecución:
El tercer valor es 19
El mismo ejemplo usando NG-Bind:
Código de ejemplo:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div -pp-app = "" "" "" "" "" "" "" "," "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "" "," "" "" "", "" "" "" "," "" "" "" "," "" "" "", "" "" "" "", " ng-init = "puntos = [1,15,19,2,40]"> <p> El tercer valor es <span ng-bind = "puntos [2]"> </span> </p> </div> </body> </html>
Resultados de ejecución:
El tercer valor es 19
Expresiones de AngularJS y expresiones JavaScript
Similar a las expresiones de JavaScript, las expresiones AngularJS pueden contener letras, operadores y variables.
A diferencia de las expresiones de JavaScript, las expresiones AngularJS se pueden escribir en HTML.
A diferencia de las expresiones de JavaScript, las expresiones AngularJS no respaldan juicios condicionales, bucles y excepciones.
A diferencia de las expresiones de JavaScript, las expresiones AngularJs admiten filtros.
Lo anterior es una compilación de materiales de expresión de AngularJS. Continuaremos agregándolos más tarde. Espero que pueda ayudar a aprender angularjs compañero de clase.