Saltar al contenido

Cómo agregar AngularJS a tus aplicaciones ASP.NET 5

AngularJS puede ser una gran adición a tus aplicaciones ASP.NET, pero empezar puede ser un poco desalentador para los no iniciados. Afortunadamente, no tienes que hacerlo solo. Echemos un vistazo a cómo puedes añadir AngularJS a tus aplicaciones ASP.NET con un mínimo de estrés.

Las herramientas

Antes de cavar muy profundo aquí, echemos un vistazo a las herramientas que usaremos. Para empezar usaremos el nuevo ASP.NET 5 Release Candidate. Tengan en cuenta que agregar AngularJS a una aplicación anterior de ASP.NET MVC 5 es casi idéntico a los pasos que cubriremos aquí, pero algunos de los pasos finales serán un poco diferentes.

A continuación, usaremos AngularJS 1.4. Si han estado prestando atención al bombo, probablemente han oído que viene AngularJS 2.0. Aunque está en marcha, aún no está listo para el horario de máxima audiencia, así que sugiero que se mantenga con la 1.x por ahora. El equipo de Angular tiene un plan para ayudar en la transición a 2.0 cuando llegue el momento, así que su inversión en la versión actual de Angular no se perderá.

También usaremos Visual Studio 2015. Podríamos hacer todo esto desde la línea de comandos o con otro editor, como VS Code, pero nos quedaremos con el IDE completo. Finalmente, usaremos el Node Package Manager (NPM) para instalar paquetes del lado del cliente. Visual Studio 2015 se entrega con soporte para NPM, así como Bower, para la administración de paquetes. Notará que la plantilla de proyecto predeterminada para ASP.NET 5 ya tiene algunos paquetes de Bower instalados, pero Bower ha caído en desgracia para muchos desarrolladores web. Así que, haremos lo que está de moda y usaremos NPM en su lugar.

Creación de un proyecto de muestra

Necesitaremos un proyecto ASP.NET (para añadirle angular). Puede que ya tengas una aplicación para probarlo, pero para asegurarnos de que estamos en la misma página, empecemos con un nuevo proyecto ASP.NET. Para ello, abre Visual Studio 2015, y ve a Archivo -> Nuevo Proyecto. Selecciona «Web» en la vista de árbol de la izquierda, y luego elige «Aplicación Web ASP.NET» a la derecha:

Haz clic en OK. Esto hará que aparezca el diálogo Nuevo Proyecto ASP.NET. En Plantillas ASP.NET 5, elija Aplicación Web, y luego haga clic en Aceptar.

Puede tardar unos minutos, pero Visual Studio iniciará su nuevo proyecto por usted. Una vez que esté terminado, vamos a ejecutar nuestra aplicación de muestra, sólo para asegurarnos de que funciona. Deberías ver la página principal de muestra de ASP.NET 5:

Ahora estamos listos para añadir AngularJS a la mezcla.

Instalando AngularJS

Hay varias maneras de añadir AngularJS a nuestro proyecto. La más fácil es simplemente hacer referencia a Angular a través del CDN de Google. Todo lo que tenemos que hacer es añadir una etiqueta de guión apuntando a la versión de AngularJS que queremos usar, y estamos listos. Las mejores prácticas, sin embargo, dictan que también proporcionemos una alternativa local para Angular en caso de que algo salga mal con el CDN. Por lo tanto, haremos ambas cosas: Añadiremos una referencia al CDN y usaremos un administrador de paquetes para obtener una copia local. ¿Pero qué gestor de paquetes debemos usar?

AngularJS está disponible como un paquete NuGet. Podríamos instalar ese paquete, que automáticamente añadiría la biblioteca de AngularJS a nuestra aplicación. Pero, en el futuro, el equipo de ASP.NET quiere que aprovechemos otros gestores de paquetes para herramientas y marcos del lado del cliente, no NuGet. (Recuerden, Visual Studio se envía con soporte para Bower y NPM. La comunidad se está alejando de Bower, y yo personalmente prefiero npm, así que usaremos esto en lugar de Bower).

Ahora, usemos el NPM para instalar el AngularJS. Expande el nodo «Dependencias» de tu proyecto en el Explorador de Soluciones, haz clic con el botón derecho del ratón en «npm» y elige «Abrir paquete.json».

Su archivo package.json define las dependencias npm de su aplicación. Es un archivo bastante simple que contiene un objeto literal de JavaScript. Sigamos adelante y agreguemos AngularJS como una dependencia.

