Archivo de la categoría: ASP.NET MVC

AngularJs, el framework MVC de JavaScript

En la actualidad, los sitios web son mucho más dinámicos ofreciendo una experiencia de usuario agradable y ligera realizadas con las tecnologías web que dominan esta era; HTML5, Javascript y CSS3 son los líderes indiscutibles para el desarrollo de nuestros front-end.

Cómo sabemos HTML es un lenguaje estático y requiere de Javascript para hacerlo dinámico. Sin embargo, esta dinamización de documentos HTML es una tarea que conlleva trabajo.

En anterioridad a este tipo de frameworks podíamos modificar nuestro DOM mediante métodos conocidos cómo el getElementById o createElement, entre otros, que nos permitían modificar según nuestra necesidad el documento HTML. Todo el código JS que íbamos desarrollando no seguía un patrón y, con el tiempo, todo era difícilmente manejable y podía terminar generando un Spaguetti Code.

En este punto, frameworks de desarrollo cómo AngularJS y el patrón MVC (Modelo, Vista, Controlador) nos puede ser de gran ayuda.

AngularJs es un framework MVC de JavaScript que permite crear aplicaciones SPA (Single Page Application) y que corre al lado del cliente (browser) para dinamizar documentos HTML.

Este framework nos trae un enfoque dinámico que debemos aplicar sobre los documentos HTML estáticos mediante la vinculación de elementos de nuestro documento HTML con nuestro modelo de datos (data binding). De esta forma, definimos un modelo de datos que se corresponde con determinadas partes de nuestro documento HTML y que, cuándo se produzcan cambios que deban modificar la vista, actualizarán este documento.

AngularJS extiende nuestro documento HTML

Mediante el uso de las directivas (Directives) ng- y las expresiones (Expressions) para bindear datos a las vistas, angular, extiende nuestro documento HTML.

La directiva ng-app define que la aplicación web es una aplicación web que hace uso de angular.
La directiva ng-model se encarga de hacer los bindear nuestras propiedades del modelo de datos con los diferentes controles de HTML.
La directiva ng-bind realiza el binding de nuestro modelo de datos en la View.

Veamos un ejemplo para ver con detalle su uso,

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/angular.min.js"></script>
    <script src="app/app.module.js"></script>
    <script src="app/app.controller.main.js"></script>
</head>
<body ng-app="app" ng-controller="Food as vm">
    <input type="text" ng-model="vm.item" placeholder="Entrar alimento" />
    <p>Tengo que comprar {{vm.item}}!</p>
</body>
</html>

Cómo vemos en la estructura de nuestro documento HTML lo primero que debemos hacer es descargar angular y poner una referencia a la librería.

Toda aplicación realizada con angular requiere ser inicializada mediante la etiqueta ng-app que hará referencia a nuestro modulo. Tenemos que ver el modulo cómo un contenedor de las diferentes partes de nuestra aplicación. Toda nuestra aplicación estará compuesta por módulos y a cada modulo le pertenecerá n controladores.

En nuestro fichero app.module.js tendremos la siguiente declaración para exponer nuestro modulo app,

(function () {
    angular.module('app', []);
})();

Y en el fichero app.controller.main.js tendremos el controlador foodController perteneciente al modulo app,

(function () {
    angular
        .module('app')
        .controller('Food', food);
 
    function food() {
        var vm = this;
        vm.item = 'leche';
    }
})();

Si seguimos con nuestro documento observamos que le indicamos el módulo mediange ng-app, el controlador mediante ng-controller al cuál le hemos puesto un alias vm y el modelo de datos (realizando en JS) mediante ng-model. Posteriormente, y en ese caso para la propiedad item, para mostrar el value hacemos uso de las expresiones {{vm.item}} substituyendo la directiva ng-bind. También podríamos hacer,

 <p>Tengo que comprar <span ng-bind="vm.item"></span>!</p>

Y veremos que el uso de las expresiones o de la directiva da el mismo resultado.

Cómo podemos observar AngularJs nos aporta beneficios en el momento de plantear una aplicación web dónde todo su funcionamiento sea en la parte del cliente y dónde el código JavaScript sea el principal actor de nuestro software. Nos aportará estructura, orden y un patrón con la que enfocar nuestras aplicaciones web.