Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Curso AngularJS - 2. conceptos básicos

233 views

Published on

Curso AngularJS.

Temas:
1. Introducción
2. Conceptos básicos
3. Módulos y controladores
4. Filtros y servicios
5. Rutas
6. Formularios
7. Temas avanzados

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Curso AngularJS - 2. conceptos básicos

  1. 1. AngularJS Conceptos básicos Álvaro Alonso
  2. 2. Contenidos  Templates  Two- way data binding  Directivas  Expresiones 2
  3. 3. Concepto de Template 3 Static Template Dynamic Data Final View <span> <%= units %> <span> var units = 7; <span> 7 <span>
  4. 4. One-way Data Binding 4
  5. 5. Two-way Data Binding 5
  6. 6. Primera aplicación Angular 6  Inicialización  Asociar un input al modelo  Data binding en HTML <input ng-model=”myData”> <p> {{myData}} </p> <html ng-app>
  7. 7. EJEMPLO Primera aplicación Angular 7
  8. 8. Two-way Data Binding 8
  9. 9. Directivas  Vocabulario HTML extendido  Instrucciones sobre cómo combinar datos del modelo en la vista  ng-app  Indica el elemento raíz de la aplicación Angular  ng-model  Asocia un input, select, textarea a una propiedad del scope  Otras directivas  ng-init, ng-controller, ng-repeat …  Creación de nuestras propias directivas 9
  10. 10. Directivas  HTML no distingue entre mayúsculas y minúsculas  Angular normaliza los nombres de las directivas  Elimina x- y data- del principio  Convierte los símbolos : - _  Todas estas directivas equivalen a ngBind  Recomendado usar formato ng-bind Normalización 10 <span ng-bind="name"></span> <br/> <span ng:bind="name"></span> <br/> <span ng_bind="name"></span> <br/> <span data-ng-bind="name"></span> <br/> <span x-ng-bind="name"></span> <br/>
  11. 11. Directivas  Pueden usarse directivas de varias maneras  Etiquetas  Atributos  Comentarios  Clases  La directiva myDIr puede usarse de las siguientes formas  Recomendado usar etiqueta o atributo Uso 11 <my-dir></my-dir> <span my-dir="exp"></span> <!-- directive: my-dir exp --> <span class="my-dir: exp;"></span>
  12. 12. Expresiones  Fragmentos de código tipo JavaScript que se insertan en el HTML  Se escriben entre dobles corchetes {{ }}  O directamente en atributos de directivas  Diferencias con código JavaScript puro  Se evalúan con el objeto scope  “Perdonan” valores undefined o null  Pueden usarse filtros para darles formato  No pueden usarse condicionales, bucles o excepciones  No pueden declararse funciones  No pueden crearse expresiones regulares  No puede usarse el operador new  No pueden usarse operadores bitwise (&, |, …) 12 1+2={{ 1+2 }} ng-click="functionExpression()"
  13. 13. One-time data binding  Expresiones que sólo se actualizan la primera vez que cambia el modelo  Se indican mediante poniendo al inicio ::  Pueden ser útiles en casos especiales para no sobrecargar la aplicación 13 <p id="one-time-binding-example">One time binding: {{::name}}</p> <p id="normal-binding-example">Normal binding: {{name}}</p>
  14. 14. EJERCICIO Two-way Data Binding 14  Vamos a implementar una aplicación de gestión de historiales médicos  Comenzamos con la ficha de un paciente  Implementar aplicación de angular que calcula el Índice de Masa Corporal del paciente  ICM: https://es.wikipedia.org/wiki/%C3%8Dndice_de_masa_corporal  Los valores de estatura y peso deben introducirse en dos inputs y el resultado imprimirse de forma dinámica gracias a two-way data binding
  15. 15. Documentación  Templates  https://docs.angularjs.org/guide/templates  Data binding  https://docs.angularjs.org/guide/databinding  Directivas  https://docs.angularjs.org/guide/directive  Expresiones  https://docs.angularjs.org/guide/expression 15
  16. 16. AngularJS Conceptos básicos Álvaro Alonso

×