El archivo ya tiene una sección para las dependencias de desarrollo, que son las que se utilizan para construir su aplicación. Pero AngularJS será una dependencia en tiempo de ejecución. Así que, añadamos una nueva sección para nuestras dependencias de tiempo de ejecución. Puedes hacerlo añadiendo una nueva propiedad de objeto llamada «dependencias».

{

«nombre»: «ASP.NET»,

«versión»: «0.0.0»,

«devDependencias»: {

«trago»: «3.8.11»,

«gulp-concat»: «2.5.2»,

«gulp-cssmin»: «0.1.7»,

«tragar-uglificar»: «1.2.0»,

«rimraf»: «2.2.8»

}, «dependencias»: {

}}

Ahora agreguemos AngularJS. Dentro del objeto «dependencias», escribe «angular» seguido de dos puntos, y verás el IntelliSense de Visual Studio con una lista de versiones de paquetes. Deberías ver algo como esto:

NOTA: La versión exacta puede cambiar dependiendo de la versión más actual disponible.

Las tres opciones mostradas son ligeramente diferentes:

  • 4.8 – Referirse a esta versión exacta de AngularJS. Si otro desarrollador ejecuta una «instalación npm», recibirá la versión 1.4.8, sin importar qué otras versiones estén disponibles.
  • ^1.4.8 – Referirse a la última versión disponible de 1.x.x. Hoy puede ser 1.4.8, pero si otro desarrollador ejecuta «npm install» para restaurar los paquetes el próximo mes, podrían obtener 1.5.0 en su lugar.
  • ~1.4.8 – Referirse a la última versión de 1.4.x. Hoy puede ser 1.4.8, pero la próxima semana podría ser 1.4.9. Sin embargo, si la semana que viene saliera la 1.5.0, ejecutar una «instalación npm» seguiría instalando la última versión de la 1.4.x, y no la 1.5.0.

Elijamos la primera opción, y hagamos que nuestra aplicación haga referencia a la última versión (en el momento de escribir esto sería «1.4.8»). De nuevo, esto le dirá a nuestra aplicación que use esta versión específica de AngularJS, y nada más nuevo. Angular tiene el desafortunado hábito de hacer cambios de ruptura incluso entre versiones de parches en ocasiones, así que me gusta optar por una actualización, en lugar de dejar que npm instale automáticamente la última para mí.

Una vez que hayas especificado «angular» y la versión «1.4.8», tu archivo pack.json completo debería ser como el siguiente:

{

«nombre»: «ASP.NET»,

«versión»: «0.0.0»,

«devDependencias»: {

«trago»: «3.8.11»,

«gulp-concat»: «2.5.2»,

«gulp-cssmin»: «0.1.7»,

«tragar-uglificar»: «1.2.0»,

«rimraf»: «2.2.8»

},

«dependencias»: {

«angular»: «1.4.8»

}

}

Cuando guardes el archivo, Visual Studio ejecutará automáticamente «npm install» por ti, que instalará AngularJS. Sin embargo, nuestro trabajo no ha terminado todavía, todavía necesitamos agregar AngularJS a nuestro proyecto.

Añadiendo AngularJS a su proyecto

Puede que estés acostumbrado a NuGet, en el que la instalación de un paquete configurará (típicamente) tu proyecto para ti; npm no se comporta de esta manera. Cuando instalas un paquete, se coloca en la carpeta node_modules. Esta carpeta existe fuera de la carpeta wwwroot del proyecto, por lo que no se puede hacer referencia directamente a los scripts que viven dentro de node_modules. Tendremos que hacer algo más en su lugar.

Hay algunas opciones para tratar con esto. Podríamos copiar manualmente los guiones necesarios de AngularJS en nuestra carpeta wwwroot, pero esto es tedioso. Tendríamos que acordarnos de copiar nuevos guiones cada vez que actualizáramos AngularJS, además tendríamos que hacer lo mismo con cualquier otra biblioteca que decidamos usar (como las que se enumeran al final de este artículo).

En lugar de eso, usemos gulp para copiar AngularJS en nuestro www.

