Qué es una single page application con AngularJS

AngularJS

En este post voy a explicar cómo hacer una single page application (SPA) o aplicación de página única. Consiste en una aplicación web o sitio web que cabe en una sola página. En otras palabras, la página web sólo se «carga» una vez con el propósito de dar una experiencia más fluida. En una SPA todos los códigos de HTML, JavaScript, y CSS se carga de una vez.

Podemos conseguir una single page application  mediante AngularJS y su sistema de rutas o routes. Es una herramienta bastante flexible para resolver el problema de transmisión de grandes cantidades de información en una single page application. El routing de Angular indica donde está nuestro contenido y cuando un usuario lo pida, debería de encontrarlo y cargarlo.

Para poder usar el sistema de routes de Angular precisaremos el servicio $route y el módulo ngRoute. Para instalar el ngRoute basta con que llaméis a este script justo después de llamar la librería de angular.

XHTML
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Rutas y vistas en AngularJS</title>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
</head>
<body>

En el ejemplo que vamos a realizar va haber 3 páginas: Incio, contacto y un sobre nosotros. Con el routes de Angular vamos a «inyectar» el HTML de cada una de esas páginas a una vista común o padre. Te recomiendo que tengas bastante claro el concepto de vista ya que las rutas y las vistas en AngularJS van de la mano. Puedes mirar la estructura de Modelo-Vista-Controlador aquí.

Definir rutas

Para definir rutas usaremos el servicio $route. Este servicio lo que hace es mapear entre las URLs y los archivos de las vistas. Estos mapeos son valores devueltos de la función $location.path(). Cuando el valor de este cambie, y coincida con alguna de las rutas que definamos, se cargará la correspondiente vista. Por ejemplo:

JavaScript
1
2
3
4
.when('/sobre-nosotros', {
templateUrl: 'paginas/sobre-nosotros.html',
controller: 'nosotrosController'
})

Por ahora no te preocupes si no entiendes el código, es sólo una mera aproximación. Lo que pasamos al método $routerProvider.when() son 2 argumentos: uno de ellos la ruta que queremos que el sistema de rutas busque y la segunda es un objeto literal que contiene la localización de la vista y el controlador que va a usar.

Ahora vamos a ponernos con el ejemplo. Para la página padre emplearemos un index.html. Y las plantillas de las vistas serán inicio.html, sobre-nosotros.html y contacto.html que serán cargados dentro de index.html por el sistema de rutas de AngularJS. También usaremos un error.html para cuando la ruta no coincida con ninguna que le pidamos. Todo esas páginas estarán dentro de una carpeta llamada paginas que estará en el mismo lugar donde estés realizando el ejemplo.

Qué es una single page application - Estructura de trabajo 1

Estructura de archivos (raíz)
Qué es una single page application - Estructura de trabajo 2

Estructura de archivos (carpeta paginas)

Creación de la vistas

Vista padre (index.html)

Esta será la página común para el resto de vistas. En ella llamamos a la librería de Bootstrap (CDN)  para dar un ligero diseño y las librerías de AngularJS. Además, vamos a definir las rutas que harán que nuestra single page application funcione.

XHTML
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html ng-app="spa-app">
<meta charset="UTF-8">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script>
var app = angular.module('spa-app', ['ngRoute']);
 
app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);
 
app.config(function ($routeProvider){
 
//Configuracion de las rutas
$routeProvider
.when('/', {
templateUrl: 'paginas/inicio.html',
controller: 'inicioController'
})
.when('/sobre-nosotros', {
templateUrl: 'paginas/sobre-nosotros.html',
controller: 'nosotrosController'
})
 
.when('/contacto', {
templateUrl: 'paginas/contacto.html',
controller: 'contactoController'
})
.otherwise({
//Si ninguna ruta coincide
templateUrl: 'paginas/error.html',
controller: 'errorController'
});
});
 
