Рубрики

Как определить активный маршрут в AngularJS?

Задача — определить активный маршрут в AngularJS.

Подход. Чтобы определить, какой маршрут является активным в любой момент в AngularJS, это можно сделать с помощью метода $ on () & $ location.path (). Событие можно обработать, написав обработчик события с помощью метода $ on (). $ RouteChangeStart — это событие, которое запускается, когда инициируется изменение маршрута, так, что обрабатывается $ rootScope. $ On (). Следовательно, таким образом, когда бы ни инициировалось изменение маршрута, он запускает $ routeChangeStart, обрабатываемый обработчиком события $ on (), а затем $ location.path () дает значение активного маршрута.

Синтаксис:

$rootScope.$on('$routeChangeStart', function () {
    console.log($location.path())
});

Пример: здесь мы показываем, какой маршрут является активным. Внутри метода $ on () инициализируйте значение $ location.path () для любой переменной области AngularJS и через выражения (привязка данных) отобразите ее детали.

Ниже приведена реализация вышеуказанного подхода:

Имя файла: 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>

Выход:

  • При нажатии на первую ссылку:
  • При нажатии на 2-ю ссылку:

Рекомендуемые посты:

Как определить активный маршрут в AngularJS?

0.00 (0%) 0 votes