Primeros pasos con AngularJS

AngularJS es un framework de JavaScript de código abierto mantenido por Google que ayuda con la gestión de lo que se conoce como aplicaciones de una sola página. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas sean más fáciles.

AngularJS está construido en torno a la creencia de que la programación declarativa es la que debe utilizarse para generar interfaces de usuario y enlazar componentes de software. Este framework adapta y amplía el HTML tradicional para servir mejor contenido dinámico a través de un data-binding bidireccional que permite la sincronización automática de modelos y vistas. Como resultado, AngularJS pone menos énfasis en la manipulación del DOM y mejora la testeabilidad y el rendimiento.

Angular es una solución completa que incluye prácticamente todos los aspectos que puedes necesitar para crear una aplicación cliente en javascript.

Para utilizar este framework en vuestras aplicaciones Web tan solo tenéis que acceder a la página oficial de AngularJS y descargar el archivo js para incluirlo en vuestra página como por eejmplo de la siguiente forma:

Source code

<script src="js/angular.min.js"></script>

Vamos estudiar el siguiente ejemplo sencillo que tan solo muestra un campo de texto para ingresar tu nombre:

Source code

<div ng-app="">
  <p>Escribe tu nombre: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

La directiva ng-app está indicando que la apliación AngularJS reside dentro de este elemento <div>.

La directiva ng-model está indicando que se está asociando el valor del campo de texto con una variable de la aplicación (modelo).

Y podemos usar la expresión de AngularJS {{name}} para mostrar el modelo en la vista.

Todo lo que se escribe en el input o campo de texto (modelo) se refresca automáticamente en la vista.

Ver este ejemplo sencillo en funcionamiento