What is $routeChangeStart and $routeChangeSuccess?

In AngularJS, when using ngRoute for routing, two key events help track the navigation flow:

1. $routeChangeStart – Fired before the route changes.
2. $routeChangeSuccess – Fired after the route has successfully changed.

These events allow developers to implement loading indicators, authentication checks, logging, and other logic during navigation.

---

1️⃣ What is $routeChangeStart?

$routeChangeStart is triggered before the route actually changes. It’s useful for:

Checking authentication before allowing navigation.
Showing a loading indicator while the new route is being resolved.
Preventing unauthorized access by stopping the transition.

Example: Using $routeChangeStart to Restrict Unauthorized Access

app.run(function($rootScope, $location, AuthService) {
    $rootScope.$on('$routeChangeStart', function(event, next, current) {
        if (next.requiresAuth && !AuthService.isLoggedIn()) {
            event.preventDefault(); // Stop navigation
            $location.path('/login'); // Redirect to login
        }
    });
});

Explanation:

• If the next route (next) requires authentication and the user is not logged in, we call event.preventDefault() to stop the navigation.
• The user is then redirected to the login page.

---

2️⃣ What is $routeChangeSuccess?

$routeChangeSuccess fires after the route successfully loads. It’s useful for:

Hiding loading indicators after the route loads.
Updating page titles dynamically based on the route.
Logging navigation events for analytics.

Example: Updating the Page Title on Route Change

javascriptCopyEditapp.run(function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function(event, currentRoute, previousRoute) {
        document.title = currentRoute.title || 'Default Title';
    });
});

🔹 Explanation:

• When the route changes successfully, the document.title is updated based on the current route’s title.

---

3️⃣ Practical Use Case: Loading Spinner During Route Changes

To improve user experience, we can show a loading spinner when a route is changing.

Example: Showing a Loader Using $routeChangeStart and $routeChangeSuccess

app.run(function($rootScope) {
    $rootScope.isLoading = false;

    $rootScope.$on('$routeChangeStart', function() {
        $rootScope.isLoading = true; // Show loader
    });

    $rootScope.$on('$routeChangeSuccess', function() {
        $rootScope.isLoading = false; // Hide loader
    });
});

🔹 Explanation:

• isLoading is set to true before the route change ($routeChangeStart).
• isLoading is set to false after the route is successfully loaded ($routeChangeSuccess).
• You can use this in your HTML:

<div ng-show="isLoading" class="loading-spinner">Loading...</div>

---

4️⃣ $routeChangeStart vs $routeChangeSuccess

Feature	$routeChangeStart	$routeChangeSuccess
When it fires	Before route change starts	After route loads successfully
Use Cases	Authentication, canceling navigation, showing loaders	Hiding loaders, logging, updating UI
Can prevent navigation?	Yes (event.preventDefault())	No
Can access next & previous routes?	Yes	Yes

---

5️⃣ $routeChangeError: Handling Route Errors

If there’s an error while changing routes (e.g., a failed data fetch), $routeChangeError fires.

Example: Handling Route Errors

app.run(function($rootScope) {
    $rootScope.$on('$routeChangeError', function(event, current, previous, rejection) {
        console.error('Route change failed:', rejection);
    });
});

Logs the error when route changes fail.