ngRoute adds trailing slash to some url but not all

Question

When user go to either localhost:8888 or localhost:8888/, my angular application change to url to http://localhost:8888/#!/

This is my angular app in home page:

app.config(['$locationProvider', '$routeProvider',
    function($locationProvider, $routeProvider) {
        $locationProvider.hashPrefix('!');

        $routeProvider
            .when('/', {
                redirectTo: ((window.status === 'signup') ? '/signup' : '/signin')
            })
            .when("/signin", {
                templateUrl: "/public/user/signin.html",
                controller: "signinController"
            })
            .when('/signup', {
                templateUrl: "/public/user/signup.html",
                controller: "signupController"
            })
            .otherwise({
                redirectTo: '/'
            });
    }
])

if user go to http://localhost:8888/auth, angular redirects to http://localhost:8888/auth#!/signin,

only if user go to http://localhost:8888/auth/, angular redirects to http://localhost:8888/auth/#!/signin

app.config(['$locationProvider', '$routeProvider',
    function($locationProvider, $routeProvider) {
        $locationProvider.hashPrefix('!');

        $routeProvider
            .when('/', {
                redirectTo: ((window.status === 'signup') ? '/signup' : '/signin')
            })
            .when("/signin", {
                templateUrl: "/public/user/signin.html",
                controller: "signinController"
            })
            .when('/signup', {
                templateUrl: "/public/user/signup.html",
                controller: "signupController"
            })
            .otherwise({
                redirectTo: '/'
            });
    }
])

the angular official website and most of the books recommend using xxx/#!/xxx format. How can I do that?

Edit: I understand that I can add the trailing slash from the server side. but user can directly type xxx.com/auth. Why is xxx.com working but not xxx.com/auth?

Edit2: the tutorial sample project works for all urls. we have pretty much the same implementation

http://angular.github.io/angular-phonecat/step-8/app/#/phones

try to enter http://angular.github.io/angular-phonecat/step-8/app (without the trailing slash

Tutorial link: https://docs.angularjs.org/tutorial/step_07

Blaise · Answer 1 · 2015-06-23T11:11:55.077

1

This is something you should fix on your back-end by adding a 301 redirect from /auth to /auth/.

Nginx:

rewrite ^/auth$ /auth/ permanent;

Apache:

Redirect "/auth" "/auth/" [R=301]

edited Jun 23 '15 at 11:11

answered Jun 23 '15 at 11:07

Blaise

13,139
9
69
97

can i fix it with angular code? because user are most likely to type `www.xxx.com/auth` – OMGPOP Jun 23 '15 at 11:10
You can also redirect using JavaScript using `if (location.pathname === '/auth') { location.replace('/auth/'); }` , but it's better to fix this on your server because that will be faster. – Blaise Jun 23 '15 at 11:13
you mean $location.replace? or $window.location.replace() – OMGPOP Jun 23 '15 at 11:13
`$window.location.replace`. But again, doing this on your server will be faster. The delay of a javascript redirect will be noticable by the user. – Blaise Jun 23 '15 at 11:14
why is the `localhost:8888` working but not `localhost:8888/auth`? – OMGPOP Jun 23 '15 at 11:15
I dont think i can put it in `app.config(['$locationProvider'...)`. so do i put it in every controller? – OMGPOP Jun 23 '15 at 11:17
I would put it outside the AngularJS system because then it will be faster, like my first comment to this answer, for example in the same file where you define your main module. Otherwise it will wait until AngularJS initializes before it executes the redirect, which will be more delay. `localhost:8888` is the same as `localhost:8888/`. Some browsers hide the trailing slash when there's no pathname or hash, but the first slash is always there. See http://stackoverflow.com/q/2581411/451480 – Blaise Jun 23 '15 at 11:20
I dont understand the posted question. they are saying xxx.com/auth and xxx.com/auth/ are different. but they are the same in my angular app – OMGPOP Jun 23 '15 at 11:24
if `localhost:8888/auth` is not working, you should serve the same HTML file there on your server, or link to `http://localhost:8888/#!/auth/signin` instead. – Blaise Jun 23 '15 at 11:25
I just checked the tutorial sample project. the backslash is added in all urls. please refer to my edited question – OMGPOP Jun 23 '15 at 12:23

ngRoute adds trailing slash to some url but not all

1 Answers1