app.controller('inicioController', function ($scope) {
$scope.message = 'Bienvenido a la página de inicio';
});
app.controller('nosotrosController', function ($scope) {
$scope.message = 'Aquí puedes encontrar información sobre nosotros.';
});
app.controller('contactoController', function ($scope) {
$scope.message = 'Contactanos';
});
app.controller('errorController', function ($scope, $location) {
$scope.message = 'Ha habido un error al intentar acceder a';
$scope.rutaIntroducida = $location.path();
});
 
 
</script>
</head>
<body ng-controller="inicioController">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Mi SPA</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> Inicio</a></li>
<li><a href="#sobre-nosotros"><i class="fa fa-users"></i> Sobre nosotros</a></li>
<li><a href="#contacto"><i class="fa fa-envelope"></i> Contacto</a></li>
</ul>
</div>
</nav>
</header>
<div id="main">
     <div ng-view></div>
</div>
</body>
</html>
</html>

En en esta página cabe destacar una serie de cosas. La primera de ellas la invocación de ngRoute a nuestro módulo

JavaScript
1
var app = angular.module('spa-app', ['ngRoute']);

El lugar donde se mostrarán las vistas hija mediante la directiva ngView

XHTML
1
<div ng-view></div>

Las URLs del menú van precedidas con el carácter «#» ya que el sistema de rutas emplea en la comparación el texto justo después del «#»

XHTML
1
2
3
4
5
<ul class="nav navbar-nav navbar-right">
    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
    <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
    <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>

Aunque para que la comparación de las URLs sea un éxito es importante eliminar el bang prefix (#!) que viene con HTML5.

JavaScript
1
2
3
app.config(['$locationProvider', function($locationProvider) {
     $locationProvider.hashPrefix('');
}]);

El uso de $routeProvider en la configuración de nuestro módulo para definir las distintas rutas.

JavaScript
1
2
3
4
5
6
7
8
9
10
app.config(function ($routeProvider){
 
//Configuracion de las rutas
 
$routeProvider
.when('/', {
templateUrl: 'paginas/inicio.html',
controller: 'inicioController'
})
......

Y la definición de los distintos controladores que se usarán en una página u otra.

JavaScript
1
2
3
4
5
6
7
8
app.controller('inicioController', function ($scope) {
$scope.message = 'Bienvenido a la página de inicio';
});
 
app.controller('nosotrosController', function ($scope) {
$scope.message = 'Aquí puedes encontrar información sobre nosotros.';
});
....

Lo único que haremos es añadir un mensaje diferente en cada vista. Recordemos que en las rutas si la URL coincide, además de cargar la vista cargará su respectivo controlador.

sobre-nosotros.html

XHTML
1
2
3
4
<div class="jumbotron text-center">
<h1>Sobre nosotros</h1>
<p>{{ message }}</p>
</div>

contacto.html

XHTML
1
2
3
4
<div class="jumbotron text-center">
<h1>Contacto</h1>
<p>{{ message }}</p>
</div>

error.html

1
2
3
4
5
<div class="jumbotron text-center">
     <h1>Ups!</h1>
     <p>{{message}}</p>
     <p class="has-error">{{rutaIntroducida}}</p>
</div>

En esta vista cabe destacar que rutaIntroducida es el valor que obtenemos del método path() del servicio location() que definimos en el controlador de index.html.

JavaScript
1
2
3
4
app.controller('errorController', function ($scope, $location) {
$scope.message = 'Ha habido un error al intentar acceder a';
$scope.rutaIntroducida = $location.path();
});

Y sólo se invocará si la URL que introduzcamos no coincide con ninguna de las que hemos definido (otherwise).

JavaScript
1
2
3
4
5
6
7
...
.otherwise({
//Si ninguna ruta coincide
templateUrl: 'paginas/error.html',
controller: 'errorController'
});
...

Resultado Final

Una vez llegados hasta aquí vuestra single page application debería de funcionar correctamente.

Que es una single page application - Resultado final

De todas formas dejo el código en mi GitHub para que podáis descargarlo.

Espero que os haya gustado este tutorial sobre single page application, a seguir picando 🙂