AngularJS es un framework de JavaScript que nos permite crear aplicaciones de «página única«. Aunque no es el tema de este artículo, AngularJS también nos permite implementar el patrón de diseño MVVM. Este patrón también lo utiliza WPF y es una modificación del patrón MVC. En este artículo vamos a mostrar como configurar AngularJS con ASP.NET en Visual Studio Community 2013. No es objeto de este artículo hacer una introducción a AngularJS así que veremos los aspectos más básicos de este framework.
Arrancamos el Visual Studio y creamos un nuevo proyecto ASP.NET MVP 4 Web Application con Visual C#. Os dejo un pantallazo de que plantilla seleccionar.
Al proyecto lo llamamos AngularJsAsp y lo guardamos donde queramos. Nos saldrá una ventana que nos pide el tipo de proyecto web que deseamos crear, seleccionamos Internet Application.
Lo primero que vamos a hacer es eliminar una librerías que se insertan por defecto en nuestro proyecto web. Para ello abrimos el gestor de paquetes Nuget y nos vamos a Installed packages para que nos muestre todos los paquetes instalados.
Tenemos que desinstalar los siguientes paquetes:
- Microsoft jQuery Unobtrusive Validation
- Microsoft jQuery Unobtrusive Ajax
- jQuery Validation
- jQuery UI
- jQuery
- Modernizr
Ahora tenemos que modificar el archivo que está en App_Start/BundleConfig.cs.
El original sería este.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
using System.Web; using System.Web.Optimization; namespace AngularJsAsp { public class BundleConfig { // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725 public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); // Use the development version of Modernizr to develop with and learn from. Then, when you're // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( "~/Content/themes/base/jquery.ui.core.css", "~/Content/themes/base/jquery.ui.resizable.css", "~/Content/themes/base/jquery.ui.selectable.css", "~/Content/themes/base/jquery.ui.accordion.css", "~/Content/themes/base/jquery.ui.autocomplete.css", "~/Content/themes/base/jquery.ui.button.css", "~/Content/themes/base/jquery.ui.dialog.css", "~/Content/themes/base/jquery.ui.slider.css", "~/Content/themes/base/jquery.ui.tabs.css", "~/Content/themes/base/jquery.ui.datepicker.css", "~/Content/themes/base/jquery.ui.progressbar.css", "~/Content/themes/base/jquery.ui.theme.css")); } } } |
Lo que vamos a hacer es eliminar todas las referencias a los paquetes que hemos eliminado de Nuget y nos quedamos únicamente con nuestra hoja de estilos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
using System.Web; using System.Web.Optimization; namespace AngularJsAsp { public class BundleConfig { // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725 public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); } } } |
Vamos a ordenar un poco nuestro proyecto eliminando ciertos archivos para dejarlo todo bien preparado para trabajar con AngulaJS. Lo primero es eliminar los siguientes controles que se encuentran dentro de la carpeta Controllers.
- AccountController.cs
Eliminar las siguientes carpetas y todo su contenido que que están dentro de Views.
- Account
- Shared
De la carpeta Views también hay que borrar el siguiente archivo.
- _ViewStart.cshtml
De la carpeta Views/Home eliminar los siguientes archivos.
- About.cshtml
- Contact.cshtml
El archivo Controller/HomeController.cs hay que modificar los métodos que hacían referencias a las vistas de la Home. El archivo estaría así:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace AngularJsAsp.Controllers { public class HomeController : Controller { public ActionResult Index() { ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application."; return View(); } public ActionResult About() { ViewBag.Message = "Your app description page."; return View(); } public ActionResult Contact() { ViewBag.Message = "Your contact page."; return View(); } } } |
Y debería quedar así
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace AngularJsAsp.Controllers { public class HomeController : Controller { public ActionResult Index() { ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application."; return View(); } } } |
Por último debemos abrir los archivos Views/Home/Index.cshtml y Content/Site.css y eliminar todo lo que haya dentro, deberán quedar vacíos.
En principio ya lo tenemos configurado para ejecutar nuestra primera página con AngularJS. Vamos a copiar el siguiente código en Views/Home/Index.cshtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html ng-app="AngularJsAsp"> <head> <title>Primera Aplicación AngularJS y ASP.NET</title> </head> <body> <input type="text" ng-model="primerTexto" /> <h1>{{primerTexto}}</h1> <script src="https://code.angularjs.org/1.2.16/angular.min.js"></script> @Scripts.Render("~/bundles/AngularJsAsp") </body> </html> |
Si ejecutamos en Visual Studio pulsando el botón de play.
Vemos lo siguiente.
Pues ya tenemos nuestra primera aplicación AngularJS con ASP.NET. Ahora vamos a hacer unos ajuste para dejar la aplicación en condiciones y seguir las directrices de AngularJS para la creación de nuestro ViewModel. Así que empecemos.
Lo primero es crear una carpeta dentro de la carpeta Scripts a la que llamaremos Controllers.
Ahora vamos a crear dos archivos JavaScript. Por un lado crearemos un archivo en Scripts al que llamaremos AngularJsAsp.js (como se llama nuestro proyecto .js) y por otro lado en Scripts/Controllers creamos PaginaInicio.js. Ahora nuestra carpeta de Scripts queda de la siguiente manera.
Ahora vamos a añadir el fichero AngularJsAsp.js en el BundleConfig.cs para que nos permita añadirlo en nuestras páginas ASP. Para ello abrimos el BundleConfig.cs y añadimos lo siguiente.
|
1 2 3 |
bundles.Add(new ScriptBundle("~/bundles/AngularJsAsp") .IncludeDirectory("~/Scripts/Controllers", "*.js") .Include("~/Scripts/AngularJsAsp.js")); |
Solo nos queda modificar nuestro controlador. Creamos el controlador y lo inyectamos. Copia este código en el JavaScript PaginaInicio.js.
|
1 2 3 4 |
// Creamos el controlador var PaginaInicioController = function ($scope) { $scope.primerTexto = 'Primera aplicación'; } |
En el fichero JavaScript AngularJsAsp.js exponemos el controlador a la vista para que lo pueda ver. Copia el siguiente código en el archivo AngularJsAsp.js.
|
1 2 3 4 5 |
// Declaramos el módulo que contendrá todos los objetos var AngularJsAsp = angular.module('AngularJsAsp', []); // Creamos el controlador para nuestro módulo AngularJsAsp.controller('PaginaInicioController', PaginaInicioController); |
Ahora ya lo tenemos bien configurado para empezar a trabajar. Si ejecutamos de nuevo la aplicación . En siguientes capítulos iremos viendo como añadir Rutas a nuestro código.