AngularJS Conceptos básicos
•Transferir como PPTX, PDF•
1 gostou•2,252 visualizações
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
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a AngularJS Conceptos básicos
Semelhante a AngularJS Conceptos básicos (20)
Mais de Álvaro Alonso González
Mais de Álvaro Alonso González (16)
Último
Último (20)
AngularJS Conceptos básicos
- 2. Contenidos Templates Two- way data binding Directivas Expresiones 2
- 3. Concepto de Template 3 Static Template Dynamic Data Final View <span> <%= units %> <span> var units = 7; <span> 7 <span>
- 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>
- 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. 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. 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. 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. 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. 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. 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