How to achieve multilingual routing in angularjs?

Question

Angular

Wrote a multilingual SPA application in angular. Translation into other languages ​​is done through a service that takes translation from .json files. There is a dropdown with languages. The user clicks and the translation of the page changes. How to do
test.com/en/about
test.com/en/about
Here is a piece of code that I have plnkr.co/edit/k8cXldaNa78kqkqgkw37?p=preview
I would be very grateful for the help and possible sample code.

Answer 1

fadeit.dk/blog/post/angularjs-seo-for-angular-translate

Answer 2

I won’t offer an elegant solution and I won’t answer the question, but I’ll leave my comment here, for
the sake of history and so usually English; or write / ru at the domain on .ru - in the same place and so Russian usually). Look at any multilingual site - there is no language in the address bar in any form, this is already the last century. (The only exceptions are huge sites, where not only the interface language is separated, but also the content itself and even the search on it - for example, Wikipedia).
When a user enters the site, take the language from the cookies or determine its language (this is done using the browser tools - navigator.language and others) and save the resulting language in cookies. Upload the localization file. Everything. If the user clicked on another language, then save it in cookies and load another localization file.
On subsequent visits, the language will already be known, and the loading of the localization file can be accelerated by storing it in localStorage.
Also get tired every time you call, for example, $location.path(...), transfer the current language there as well. And the route config itself will look ugly:

$routeProvider
        .when('/:lang/about',
            {
                templateUrl: 'pages/about.html',
                controller: 'AboutController'
            })

and so each route.
And also, if the user manually types the address of the section in the address bar and forgets to specify the language (he simply types mysite.com/about , not mysite.com/ru/about ), then what, the application will not work?
And for localization, use Angular Translate.

Answer 3

// в conifg
$stateProvider
    .state('app', {
        abstract: true,
        url: '/{locale}'
    });

Another good option is to attach a front controller to the app and take the locale from there, network to the service, etc.
update
I gave an example for ui-router. I haven’t looked at the new Angular router yet, so I can’t say anything about it, but if there is an opportunity to do nesting, then it’s about the same.
The idea is this - a base rule is created, from which all states are already inherited. And the locale is registered exactly there, and the control takes place in a kind of front controller, hung on the entire application.