TUTORIALES

Definición de rutas

abril 10, 2024 ,


En AngularJS, las rutas se definen utilizando el servicio $routeProvider, que se encuentra en el módulo ngRoute. Aquí tienes un ejemplo básico de cómo definir rutas en tu aplicación AngularJS:

  1. Incluir la dependencia de ngRoute:

    Asegúrate de incluir la dependencia de ngRoute en tu módulo principal:

    angular.module('miApp', ['ngRoute']);

  2. Configurar las rutas:

    Utiliza el servicio $routeProvider para configurar las rutas de tu aplicación. Esto se hace en la configuración del módulo AngularJS.

    angular.module('miApp')
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'vistas/inicio.html',
        controller: 'InicioController'
      })
      .when('/acerca', {
        templateUrl: 'vistas/acerca.html',
        controller: 'AcercaController'
      })
      .when('/contacto', {
        templateUrl: 'vistas/contacto.html',
        controller: 'ContactoController'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

    En este ejemplo, hemos definido tres rutas diferentes: /, /acerca y /contacto. Cada ruta especifica una plantilla HTML (templateUrl) y un controlador (controller) que se cargarán cuando la URL coincida con la ruta correspondiente. También hemos utilizado otherwise() para redirigir cualquier otra URL a la ruta raíz.

  3. Crear controladores y vistas:

    Asegúrate de crear los controladores y vistas correspondientes para cada ruta definida. Por ejemplo:

    angular.module('miApp')
  .controller('InicioController', function($scope) {
    // Lógica del controlador de la página de inicio
  })
  .controller('AcercaController', function($scope) {
    // Lógica del controlador de la página acerca de
  })
  .controller('ContactoController', function($scope) {
    // Lógica del controlador de la página de contacto
  });

    Crea las plantillas HTML correspondientes (inicio.html, acerca.html, contacto.html) en el directorio vistas.

  4. Agregar la directiva ng-view en tu página HTML principal:

    La directiva ng-view se utiliza para indicar dónde se cargarán las vistas de las diferentes rutas. Agrega la directiva ng-view en tu página HTML principal donde quieras que se carguen las vistas:

    <body ng-app="miApp">
  <div ng-view></div>
</body>

Con estos pasos, has definido las rutas en tu aplicación AngularJS utilizando el servicio $routeProvider. Ahora puedes navegar por tu aplicación y ver cómo las vistas y los controladores se cargan dinámicamente según las rutas definidas.





0 Comments:

Publicar un comentario

Blogger Templates Created by ThemeXpose