TUTORIALES

Definición de rutas


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