Handling 404 pages in AngularJS

In AngularJS, if a user enters an invalid route (a URL that does not match any configured routes), we should show a custom 404 error page instead of a blank screen. This improves the user experience and guides them back to valid pages.

2. Using `$routeProvider.otherwise()` for 404 Handling

The simplest way to handle 404 errors in AngularJS is by using $routeProvider.otherwise(). This method redirects users to a specific page when they enter an undefined route.

Step 1: Configure Routes and 404 Page

var app = angular.module("myApp", ["ngRoute"]);

app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl: "home.html",
        controller: "HomeController"
    })
    .when("/about", {
        templateUrl: "about.html",
        controller: "AboutController"
    })
    .otherwise({
        templateUrl: "404.html",
        controller: "NotFoundController"
    });
});

Step 2: Create `404.html`

<h2>Page Not Found</h2>
<p>Oops! The page you are looking for does not exist.</p>
<a href="#!/">Go Back to Home</a>

Step 3: Create `NotFoundController` (Optional)

app.controller("NotFoundController", function($scope) {
    $scope.message = "The page you requested was not found.";
});

How It Works:

If a user enters http://example.com/#!/randompage, they will be shown 404.html.
The “Go Back to Home” link helps users return to the homepage.

3. Redirecting to a 404 Page Instead of Loading Content

If you want to redirect users to a dedicated 404.html file instead of loading it inside ng-view, use $location.path().

Example: Redirecting Invalid URLs

app.config(function($routeProvider, $locationProvider) {
    $routeProvider
    .when("/", {
        templateUrl: "home.html",
        controller: "HomeController"
    })
    .when("/about", {
        templateUrl: "about.html",
        controller: "AboutController"
    })
    .otherwise({
        redirectTo: "/404"
    });
});

app.controller("NotFoundController", function($scope) {
    $scope.message = "Sorry, this page does not exist.";
});

Now, invalid URLs will redirect to http://example.com/#!/404 instead of displaying content inside ng-view.

4. Custom Styling for 404 Pages

To improve the user experience, add some CSS styling.

Example: Add Custom Styles

.not-found {
    text-align: center;
    font-size: 24px;
    color: red;
    margin-top: 50px;
}

.not-found a {
    display: inline-block;
    padding: 10px 20px;
    background: blue;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

Update `404.html`

<div class="not-found">
    <h2>404 - Page Not Found</h2>
    <p>Oops! The page you are looking for does not exist.</p>
    <a href="#!/">Go Back to Home</a>
</div>

5. Handling 404 Errors for API Requests

If you are fetching data from an API and the resource is not found (404 error), you can handle it using $http’s .catch() method.

Example: Handle API 404 Errors

app.controller("UserController", function($scope, $http) {
    $http.get("https://api.example.com/user/99999")
    .then(function(response) {
        $scope.user = response.data;
    })
    .catch(function(error) {
        if (error.status === 404) {
            $scope.errorMessage = "User not found!";
        } else {
            $scope.errorMessage = "An error occurred!";
        }
    });
});

This will display "User not found!" if the API returns a 404 response.

2. Using $routeProvider.otherwise() for 404 Handling