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:
Incluir la dependencia de
ngRoute
:Asegúrate de incluir la dependencia de
ngRoute
en tu módulo principal:angular.module('miApp', ['ngRoute']);
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 utilizadootherwise()
para redirigir cualquier otra URL a la ruta raíz.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 directoriovistas
.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 directivang-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