AngularJS:在应用启动后设置$routeProvider ?

I'm building a multilingual app and I'm wondering if it's possible to set the angular-route paths dynamically, ie. so that I can switch the slug from English to Spanish (/#/login becomes /#/iniciar).

我正在构建一个多语言应用程序，我想知道是否可以动态地设置angular-route路径。这样我就可以将蛞蝓从英语切换到西班牙语(/#/登录变成/#/iniciar)。

I am using angular-translate and require.js lazy-loading, so my translated strings are loaded after the app is bootstrap. So I would need to be able to change the routes after the app has been bootstrap.

我正在使用英语翻译和要求。js延迟加载，所以我翻译的字符串在应用程序启动后被加载。所以我需要能够在app被引导后改变路线。

Is this possible using angular-route, or maybe even using angular-ui's ui-router instead...?

是否可以使用angular-route，或者甚至使用angular-ui的ui路由器?

Something like:

喜欢的东西:

app.config(function ($routeProvider, SomeLanguageService) {
  var pathSlugs = SomeLanguageService.getRouteSlugs('ES');

  $routeProvider
    .when('/' + pathSlugs.home , {
      templateUrl: '/home/home.html',
      controller: ''
    });
});

1 个解决方案

#1

The way with UI-Router including working plunker is shown here: AngularJS - UI-router - How to configure dynamic views

UI-Router包括工作柱塞器的方法如下:AngularJS - UI-Router——如何配置动态视图

The trick is to, keep the reference to provider configuration in the config phase, and use it later in run phase

诀窍是，在配置阶段保留对提供者配置的引用，并在稍后的运行阶段使用它

var $stateProviderRef;
app.config(['$stateProviderRef',
  function ($stateProviderRef) 
  {
    $stateProviderRef = $stateProvider; // this configuration API
  }])

And now even in run we can still access that provider configuration API, to define states

现在，即使在运行中，我们仍然可以访问提供者配置API，来定义状态。

app.run([ SomeLanguageService
  function (SomeLanguageService) 
  {
      var pathSlugs = SomeLanguageService.getRouteSlugs('ES');
      // define state as needed
      var state = {
        "url": '/' + pathSlugs.home + ...,
        "parent" : ...,
        "abstract": ...
        "views": {}
      };
      // inject that in to the configuration
      $stateProviderRef.state(value.name, state);
     ...

#1