Enrutamiento de AngularJS

En este capítulo presentaremos el enrutamiento de AngularJS.

El enrutamiento de AngularJS nos permite acceder a diferentes contenidos mediante diferentes URL.

Con AngularJS se pueden implementar aplicaciones web de una sola página (single page web application, SPA) con múltiples vistas.

Normalmente nuestra URL tiene la formahttp://example.com/first/page, pero en las aplicaciones web de una sola página AngularJS lo hace mediante#! + marcadorse implementa, por ejemplo:

http://example.com/#!/first
http://example.com/#!/second
http://example.com/#!/third

Nota: las versiones anteriores a Angular 1.6 usaban# + marcadorpara implementar el enrutamiento.

Al hacer clic en cualquiera de los enlaces anteriores, la dirección solicitada al servidor es la misma (http://example.com/). El contenido después del signo #! será ignorado por el navegador al realizar la solicitud al servidor. Por lo tanto, necesitamos implementar en el cliente la funcionalidad del contenido después del signo #!. El enrutamiento de AngularJS, mediante#! + marcadornos ayuda a distinguir diferentes páginas lógicas y a vincular diferentes páginas a los controladores correspondientes.

En la figura anterior, podemos ver que se crearon dos URL: /ShowOrders y /AddNewOrder. Cada URL tiene su vista y controlador correspondientes.

A continuación, veamos un ejemplo sencillo:

Análisis del ejemplo:

• 1. Se cargó el archivo js que implementa el enrutamiento: angular-route.js.

• 2. Se incluyó el módulo ngRoute como módulo de dependencia del módulo principal de la aplicación.

  angular.module('routingDemoApp',['ngRoute'])
  

• 3. Se utiliza la directiva ngView.

  <div ng-view></div>

  El contenido HTML dentro de este div cambiará según cambie la ruta.

• 4. Configure $routeProvider; AngularJS $routeProvider se utiliza para definir las reglas de enrutamiento.

  module.config(['$routeProvider', function($routeProvider){
      $routeProvider
          .when('/',{template:'这是首页页面'})
          .when('/computers',{template:'这是电脑分类页面'})
          .when('/printers',{template:'这是打印机页面'})
          .otherwise({redirectTo:'/'});
  }]);
  

La función config del módulo de AngularJS se utiliza para configurar las reglas de enrutamiento. Mediante la API config, solicitamos que se inyecte $routeProvider en nuestra función de configuración y usamos la API $routeProvider.when para definir nuestras reglas de enrutamiento.

$routeProvider nos proporciona las funciones when(path, object) y otherwise(object) para definir todas las rutas en orden; la función contiene dos parámetros:

• El primer parámetro es una URL o una regla de expresión regular para URL.
• El segundo parámetro es el objeto de configuración de la ruta.

---

Objeto de configuración de rutas

El enrutamiento de AngularJS también se puede implementar mediante diferentes plantillas.

El primer parámetro de la función $routeProvider.when es una URL o una regla de expresión regular para URL; el segundo parámetro es el objeto de configuración de la ruta.

Las reglas de sintaxis del objeto de configuración de rutas son las siguientes:

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function o  array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

Descripción de parámetros:

• template:

  Si solo necesitamos insertar contenido HTML simple en ng-view, usamos este parámetro:

  .when('/computers',{template:'这是电脑分类页面'})

• templateUrl:

  Si solo necesitamos insertar un archivo de plantilla HTML en ng-view, usamos este parámetro:

  $routeProvider.when('/computers', {
      templateUrl: 'views/computers.html',
  });
  

  El código anterior obtiene el contenido del archivo views/computers.html desde el servidor y lo inserta en ng-view.

• controller:

  Tipo function, string o array; la función controller que se ejecuta en la plantilla actual y genera un nuevo scope.

• controllerAs:

  Tipo string; especifica un alias para el controller.

• redirectTo:

  La dirección de redirección.

• resolve:

  Especifica otros módulos de los que depende el controller actual.

Ejemplo

Otras extensiones