martes, 10 de noviembre de 2015

AngularJS- Mi primer ejemplo

Gracias por leer mi blog. Bienvenid@ al primer post sobre AngularJS.

HTML es estupendo para declarar documentos estáticos, pero flaquea cuando tratamos de usarlo para declarar vistas dinámicas en aplicaciones web. AngularJS te permite extender el vocabulario de HTML para tu aplicación. El entorno resultante es extraordinariamente expresivo, legible y rápido de desarrollar.

AngularJS es un framework basado en JavaScript, el cual es distribuido en un archivo JS y puede ser agregado a su sitio web por medio del "tag script":

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

AngularJS extiende el HTML usando "ng-directives":
  • La directiva ng-app define una aplicación AngularJS.
  • La directiva ng-model une el valor del control HTML (input, select, text area) con la data de mi aplicación.
  • La directiva ng-bind une la data de mi aplicación con las vistas del HTML.
El ejemplo que vemos a continuación, nos demuestra como AngularJS construye contenido dinámico sin intervención de JQuery ó varias líneas de JavaScript, simplemente bastaron ciertas directivas propias del mismo framework.

AngularJS inicia automáticamente cuando el sitio web es cargado. La directiva ng-app le indica al framework que el elemento <div> es el "dueño" de la aplicación.

La directiva ng-model une el valor del input field con la variable de la aplicación llamada "nombre".

La directiva ng-bind permite unir la variable "nombre" al elemento html <p>, el cual es mostrado en la vista.