Por defecto, un nuevo proyecto web ASP.NET 5 incluye una carpeta $0027lib$0027 donde se instalan los paquetes de Bower. Crearemos una tarea gulp para copiar AngularJS allí también. Adelante, abre el archivo gulp del proyecto (gulpfile.js), ubicado en la raíz del proyecto. Primero agreguemos un nuevo objeto cerca de la parte superior. Este objeto contendrá pares clave/valor, donde cada clave será la fuente original del elemento que queremos copiar, y el valor será donde queremos copiarlo.

var paths = {

webroot: «./wwwroot/»

};var itemsToCopy = {

$0027./node_modules/angular/angular*.js$0027 : paths.webroot + $0027lib$0027

}paths.js = paths.webroot + «js/**/*.js»;

paths.minJs = paths.webroot + «js/**/*.min.js»;

Ahora vamos a saltar al final de nuestro archivo gulp, y a realizar una nueva tarea para realizar la copia:

gulp.task($0027copia$0027, función () {

para (var src en itemsToCopy) {

si (!itemsToCopy.hasOwnProperty(src)) continue;

gulp.src(src)

.pipe(gulp.dest(itemsToCopy[src]));

}

});

Ahora podemos ejecutar esta tarea usando el Explorador de Tareas de Visual Studio. Si aún no tienes esta ventana abierta, ve a Inicio rápido en la parte superior derecha y escribe «Explorador de Tareas».

Haga clic en «Herramientas -> Explorador de Tareas» para abrir la ventana. Ahora debería ver todas las tareas que están definidas en nuestro archivo gulp.

Puedes ejecutar cualquier tarea haciendo doble clic en ella, así que adelante y haz doble clic en la tarea de «copia». Si todo va según lo planeado, debería ver aparecer una ventana de salida:

Y ahora tenemos angular.js y angular.min.js en nuestro wwwroot, listo para enviar con nuestra aplicación.

Si esto parece mucho más trabajo que agregar un paquete de NuGet, tienes razón. Para casos sencillos como este, las nuevas herramientas de Visual Studio se sentirán como un paso atrás. Pero las nuevas herramientas abren la puerta para hacer todo tipo de cosas interesantes (como la transpiración de ES2015 a ES5 con Babel).

Referencia AngularJS

¡Probablemente esté cansado de oír esto, pero aún no hemos terminado! Todavía tenemos que hacer referencia a AngularJS en algún lugar de nuestra solicitud, de lo contrario la biblioteca nunca se cargará. Típicamente, el mejor lugar para hacer esto es en tu _Layout.cshtml, así que añadámoslo ahí.

El archivo _Layout.cshtml que Visual Studio creó para nosotros ya tiene referencias a jQuery y Bootstrap. No sólo están referenciados, sino que están referenciados usando las mejores prácticas: En entornos sin desarrollo, intentarán usar las bibliotecas de un CDN antes de cargar una copia de seguridad local. Seguiremos este mismo patrón para cargar AngularJS.

Primero, averigua dónde están cargados tus guiones, estarán justo antes de la etiqueta de cierre del cuerpo en _Layout.cshtml.

asp-fallback-src=»~/lib/jquery/dist/jquery.min.js»

asp-fallback-test=»window.jQuery»>

asp-fallback-src=»~/lib/bootstrap/dist/js/bootstrap.min.js»

asp-fallback-

test=»window.jQuery && window.jQuery.fn && window.jQuery.fn.modal»>

@RenderSection(«scripts», requerido: false)

Primero agreguemos nuestra versión local, no modificada de AngularJS al bloque de ambiente de desarrollo.

Esa parte fue fácil, ahora hagamos lo mismo para cargar a AngularJS en la puesta en escena y la producción:

asp-fallback-src=»~/lib/jquery/dist/jquery.min.js»

asp-fallback-test=»window.jQuery»>

asp-fallback-src=»~/lib/bootstrap/dist/js/bootstrap.min.js»

asp-fallback-

test=»window.jQuery && window.jQuery.fn && window.jQuery.fn.modal»>

asp-fallback src=»~/lib/angular.min.js»

asp-fallback-test=»window.angular»>

Fíjate que estamos usando los ayudantes de etiquetas de ASP.NET MVC para intentar cargar Angular desde un CDN, y luego retroceder y cargarlo desde nuestra carpeta lib si eso falla.

Ahora tenemos AngularJS añadido a nuestro proyecto, así que, ¿qué pasa ahora?

Creando su módulo de aplicación AngularJS

AngularJS no es una simple bestia y, tristemente, no puedo enseñarte todo lo que necesitas saber sobre ella en este tutorial. PERO, les mostraré un poco más antes de terminar. Comencemos por definir un módulo y poner en marcha AngularJS.

