How to add dynamic prefix to AngularJS routes

Question

What i what is make localized urls like:

http://example.com/eng/somepath
http://example.com/ger/somepath

Let pretend that we always know user lang.

angular.module('website', [])
.constant('ROUTES', (function () {
    var lang = 'eng'; // just for example
    return {
        SOME_PATH: '/' + lang  + '/somepath'
  }
})())
.config([..., '$locationProvider', 'ROUTES', function(..., $locationProvider, ROUTES {
    $routeProvider.when(ROUTES.SOME_PATH, {templateUrl: 'pages/some_page.html', controller:     'SomePageController'});
    $locationProvider.html5Mode(true);
}])
.run(['$rootScope', 'ROUTES', function ($rootScope, ROUTES) {
    $rootScope.ROUTES = ROUTES;
}]);

So, if i am add link in html, everithing works:

<a href="{{ROUTES.SOME_PATH}}">Some path</a>

After i am click a link routing work just as planned. But if i refresh page or came by direct link ("http://example.com/eng/somepath"), i cannot reach any page and see a 404 page.

Where is the '#' in your URLs? mysite.com/eng/somepath must be mysite.com/#/eng/somepath or the browser will be requesting an entirely different URL from the server. Only server settings could remap that back for you. — lossleader
– lossleader, Commented Jul 7, 2013 at 15:03
@lossleader You don't need the # since $locationProvider has it's html5Mode set to true — Roy Daniels
– Roy Daniels, Commented Jul 7, 2013 at 21:32
Yep, it's because $locationProvider.html5Mode(true); In browser without support html5 mode '#' will be exist — S Panfilov
– S Panfilov, Commented Jul 8, 2013 at 1:07
html5 mode isn't magic.. The urls you generate have to come back to the same page or they only work in the current DOM thanks to the history API. Try the docs examples (Books/chapters) and note that going to any of the addressbar urls generated are 404s.. — lossleader
– lossleader, Commented Jul 8, 2013 at 10:49

pasine · Accepted Answer · 2013-07-07 21:39:49Z

2

Wouldn't be easier to map the route with the $routeProvider?

$routeProvider.when('/:langId/:somepath', 
    {
     controller: 'languageHandlingController'
    })

answered Jul 7, 2013 at 21:39

pasine

11.6k10 gold badges53 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

S Panfilov Over a year ago

So, it's work but only in move :langId param to the end of url: mysite.com/somepath/ger. May be it cause of '#' in url

pasine Over a year ago

it should work in both ways. maybe is something in your controller. if you want to post more code, i can try to help you.

S Panfilov Over a year ago

Actualy thats no difference for me, so thank you again. Now i'm facing problem with direct links(or external, or refresh) - angular cannot load page by path, but it's look like i should solve it with server settings

Roy Daniels · Accepted Answer · 2013-07-07 21:32:36Z

0

I think the best option will be to have a the urls to be something like http://mysite.com/somepath?lang=en and then you can just read lang directly from the url wherever you need to.

answered Jul 7, 2013 at 21:32

Roy Daniels

6,3092 gold badges29 silver badges29 bronze badges

1 Comment

S Panfilov Over a year ago

Yes, it's more traditional path. The only reason is kepp url clear of extra get params. And, imho, urls like mysite.com/ger/somepath looks much pretty

Collectives™ on Stack Overflow

How to add dynamic prefix to AngularJS routes

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related