在Angular中本地化路线

Question

I am trying to create an Angular app in multiple languages but I have come across and issue with the routing. I found a workaround to make the necessary routes valid for 2 languages :

var app = angular.module("app", ["localization", "ngResource", "ngRoute"]).
config(function ($routeProvider, $locationProvider) {
    $routeProvider.
        when('/en-US/Gameplan/Admin/Fixtures/List', { controller: FixtureListController, templateUrl: '/Content/Templates/Fixtures.html' }).
        when('/da-DK/Gameplan/Admin/Fixtures/List', { controller: FixtureListController, templateUrl: '/Content/Templates/Fixtures.html' }).
        when('/en-US/Gameplan/Admin/Fixtures/Add', { controller: FixtureAddController, templateUrl: '/Content/Templates/FixtureAddEdit.html' }).
        when('/da-DK/Gameplan/Admin/Fixtures/Add', { controller: FixtureAddController, templateUrl: '/Content/Templates/FixtureAddEdit.html' }).
        when('/en-US/Gameplan/Admin/Fixtures/Edit/:fixtureId', { controller: FixtureEditController, templateUrl: '/Content/Templates/FixtureAddEdit.html' }).
        when('/da-DK/Gameplan/Admin/Fixtures/Edit/:fixtureId', { controller: FixtureEditController, templateUrl: '/Content/Templates/FixtureAddEdit.html' }).
        otherwise({ redirectTo: '/en-US/Gameplan/Admin/Fixtures/List' });
    $locationProvider.html5Mode(true); //will use html5 mode rather than hashbang where available
});

However, I still have an issue with links, currently my links look like this :

<a href="/en-US/Gameplan/Admin/Fixtures/Add"><i class="glyphicon glyphicon-plus"></i></a>
<a href="/en-US/Gameplan/Admin/Fixtures/Edit/{{fixture.Id}}"><i class="glyphicon glyphicon-edit"></i></a>

I don't want to hard code the URL and I have a client side object that returns the locale (in this case either en-US or da-DK), but I have been unable to dynamically set the href values. Is there any way to do this in Angular, or a different approach altogether regarding localizing routes?

Answer 1

This isn't AngularJS specific, but why not set a cookie as soon as you know what language the user wants for the UI? Then both the client and server have ready access to it on every page and you don't have to shuttle it around in the URL.

Answer 2

This might be too late, but in case you are using Angular 2x there is a library localize-router . You can find it here .