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

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.

<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-animate.js"></script>

<script src="angularApp.js"></script>

</body>
</html>

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í.

<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<div id="mainWrapper">
    <div id="fixedContent"></div>
    <div id="wrapper">
        <div id="routedContent" ng-view></div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-animate.js"></script>

<script src="angularApp.js"></script>

</body>
</html>

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í:

<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<div id="mainWrapper" ng-app="mainApp">
    <div id="fixedContent"></div>
    <div id="wrapper">
        <div id="routedContent" ng-view></div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-animate.js"></script>

<script src="angularApp.js"></script>

</body>
</html>

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ú.

<div id="fixedContent">
    <ul>
        <a href="#page1">Page1</a>
        <a href="#page2">Page2</a>
        <a href="#page3">Page3</a>
        <a href="#page4">Page4</a>
    </ul>
</div>

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:

<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<div id="mainWrapper" ng-app="mainApp">
    <div id="fixedContent">
        <ul>
            <a href="#page1">Page1</a>
            <a href="#page2">Page2</a>
            <a href="#page3">Page3</a>
            <a href="#page4">Page4</a>
        </ul>
    </div>
    <div id="wrapper">
        <div id="routedContent" ng-view></div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-animate.js"></script>

<script src="angularApp.js"></script>

</body>
</html>

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.

html, body{
    margin: 0;
    padding: 0;
}

#mainWrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px
}

#fixedContent{
    margin-bottom: 50px;
}

#wrapper{
    width: 350px;
}

#routedContent{
    width: 350px;
    position: absolute;
}

ul{
    display: flex;
    justify-content: space-between;
    width: 350px;
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: #FFFFFF;
    font-family: Arial;

    list-style: none;
    background-color: #cecece;
    padding: 7px 10px;
    border-radius: 2px;
}

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:

<link href="page1.css" rel="stylesheet">

<div id="page1">
    <h1>Page 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

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:

#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 (diferentes colores de texto h1).

page2.html & page2.css

<link href="page2.css" rel="stylesheet">

<div id="page2">
    <h1>Page 2</h1>
    <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>

#page2{
    font-family: Arial;
}

h1{
    color: cornflowerblue;
}

page3.html & page3.css

<link href="page3.css" rel="stylesheet">

<div id="page3">
    <h1>Page 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

#page3{
    font-family: Arial;
}

h1{
    color: #b2ce6f;
}

page4.html & page4.css

<link href="page4.css" rel="stylesheet">

<div id="page4">
    <h1>Page 4</h1>
    <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>

#page4{
    font-family: Arial;
}

h1{
    color: #ff4517;
}

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:

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'
        })
        .otherwise({
            redirectTo: '/page1'
        });

    $locationProvider.hashPrefix('');

});

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:

.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.

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.

#routedContent.ng-enter{
    transform: translateX(-500px);
    opacity: 0;

    -webkit-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -moz-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -ms-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -o-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    transition: all 0.35s cubic-bezier(1,.01,0,.99);
}

#routedContent.ng-enter-active{
    transform: translateX(0px);
    opacity: 1;
}

#routedContent.ng-leave{
    transform: translateX(0);
    opacity: 1;

    -webkit-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -moz-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -ms-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -o-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    transition: all 0.35s cubic-bezier(1,.01,0,.99);
}

#routedContent.ng-leave-active{
    transform: translateX(500px);
    opacity: 0;
}

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.