Angular Route with multiple slashes override folder path

Question

I have an Angular app using ngRoute module along with HTML5 mode pushState for cleaner URL.

app.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);

$routeProvider
    //Route for home page
    .when("/", {
        templateUrl: "templates/main.html",
        controller: "imageController",
    })
    //Route for about page
    .when("/me", {
        templateUrl: "templates/me.html",
        controller: "imageController",
    })
    //404 error
    .when("/404", {
        template: "",
        controller: "imageController",
        title: "404 Error",
    })
    //Default route to /
    .otherwise({
        redirectTo: "/404",
    });
});

I have changed my .htaccess file to rewrite trailing slashes ("/").

RewriteEngine on
RewriteBase /

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d 

RewriteRule ^ - [L]

# Redirect urls without a trailing slash
RewriteRule ^(.*)/$ $1 [L,R=301]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

This works great for one trailing slash, for e.g. 'http://example.com/me/' updates to 'http://example.com/me' and gets routed accordingly.

However, the routing breaks when there are multiple slashes, for e.g. 'http://example.com/me/foo' routes to an incomplete page instead of redirecting to '/404'. How do I resolve this so that if '/me/foo' route doesn't exist, it gets redirected to '/404'.

Ohjay44 · Answer 1 · 2016-06-13T14:44:06.650

0

Your issue is that $route is not looking for anything after /me so it is treating it as a 404.

Do this to your route if you want parameters to follow it.

.when("/me/:params?", { // The ? allows for the parameter to be empty so /me and /me/foo will both return the correct route
    templateUrl: "templates/me.html",
    controller: "imageController",
})

If you want to retrieve those routeParams after the route has been called all you need to do is use $routeParams in your controller or directive like so.

scope.myParam = $routeParam.params;  //In the instince of the URL above your scope.myParams would set to foo

edited Jun 13 '16 at 14:44

answered Jun 10 '16 at 21:34

Ohjay44

897
7
20

When I do this, my '/me' route won't work. My question is not specific to '/me' but general one around any multiple slashes. For e.g. I would like 'http://example.com/blah/blah' to get routed to '/404'. Any idea? – stones4yap Jun 10 '16 at 22:42
Yes the $routeParams should work for all routes with multiple slashes. I also edited my response to show how to make it work without any params. /me and /me/foo should both work this way. – Ohjay44 Jun 13 '16 at 14:43
I tried your suggestion but it still doesn't work. Is it maybe because I have HTML5 pushState enabled? Maybe I need to adjust my .htaccess rewrite? Any other ideas would be greatly appreciated. Thank you. – stones4yap Jun 15 '16 at 14:37

score 0 · Accepted Answer · edited Jul 11 '16 at 14:13

0

I figured out the solution to my problem. I used multiple .htaccess files in the specific folders that I need Apache to apply the rewrite rule.

For e.g. To route everything to http://example.com/me/ I create a separate .htaccess file inside the /me folder and change the RewriteBase to /me/.

edited Jul 11 '16 at 14:13

Gustavo Morales

2,614
9
29
37

answered Jul 11 '16 at 13:11

stones4yap

33
6

Angular Route with multiple slashes override folder path

2 Answers2