SPA con Asp.Net Mvc & Angular

Hace tiempo que quería escribir esta entrada pero la vida me ha dado otras prioridades desde que he vuelto a ser padre. Pero después de varias peticiones me gustaría explicar como combino una aplicación Asp.net Mvc con angular intentando aprovechar las ventajas de tener las vistas en el servidor.

El proyecto

Lo primero que he hecho es crear una solución con dos proyectos uno para la interfaz donde estará angular y otra para los servicios de datos, de esta manera queda más clara la separación de estas responsabilidades de la aplicación.

• Datos: Proyecto Web API
  • Models: en esta carpeta estaría emulando la parte de negocio y las entidades que usaré en los servicios REST.
  • Controllers: He creado dos controladores para los servicios Uno con para consultar datos maestros y otro para consultar los datos de los concesionarios de coches en los que se basa este ejemplo.

• Angular: Proyecto ASP.NET MVC
  • Controllers: los controladores típicos de ASP.NET MVC.
    • Home: Controlador de la home donde redirige a la vista principal. Esta vista principal es la encargada de contener las otras vista de angular tipo SHELL.
    • Concesionarios: El controlador que gestiona las vistas con la lista de concesionarios y detalle-edición de los vehículos.
• Views: Las vistas de MVC donde se encuentra el HTML que necesitamos.
  • Concesionarios: partials views de las diferentes pantallas de la aplicación.
  • Home/Index: vista principal contenedor de las otras vistas.

Index

[sourcecode language=»html»]</pre>
<div id="main-content">
<div class="bodyPartialView" data-ng-view=""></div>
<!– The SPA Views go here –></div>
<pre>
[/sourcecode]

• Scripts: En la carpeta scripts tendremos todo los ficheros scripts que necesitamos en nuestra aplicación Angular.

• Libs: librerías de terceros que utilizamos como por ejemplo JQuery.
• App: donde tendremos los script de la aplicación
  • controllers: los controladores en angular son el código js referente a una vista y su contexto.
  • directives: podemos crear atributos nuevos Html que angular podrá injectar en nuestras vistas, de esta manera podríamos crear nuestros propios controles con HTML y scripts.
  • filters: código que nos permite filtrar o tratar los datos
  • services: servicios disponibles en nuestra aplicación angular, yo por ejemplo tengo un servicio que es el encargado de cargar los datos desde los servicios REST llamado dataContextService.
  • App.js: es el punto de entrada de la aplicación donde está definido el routing de angular.

App.js

[sourcecode language=»javascript»]
demoApp = angular.module(‘demoApp’, [])
.config([‘$routeProvider’, function($routeProvider) {
$routeProvider
.when(‘/’, {
templateUrl: ‘/Concesionarios/List’,
controller: ‘ListaCtrl’
})
.when(‘/detalle/:id’, {
templateUrl: ‘/Concesionarios/Detail’,
controller: ‘DetalleCtrl’
})
.when(‘/edit/:id’, {
templateUrl: ‘/Concesionarios/Edit’,
controller: ‘EditCtrl’
})
.otherwise({ redirectTo: ‘/’ });

}]);
[/sourcecode]

El enrutamiento de angular es el encargado de configurar las url que se tienen que mapear para servir una vista y que controlador hay que cargar con la misma. Lo bueno de este enrutamiento que acepta tanto código inyectado HTML, como páginas. De esta manera podemos enrutar las vistas de la aplicación angular con las vistas de servidor de MVC.

Ventajas de utilizar las vistas de Servidor

Como he comentado anteriormente la ventaja de utilizar las vistas de servidor es que tenemos la posibilidad de utilizar sus recursos y el sistema de autorización de partes de la página evitando mostrar en cliente las partes privadas de nuestra aplicación, pero no os olvidéis siempre de hacer lo mismo con los servicios. Nadie tendría que acceder a nuestros servicios de datos sin los permisos adecuados.

1. Localización de las vistas en el servidor

Al tener enrutada las vistas desde cliente a las vistas de servidor podemos utilizar los recursos como cualquier otra aplicación ASP.NET MVC. Evitando tener que descargar todos los posibles recurso de todos los idiomas al cliente la primera vez.

[sourcecode language=»html»]</pre>
<h1>@Resources.Language.Title_List</h1>
<pre>
[/sourcecode]

2.Autorización de la interfaz de usuario

Otra de las ventajas de utilizar las vistas de MVC es que podemos utilizar el sistema de seguridad que nos ofrece ASP.NET sin problemas. De esta manera solo se descargará la parte de HTML que el usuario tenga permisos y no hará falta administrar la seguridad de la interfaz desde el propio cliente.

Permitir editar solo a los usuarios autentificados:

[sourcecode language=»html»]</pre>
<div data-ng-repeat="coche in item.Coches"><a href="#/detalle/{{coche.IdCoche}}">{{ coche.Marca}}- {{coche.Modelo}}</a>
@if (Request.IsAuthenticated)
{
<button class="btn btn-mini" data-ng-click="edit(coche.IdCoche)"><i class="icon-edit"></i></button>
}</div>
<pre>
[/sourcecode]

Lista si el usuario no está autentificado

Lista si el usuario está autentificado (Aparece el botón de editar)

Conclusión

Bajo mi punto de vista los extremos siempre son malos, no deberíamos tener todo en el servidor ni todo en el cliente, hay que buscar el equilibrio que haga que nuestras aplicaciones puedan aprovechar lo mejor de cada entorno.

Podéis encontrar el ejemplo en : https://github.com/Marckys/AngulaR-ASP.NET-MVC