Aplicación básica con AngularJS

AngularJS es el framework o marco de trabajo desarrollado por Google para la creación de aplicaciones ricas en interactividad del lado del cliente.

En esta entrada les voy a mostrar la secuencia de pasos, para crear una aplicación básica en AngularJS. Al final nuestra aplicación va a tener el siguiente aspecto:


A nivel funcional la aplicación consiste en calcular el “Nombre completo” concatenando “Primer nombre” y “Segundo nombre”.

Paso número 1: Descargar angular.js

Desde la página principal https://angularjs.org/.

Para crear/editar nuestra aplicación vamos a utilizar WebMatrix que es una herramienta de desarrollo de software creada por Microsoft.

Finalmente, ubicamos AngularJS en el proyecto:

Paso número 2: Crear aplicación AngularJS.

A las aplicaciones Angular debemos ponerles un nombre, en este caso nuestra aplicación se llamará “fullNameApp“.

Posteriormente, creamos un nuevo archivo JS, lo llamaremos app.js, en este archivo escribiremos el código de la aplicación

Una de las ventajas de AngularJS es que trabaja con módulos, nuestra aplicación “fullNameApp” es en sí un módulo, es decir, una unidad de software auto-contenida y funcional:

Ahora debemos importar el archivo con el código de la aplicación “app.js” a la página donde queremos visualizar nuestra app. No olvide poner primero la referencia a angular.min.js y luego la referencia al app.js, debido que la aplicación necesita de angular.min.js.

Definimos el módulo de la aplicación en el archivo app.js:

Los módulos Angular, pueden tener controladores (controllers), estos controllers son los objetos/pseudo-clases que nos permiten conectar la vista con el objeto $scope, permitiéndonos de esta forma, establecer un enlace (databinding) en dos direcciones, de esta forma, cuando actualicemos las propiedades del objeto $scope, este cambio se verá reflejado automáticamente en la vista/presentación; por lo tanto vamos a definir un controller llamado “fullNameCtrl” para el formulario de nuestra aplicación, esto se hace a través del método controller() del módulo que hemos definido “fullNameApp“.

La parte front-end (formulario) de nuestra aplicación está representada por un objeto que tiene la siguiente definición:

Atributos:

primerNombre : ‘string’,

segundoNombre : ‘string’,

nombreCompleto : ‘string’,

Métodos:

    guardar(),

limpiar().

Debemos encapsular este objeto en el $scope de nuestro controlador, note como el objeto $scope, ahora tiene las propiedades primerNombre, segundoNombre, nombreCompleto y los métodos: guardar() y limpiar().

Ahora que hemos definido nuestro controller, debemos codificar la vista que se va a conectar a este controller que acabamos de definir. El identificador/nombre del controller en el atributo ng-controller (

), debe ser igual al que especificamos en el app.js, es decir “fullNameCtrl“.

Continuamos definiendo el código HTML de nuestra aplicación, note como el atributo ng-model=”primerNombre” del input text, este debe coincidir con el atributo definido en el $scope de nuestro controller. Note que tenemos nuestra aplicación llamada “fullNameApp“, dentro de esta aplicación hemos definido un controller denominado “fullNameCtrl“, dentro de este controller se encuentra el objeto $scope, este objeto se compone de los atributos (primerNombre, segundoNombre, nombreCompleto), podemos utilizar estos atributos en el código HTML como se ve a continuación:

Esa misma relación aplicación > controller > $scope > atributos, la podemos ver en el archivo app.js:


Posteriormente, debemos completar el código de nuestra vista HTML, verifique el código de los botones “Guardar” y “Limpiar”, cada botón de estos está llamando a los métodos guardar() y limpiar() del $scope respectivamente, es decir, se ejecutan las líneas $scope.guardar = function(){…} y $scope.limpiar = function(){…} del archivo app.js, dentro del método guardar(), estamos modificando los valores del atributo “nombreCompleto“, AngularJS se encarga de refrescar estos valores automáticamente en la vista/formulario, ahorrándonos el trabajo de tener que seleccionar cada campo de texto del DOM y cambiarle los valores uno por uno nosotros mismos.

Este es el código del controller que contiene el $scope, en este código podemos apreciar la forma de modificar los atributos del $scope quien a su vez actualiza la vista de usuario:

Este es el resultado final:

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s