Tips for preserving the URL of a 404 page in AngularJS

Question

Tips for preserving the URL of a 404 page in AngularJS

We are currently developing an angularjs application where users can publish their profiles as resumes.

For example, a valid URL for a published profile would be:

www.page.com/public/johnsmith

However, if the URL is something like:

www.page.com/public/johnsmith2345

which is not a public profile, I want to display a 404 page. The challenge is that due to angular's routing, I need to redirect to the 404 page, resulting in the URL being rewritten as:

www.page.com/404.

What is the correct way to maintain the original URL and ensure it works in IE9?

javascript angularjs http-status-code-404 url-routing

Answer 1

Answer №1

One approach to handling this situation is by implementing logic in your controller or view. For example:

$routeProvider.when('/public/:user', 
    {
        templateUrl: 'profile.html',
        controller: 'profileCtrl',
        resolve: {
            userProfile: {
                //Fetch the user's profile and return null if not found
            }
        }
    }
);

var profileCtrl = function($scope, userProfile) {
    $scope.userProfile = userProfile;
}

In your profile.html:

<div ng-if="!userProfile">
    <div ng-include="404page.html"></div>
</div>
<div ng-if="userProfile">
    ... Display the user's profile here
</div>

Answer 2

One approach to handling this situation is by implementing logic in your controller or view. For example:

$routeProvider.when('/public/:user', 
    {
        templateUrl: 'profile.html',
        controller: 'profileCtrl',
        resolve: {
            userProfile: {
                //Fetch the user's profile and return null if not found
            }
        }
    }
);

var profileCtrl = function($scope, userProfile) {
    $scope.userProfile = userProfile;
}

In your profile.html:

<div ng-if="!userProfile">
    <div ng-include="404page.html"></div>
</div>
<div ng-if="userProfile">
    ... Display the user's profile here
</div>

Tips for preserving the URL of a 404 page in AngularJS

Answer №1

Similar questions

Utilizing Ajax to send a parameter to a separate PHP script

Executing a function from a dynamically generated element in AngularJS

What is the best way to extract value from a specific link using JavaScript?

What are the best ways to enhance performance when making multiple require() calls?

Whenever the page is refreshed, the props in my application are dynamically updated thanks to the getStaticProps function I utilize

Ways to customize the default countdown timer

Transferring the value of a TextBox to another TextBox in ASP.NET across multiple rows

Incorporate a CSS-styled Hyperlink Button into a Jquery Loopedslider

RectAreaLight in Three js does not produce any light reflection when used with MeshPhongMaterial due to lack of support for OES_texture_half

Is there a way to trigger a function in an AngularJS controller from a Backbone controller?

JQuery HTML form validation continues to send emails even when there are blank entries

How to send Multipart form data with a string payload

Tips for displaying a temporary image placeholder while the actual image loads

What is the best way to send an array of grouped data to a table

What are some effective solutions for resolving design problems in Isotope?

Ways to showcase the resulting answer using vue.js?

Ways to implement CSS with javascript

Struggling to make the upvoting feature function properly in the Thinkster MEAN Stack Tutorial

Retrieving information from the mainframe

Error in Node.js: Trying to access property 'get' of an undefined object