Share
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.
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 DIVs con nombres de identificación de contenido fijo y contenido enrutado dentro de una mainWrapper Div.
contenido enrutado También está envuelto dentro de otro DIV llamado envoltura. Eso es porque el contenido enrutado 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 los nombres de identificación implican, contenido fijo Será el contenido estático de nuestra página principal, y contenido enrutado va a cambiar dinámicamente en la interacción del usuario.
Para definir una aplicación Angular en nuestro archivo HTML, necesitamos usar el ng-app directiva. Dado que toda la página será una aplicación Angular, debemos asignar esta directiva a la mainWrapper Div.
También necesitamos el ng-view Directiva, 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í:
Necesitamos un menú de navegación para enrutar diferentes piezas de contenido a ng-view.
Vamos a utilizar el ul y una Elementos para crear un menú horizontal simple. A continuación puede ver el fragmento de código HTML para la estructura del menú..
Página1 Página2 Página3 Página4
Por defecto, el ng-ruta módulo utiliza el ! prefijo. Sin embargo, aquí solo usamos # En frente de nuestras páginas para ser enrutado. Esto se hace con la hashPrefijo atributo 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:
Página1 Página2 Página3 Página4
Dado que este tutorial se centra en AngularJS, no voy a detallar el estilo CSS. Si tiene conocimientos de CSS anteriores, diseñe la página como desee. De lo contrario, puede utilizar el estilo que proporciono a continuación.
html, cuerpo margen: 0; relleno: 0; #mainWrapper display: flex; dirección flexible: columna; alinear-elementos: centro; margin-top: 50px #fixedContent margin-bottom: 50px; #wrapper width: 350px; #routedContent width: 350px; posición: absoluta; ul display: flex; justificar contenido: espacio intermedio; ancho: 350px; margen: 0; relleno: 0; a texto-decoración: ninguno; color: #FFFFFF; Familia tipográfica: Arial; estilo de lista: ninguno; color de fondo: #cecece; relleno: 7px 10px; radio del borde: 2px;
Cada página que será enrutada a DIV con la ng-view La directiva dentro del archivo HTML principal puede tener una estructura HTML única y un estilo CSS.
Empecemos 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:
Página 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lo primero que se puede hacer es usarlo en la mano, pero si lo hacemos, no tenemos que recurrir a ninguna parte de la misma forma. Duis aute ire dolor en reprehender en voluptate velit esse cillum dolore eu fugiat nulla pariatur.
En la parte superior, enlazamos con el archivo CSS que estará diseñando el estilo de la página, y declaramos un DIV con el nombre de identificación de Página 1, 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 ng-view Se asigna la directiva. Así que todo en tus páginas enrutadas será relativo a ese DIV.
El estilo de page1.html se da a continuación:
# page1 font-family: Arial; h1 color: # ffa42a;
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 (diferente h1 colores de texto).
Página 2
¿Qué es lo que se dice, como mínimo, qué es lo que hacemos? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consecuatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
# page2 font-family: Arial; h1 color: cornflowerblue;
Página 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lo primero que se puede hacer es usarlo en la mano, pero si lo hacemos, no tenemos que recurrir a ninguna parte de la misma forma. Duis aute ire dolor en reprehender en voluptate velit esse cillum dolore eu fugiat nulla pariatur.
# page3 font-family: Arial; h1 color: # b2ce6f;
Página 4
¿Qué es lo que se dice, como mínimo, qué es lo que hacemos? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consecuatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
# page4 font-family: Arial; h1 color: # ff4517;
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..
Desde nuestra ng-app directiva es nombrada mainApp, Usamos este id en la función de módulo. También necesitamos incluir el ngRuta y ngAnimate dependencias.
mainAngular = angular.module ('mainApp', ['ngRoute', 'ngAnimate']);
Ahora tenemos acceso a $ routeProvider y $ locationProvider.
Vamos a utilizar el $ routeProvider para gestionar las rutas y $ locationProvider para cambiar el hashPrefijo, que se establece en ! por defecto.
Usamos .cuando ('/ page1', templateUrl: 'page1.html') para definir la página a enrutar cuando Página 1 Se hace clic en nuestro archivo HTML principal..
Repetimos la misma línea de código para cada página a enrutar. Al final, usamos .de lo contrario (redirectTo: '/ page1'), que maneja nombres de página inesperados. Si intenta visitar un nombre de página no definido, diga page5, serás redirigido a Página 1.
El código completo de JavaScript está abajo:
Accentsconagua
var mainAngular = angular.module ('mainApp', ['ngRoute', 'ngAnimate']); mainAngular.config (function ($ routeProvider, $ locationProvider) $ routeProvider .when ('/ page1', templateUrl: 'page1.html') .when ('/ page2', templateUrl: 'page2.html' ) .when ('/ page3', templateUrl: 'page3.html') .when ('/ page4', templateUrl: 'page4.html') .otwise (redirectTo: '/ page1'); $ locationProvider.hashPrefix ("););Nota adicional:Si desea añadir un determinado controlador ng Para cualquier ruta a enrutar, puede manejar esto dentro de la $ routeProvider.
Un ejemplo para Página 1:
.when ('/ page1', templateUrl: 'page1.html', controller: 'page1Controller')Al final, nuestra página debería tener este aspecto, y debería poder navegar entre páginas sin animaciones de transición..
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-dejar: Los estilos CSS iniciales para la animación de licencia..ng-leave-active: Los estilos CSS de acabado para la animación de la licencia..Así que el contenido enrutado que viene a la página principal tiene una transición desde ng-enter a ng-enter-active. Asimismo, el contenido que sale de la página principal tiene una transición desde ng-dejar a ng-leave-active.
Tenemos que adjuntar las clases antes mencionadas a nuestro contenido enrutado clase.
A continuación se muestra un ejemplo de transición. Puede diseñar sus propias animaciones de transición o utilizar esta dentro de su style.css expediente.
# routedContent.ng-enter transform: translateX (-500px); opacidad: 0; -webkit-transición: todos los 0,35s cúbicos-bezier (1, .01,0, .99); -moz-transición: todos los 0,35s cúbicos-bezier (1, .01,0, .99); -ms-transición: todos los 0,35s cúbicos-bezier (1, .01,0, .99); -o-transición: todos los 0,35s cúbicos-bezier (1, .01,0, .99); transición: todos los 0,35s cúbicos-bezier (1, .01,0, .99); # routedContent.ng-enter-active transform: translateX (0px); opacidad: 1; # routedContent.ng-leave transform: translateX (0); opacidad: 1; -webkit-transición: todos los 0,35s cúbicos-bezier (1, .01,0, .99); -moz-transición: todos los 0,35s cúbicos-bezier (1, .01,0, .99); -ms-transición: todos los 0,35s cúbicos-bezier (1, .01,0, .99); -o-transición: todos los 0,35s cúbicos-bezier (1, .01,0, .99); transición: todos los 0,35s cúbicos-bezier (1, .01,0, .99); # routedContent.ng-leave-active transform: translateX (500px); opacidad: 0;
A continuación se muestra el resultado final del proyecto en Plunker..
En este tutorial, cubrimos cómo crear aplicaciones SPA con el ng-ruta módulo de AngularJS, y luego animamos las transiciones a través de las clases CSS de ng-animate.
Usando solo cuatro clases CSS provistas 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 el controlador Directiva a cada página específica dentro de la $ routeProvider, Usted 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 mantenerte ocupado. Si está buscando recursos adicionales para estudiar o usar en su trabajo, vea lo que tenemos disponible en Envato Market.
Espero que este tutorial le haya dado una idea general de cómo utilizar el ng-ruta y ng-animate módulos juntos.
