Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. JavaScript
Code

Aplicaciones de una sola página con ngRoute y ngAnimate en AngularJS

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

Las aplicaciones de una sola página le permiten actualizar una parte determinada de una página web enrutando el contenido almacenado en un archivo .html separado. Al hacerlo, no recargas tu página principal.

AngularJS proporciona un módulo llamado ngRoute exactamente para este propósito.

Otro módulo útil de AngularJS es ngAnimate, que facilita la animación con ciertas clases de CSS.

En este tutorial, trataré de explicar cada paso a fondo, aunque todavía necesitas un conocimiento básico de AngularJS para poder seguir.

Comenzando con una página principal

Estructura basica

Este archivo index.html será nuestra página principal donde tenemos contenido tanto fijo como enrutado.

Comenzaré con un documento HTML básico e incluiré todas las bibliotecas necesarias junto con nuestra hoja de estilo personalizada llamada style.css y un archivo JavaScript angularApp.js.

Ahora agrego dos DIV con los nombres de identificación de fixedContent y routedContent dentro de un mainWrapper DIV.

routedContent también se envuelve dentro de otro DIV denominado wrapper . Esto se debe a que routedContent debe estar en una posición absoluta con respecto a un DIV principal, ya que durante la animación de enrutamiento, dos partes de contenido diferentes chocan entre sí.

Como lo indican los nombres de identificación, fixedContent será el contenido estático de nuestra página principal, y routedContent cambiará dinámicamente con la interacción del usuario.

Para definir una aplicación Angular en nuestro archivo HTML, necesitamos usar la directiva ng-app. Dado que toda la página será una aplicación Angular, debemos asignar esta directiva al mainWrapper DIV.

También necesitamos la directiva ng-view, que le dice al DIV que está asignado para mostrar el contenido de la página enrutada.

Ahora nuestro archivo index.html se ve así:

Menú de Navegación

Necesitamos un menú de navegación para dirigir diferentes partes del contenido a ng-view.

Vamos a utilizar  los elementos ul y a  para crear un menú horizontal simple. A continuación puede ver el fragmento de código HTML para la estructura del menú.

Por defecto, el módulo ng-route usa el ! prefijo. Sin embargo, aquí solo usamos # delante de nuestras páginas para enrutar. Esto se hace con el atributo hashPrefix utilizado en la configuración, que explicaré más adelante en la sección relacionada. Por ahora, tómalo como es.

Nuestro archivo HTML final es el siguiente:

Estilo de la página principal

Dado que este tutorial se centra en AngularJS, no voy a detallar el estilo CSS. Si tiene conocimientos anteriores de CSS, diseñe la página como desee. De lo contrario, puede utilizar el estilo que proporciono a continuación.

Páginas para ser enrutado

Cada página que se enrutará a DIV con la directiva ng-view dentro del archivo HTML principal puede tener una estructura HTML única y un estilo CSS.

Vamos a empezar con page1.html.

Como queremos un estilo específico para cada página, necesitamos archivos CSS separados para cada página. Por lo tanto, también creamos un archivo llamado page1.css, que contendrá las reglas de estilo de page1.html.

La estructura básica de HTML para page1 es la siguiente:

En la parte superior, vinculamos al archivo CSS que estará diseñando el estilo de la página, y declaramos un DIV con el nombre de identificación de page1, donde se colocará todo el contenido.

Lo mantendré simple, pero depende completamente de usted cómo estructurar el archivo HTML. Solo tenga en cuenta que su contenedor siempre será el DIV al que se asigna la directiva ng-view. Así que todo en tus páginas enrutadas será relativo a ese DIV.

El estilo de page1.html se da a continuación:

Las otras tres páginas pueden ser totalmente diferentes, pero en aras de la simplicidad, solo uso la misma plantilla para cada página HTML y archivos CSS ligeramente diferentes (diferentes colores de texto h1).

page2.html & page2.css

page3.html & page3.css

page4.html & page4.css


Configurando el ngRoute & ngAnimate en JavaScript

Hasta el momento hemos completado todos los archivos HTML y CSS necesarios. Ahora es el momento de escribir el código JavaScript que controla el enrutamiento y la animación.

Dado que nuestra directiva ng-app se llama mainApp, usamos este id en la función de módulo. También debemos incluir las dependencias ngRoute y ngAnimate.

mainAngular = angular.module('mainApp',['ngRoute', 'ngAnimate']);

Ahora tenemos acceso a $ routeProvider y $ locationProvider.

Vamos a usar $ routeProvider para administrar las rutas y $ locationProvider para cambiar el hashPrefix, que está configurado para ! por defecto.

Usamos .when ('/ page1', {templateUrl: 'page1.html'}) para definir la página a enrutar cuando se hace clic en <a href="#page1">Page1 </a> en nuestro archivo HTML principal.

Repetimos la misma línea de código para cada página a enrutar. Al final, usamos .otherwise ({redirectTo: '/ page1'}), que maneja nombres de página inesperados. Si intenta visitar un nombre de página no definido, digamos page5, será redirigido a page1.

El código completo de JavaScript está abajo:

Nota adicional: si desea agregar una directiva específica de ng-controller para las páginas que se enrutarán, puede manejar esto dentro de $ routeProvider.

Un ejemplo para page1:

Al final, nuestra página debería tener este aspecto, y debería poder navegar entre páginas sin animaciones de transición.

Final result after styling and routing

Animando las transiciones de la página

Ahora es el momento de animar las transiciones de ruta.

Para fines de animación, AngularJS tiene clases CSS incorporadas gracias a la dependencia ngAnimate.

Las clases que vamos a utilizar son:

  • ng-enter: los estilos CSS iniciales para la animación enter.
  • ng-enter-active: los estilos CSS de acabado para la animación enter.
  • ng-leave: los estilos CSS iniciales para la animación de la licencia.
  • ng-leave-active: los estilos CSS de acabado para la animación de licencia.

Por lo tanto, el contenido enrutado que llega a la página principal tiene una transición de ng-enter a ng-enter-active. Del mismo modo, el contenido que sale de la página principal tiene una transición de ng-leave a ng-leave-active.

Tenemos que adjuntar las clases mencionadas anteriormente a nuestra clase routedContent.

A continuación se muestra un ejemplo de transición. Puede diseñar sus propias animaciones de transición o usar esta dentro de su archivo style.css.

A continuación se muestra el resultado final del proyecto en Plunker.

Conclusión

En este tutorial, cubrimos cómo crear aplicaciones SPA con el módulo ng-route de AngularJS, y luego animamos las transiciones a través de las clases CSS de ng-animate.

Usando solo cuatro clases de CSS proporcionadas por ng-animate, puedes lograr varias animaciones. Siempre puede adjuntar clases adicionales para tener más control sobre las animaciones de transición. Por ejemplo, puede hacer que las transiciones de su página sean conscientes de la dirección.

También mencioné que al adjuntar la directiva del controller a cada página específica dentro de $ routeProvider, puede lograr un control adicional sobre cada página.

JavaScript, con sus bibliotecas como Angular, se ha convertido en uno de los idiomas de facto para trabajar en la web. No deja de tener sus curvas de aprendizaje, y también hay muchos marcos y bibliotecas para mantenerlo ocupado. Si está buscando recursos adicionales para estudiar o usar en su trabajo, consulte lo que tenemos disponible en Envato Market.

Espero que este tutorial le haya dado una idea general de cómo utilizar los módulos ng-route y ng-animate juntos.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.