Angular 1

Introducción

Angular 1 es un framework javascript que facilita la creación de aplicaciones web dinámicas. Las características principales son:

  • extiende HTML con nuevos elementos de marcado llamadas Directivas: tags y atributos; el desarrollador crea las páginas html (templates) de su aplicación utilizando estos nuevos elementos. El objetivo es que la aplicación se entienda al leer los templates.

  • tiene un modelo (scope) donde se encadena los datos (data binding) de la vista (template) con un controlador de tal forma que el desarrollador no debe preocuparse por la actualización de la información que se está desplegando.

El siguiente ejemplo tomado de angular guide ilustra las nociones anteriores. La siguiente es una página html normal (estática) que muestra dos cajas de entrada pero no hay comportamiento definido. (Por favor ejecútela en plunker.io)

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-guide-concepts-1-production</title> </head> <body > <div > <b>Invoice:</b> <div> Quantity: <input type="number" min="0" > </div> <div> Costs: <input type="number" min="0" > </div> <div> <b>Total:</b> </div> </div> </body> </html> <!-- Copyright 2016 Google Inc. All Rights Reserved. Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at http://angular.io/license -->

En la siguiente sección usaremos Angular sobre la página anterior para agregarle comportamiento.

Directivas

Queremos que el usuario pueda ingresar datos en los campos de entrada y se calcule el valor total. Utilizando Directivas Angular predefinidas (por favor ejecute de nuevo en plunker):

{% raw %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-guide-concepts-1-production</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> </head> <body> <div ng-app ng-init="desc='item1';qty=1;cost=2"> <p><b>Shopping Cart</b></p> <table class="table"> <tr> <th>Description</th> <th>Qty</th> <th>Cost</th> <th>Total</th> <th></th> </tr> <tr> <td> <input type="text" ng-model="desc" ng-required class="input-mini"> </td> <td> <input type="number" ng-model="qty" ng-required class="input-mini"> </td> <td> <input type="number" ng-model="cost" ng-required class="input-mini"> </td> <td>{{qty * cost| currency}}</td> </tr> </table> </div> </body> </html> <!-- Copyright 2016 Google Inc. All Rights Reserved. Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at http://angular.io/license --> {% endraw %}

En este ejemplo, se ha agregado al HTML varios elementos:

  • Se ha incluido la librería de angular
  • Se ha añadido elementos de marcado de angular:
Elemento Significado
ng-app Indica que es una aplicación angular.
ng-model Permite definir variables que tomarán valor en el template y que se sincronizarán con el controlador (este ejemplo aún no hay controlador).
ng-init Permite inicializar las variables ng-model.
  • Se utiliza una expresión {{qty * cost | currency}} Tiene dos partes, la expresión que se evaluará y el formato en el que se desplegará la respuesta. Podemos agregar el atributo ng:required a los campos de entrada y forzar que el usuario siempre escriba un valor:

<input type="number" min="0" ng-model="cost" ng:required>

Las directivas son marcadores en un elemento DOM (como un atributo, nombre del elemento, comentario o clase CSS). El compilador de HTML de Angular:

  • Asocia con el elemento DOM un comportamiento especifico, o puede,
  • Transformar el elemento DOM y sus hijos.

results matching ""

    No results matching ""