Creando una aplicación SPA en AngularJS
En este breve articulo, voy a tratar de explicar un ejemplo sencillo de una aplicación SPA (Single Page Application).
En esta ocasión vamos a usar la versión de AngularJS 1.x.x, más adelante publicaré un nuevo ejemplo pero usando la versión 2.
Estructura de la aplicación:
Aunque al desarrollar una aplicación con AngularJS podemos organizar las cosas prácticamente como se nos antoje, vamos a organizar el código para que sea más fácil su entendimiento y escalabilidad.
La estructura de nuestra aplicación de AngularJS:
public
│
├── index.html <-- Página principal
│
├── views <-- Vistas parciales
│ ├── datos.html
│ ├── home.html
│ └── productos.html
│
└── app
├── app.js <-- Modulo principal de la app
└─── controllers <-- Aquí van los controladores
├── datosCtrl.js
├── homeCtrl.js
└── productosCtrl.jsLa aplicación tendrá 3 vistas. Home, datos y productos.
Cada vista tiene su controller correspondiente:
home.html -> homeCtrl.js
datos.html -> datosCtrl.js
productos.html -> productosCtrl.jsConstrucción de la aplicación paso a paso
Paso 1 — index.html
La página index.html será nuestra página principal de la aplicación, se encargará de la carga de librerías y del esqueleto del html de la aplicación.
Básicamente es una página html normal, pero incluiremos un par de cosas especiales para que funcione AngularSJ.
<!DOCTYPE html>
<html ng-app="app">
<head>
... aqui van las librerías CSS y los tags del head
</head>
<body>
<!-- aqui se cargan las views de cada controller -->
<div ng-view></div>
<!--Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.min.js"></script>
</body>
</html>En la etiqueta <html ng-app="app"> incluimos el atributo ng-app, el cual indicará a AngularJS donde empieza nuestra aplicación y cual es el nombre que le damos para identificarla. En este ejemplo nuestra aplicación se llama app.
Otra cosa especial, dentro de las etiquetas de <body></body> existe otra etiqueta con un atributo especial:
<div ng-view></div>
Este div con la etiqueta ng-view indica al AngularJS en donde debe cargar el contenido de las Vistas views de cada página.
Por último, al final, antes de cerrar la etiqueta </body> van las librerías necesarias para que AngularJS funcione.
En este caso incluimos, la librería del CORE de AngularJS angular.min.js y la librería para el manejo de Rutas en AngularJS angular-route.min.js.
Paso 2 — Controller para Home
Dentro de la carpeta app/controllers creamos el archivo homeCtrl.html
Este archivo contendrá lo necesario para que la view de Home funcione.
'use strict';
appControllers.controller(
'home_ctrl',
['$scope', '$rootScope', '$routeParams', '$location',
function ($scope, $rootScope, $routeParams, $location) {
console.log(' Llamaste al Controller HOME ...');
}
]);Paso 3 — Vista para el controller HOME
Dentro de la carpeta views creamos la vista home.html la cual contendrá la información que se presentará en la vista de Home.
<p>Bienvenido, esta es la view de HOME.</p>Paso 4 — Configuración de la aplicación AngularJS
Ahora vamos a decirle a AngularJS como debe comportarse.
Para esto, dentro de la carpeta app creamos el archivo app.js con el siguiente contenido:
'use strict';
// Inicia la aplicación llamada 'app'
var app_ = angular.module('app', [
'ngRoute', // Directiva para RouteProvider
'appControllers', // controllers
]);
// Para cargar controllers desde archivos externos
var appControllers = angular.module('appControllers', []);
// configuración de rutas AngularJS
app_.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('!');
$routeProvider
.when(
'/',
{
templateUrl: 'views/home.html',
controller: 'home_ctrl'
})
// ruta por defecto
.otherwise({ redirectTo: '/' });
}]);Lo que hacemos en este archivo es configurar la aplicación con el nombre que le dimos en el HTML var app_ = angular.module('app', ...
Configurar las directivas que necesitamos para las rutas:
'ngRoute',
Y configurar las rutas de las vistas de nuestra aplicación, por ahora solo configuramos una sola y es Home.
.when(
'/',
{
templateUrl: 'views/home.html',
controller: 'home_ctrl'
})Aquí le estamos diciendo a AngularJS que cuando alguien llega a la ruta raíz (‘/’), debe cargar la view views/home.html y ejecutar el controller home_ctrl. Este controller es como llamamos al controlador que creamos en el archivo homeCtrl.js
Paso 5 — Incluir los archivos de angular en la aplicación:
Ahora solo necesitamos incluir estos archivos que creamos dentro de nuestra aplicación para que AngularJS los encuentre y los ejecute.
Esto lo hacemos, incluyendo en la página principal de la aplicación index.html mediante la etiqueta script los archivos.
Dentro del archivo index.html, después del llamado a las librerías de AngularJS, debemos incluir el archivo app/app.js y el archivo app/controllers/homeCtrl.js:
<!--Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.min.js"></script>
<!-- Configuracion de la aplicación angular -->
<script src="app/app.js"></script>
<!-- Controller para HOME -->
<script src="app/controllers/homeCtrl.js"></script>
</body>
</html>Pasos Finales
En este punto, ya puedes probar la aplicación y verás que navega a la vista de Home.
Ahora deberás hacer el mismo procedimiento de creación de las vistas y los controller para cada una de las páginas de nuestra aplicación.
Ejemplo
En el siguiente repositorio de Github, podrás encontrar el ejemplo completo, incluso con las otras vistas y controllers que propongo en la estructura. La aplicación AngularJS es la que está dentro de la carpeta public
Eso es todo, espero sus comentarios y ojalá les sea de utilidad.