NOTA: Si quieres saber más sobre los módulos de AngularJS o el bootstrapping de la aplicación, mira la documentación de ngApp.

Finjamos que ya tenemos un módulo, y carguémoslo en nuestro diseño. Encuentra la apertura elemento, y añádele un atributo ng-app con un valor de «psBlogApp», así:

Lo siguiente que necesitamos es definir realmente este módulo. Vamos a saltar a nuestro archivo site.js, que es la plantilla del proyecto de Visual Studio ya creada para nosotros. Lo encontrarás en /wwwroot/js.

Ahora vamos a introducir el siguiente código:

angular.module($0027psBlogApp$0027, [])

.run(function() {

console.log($0027Hola, mundo, de psBlogApp!$0027);

});

Cuando construyamos y ejecutemos nuestra aplicación, veremos lo siguiente en la consola de JavaScript:

Eso significa que AngularJS se ha puesto en marcha con éxito, y ahora podemos empezar a aprovecharlo en nuestra aplicación! Vamos a crear una directiva súper sencilla. De vuelta en nuestro sitio.js, dejemos caer esta declaración de directiva:

angular.module($0027psBlogApp$0027, [])

.run(function () {

console.log($0027Hola, mundo, de psBlogApp!$0027);

})

.directive($0027psCurrentTime$0027, función () {

volver {

plantilla: $0027

center»>{{{vm.currentTime}}$0027,

controladorAs: $0027vm$0027,

controlador: función () {

var vm = this;

vm.currentTime = new Date().toLocaleTimeString();

}

}

});

Ahora abriremos la vista de índice de nuestro controlador de casa, y pondremos una nueva instancia de nuestra directiva:

Usos de la aplicación

  • Páginas de muestra usando ASP.NET MVC 6
  • Gulp and Bower para la gestión de las bibliotecas del lado del cliente
  • Tematización con Bootstrap

Cuando ejecutemos nuestra aplicación, veremos nuestra directiva mostrando la hora actual:

Próximos pasos

Conseguir que AngularJS se añada a tu proyecto es sólo el primer paso, y aunque parece un poco de trabajo la primera vez que lo haces, la recompensa vale la pena. Ahora puede agregar comportamientos ricos del lado del cliente a su código existente, construir aplicaciones completas de una sola página, o construir «SPA-silos» para porciones de su aplicación sin reescribir todo.

Unas pocas palabras de consejo de despedida:

  • Trate de usar directivas y servicios siempre que sea posible. Si te sientes cómodo usando código de calidad beta, podrías incluso usar AngualrJS 1.5 y usar componentes. Estos se traducirán a AngularJS 2.0 más fácilmente que el código creado con controladores Angular (en mi experiencia, las directivas tienen más probabilidades de conducir a un código más limpio también).
  • Si utiliza Bootstrap en su aplicación, consulte la interfaz de usuario Bootstrap Proporciona versiones angulares de muchos de los componentes de Bootstrap, así como servicios que puede utilizar para activar cosas como los modales.
  • Si decides construir una aplicación de una sola página, o incluso un SPA-silo, mira el router de la interfaz de usuario. Sus capacidades de enrutamiento son mucho más robustas que las que encontrarás en las versiones actuales de AngularJS.
  • Si vas a usar el gulp (y para bien o para mal, esta es la dirección en la que el equipo de ASP.NET está empujando las cosas), deberías aprovecharlo al máximo. Recomiendo encarecidamente que prepares tu proyecto para usar los siguientes plug-ins: ng-annotate, Babel, y angular-templatecache. Juntas, estas herramientas compensan con creces los gastos generales de tener que mantener tu propio script de construcción.
  • A medida que empiezas a mover datos de un lado a otro entre el cliente y el servidor, recuerda que el servidor es en realidad la fuente de la verdad de cómo se ven esos datos. Tus referencias del lado del cliente se romperán fácilmente si cambias los modelos del lado del servidor, así que ten mucho cuidado al refactorizar.

Si quieres comprobar la fuente completa de esta aplicación, dirígete al repositorio de GitHub. Y si quieres aprender más sobre Angular (y por qué no lo harías?), asegúrate de revisar los cursos de AngularJS y el camino de aprendizaje de AngularJS. O dirígete a nuestro post sobre las características de Angular, los pros, los contras y mucho más.