La tarea es determinar la ruta activa en AngularJS.
Enfoque: para determinar cuál es la ruta activa en cualquier momento en AngularJS, esto se puede lograr usando el método $on() y $location.path(). Un evento puede manejarse escribiendo un controlador de eventos usando un método $on(). $routeChangeStart es un evento que se activa cuando se inicia el cambio de ruta, de modo que lo maneja $rootScope.$on(). Por lo tanto, de esta manera, cada vez que se inicia un cambio de ruta, se activa $routeChangeStart manejado por el controlador de eventos $on() y luego $ubicación.ruta() da el valor de la ruta activa.
Sintaxis:
$rootScope.$on('$routeChangeStart', function () {
console.log($location.path())
});
Ejemplo: Aquí estamos mostrando cuál es la ruta activa. Dentro del método $on(), inicialice el valor de $ubicación.ruta() en cualquier variable de alcance de AngularJS y a través de expresiones (enlace de datos) muestre sus detalles.
A continuación se muestra la implementación del enfoque anterior:
Nombre del archivo: Active_Route.html
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Active Route</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p><a href = "#viewLanguages">View Languages</a></p>
<p><a href = "#viewCourses">View Courses</a></p>
<div ng-app = "mainApp" ng-controller = "GFGController">
<div ng-view></div>
<p>{{ message }}</p>
<p>{{ mylocation }} </p>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/viewLanguages', {
template: "<p> Details of all languages content "
+ "available at GeeksforGeeks </p>"
})
.when('/viewCourses', {
template: "<p> Details of all courses available at"
+ " GeeksforGeeks</p>"
})
.otherwise({
redirectTo: '/viewLanguages'
});
}]);
mainApp.controller('GFGController', function(
$scope, $location, $rootScope) {
$scope.message = "This page will be used to promote"
+ " GeeksforGeeks";
$rootScope.$on('$routeChangeStart', function () {
$scope.mylocation = $location.path();
});
});
</script>
</body>
</html>
Producción:
- Cuando se hace clic en el primer enlace:
- Cuando se hace clic en el segundo enlace:
Publicación traducida automáticamente
Artículo escrito por pratyushranjan14 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA