AngularJS 多语言 URL 带链接的路由

Question

我有一个 AngularJS 网络应用程序。我正在更改应用程序，以便 URL 可以是多语言的（用于 SEO 索引目的）。

我正在设置我的 app.js，像这样：

$routeProvider.when('/:language', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'});     
    $routeProvider.when('/:language/about', {templateUrl: 'partials/about.html', controller: 'AboutCtrl'});

然后，在一个服务中，我使用 $routeParams 获取语言参数，并使用 angular-translate 调用我的翻译代码以提供相应语言的页面。

到目前为止一切正常。

但是现在，我所有的内部链接，即 <a href="/about">{{'ABOUT' | translate}}</a> 都停止工作了，因为它们缺少语言参数。

我的方法是在服务中设置语言并将其连接到链接中，类似于 <a href="{{TranslationService.getLanguage()}}/about">{{'ABOUT' | translate}}</a>。当然，这会让我重构我所有的链接。

这是正确的方法还是有更好更聪明的方法？

Answer 1

您可以使用 ui-router 插件并将您的路由定义为嵌套。

https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-routing-for-nested-states

$stateProvider
  .state('home', {
     url: '/:language',
     ...
  })
  .state('home.about', {
     url: '/about',
     ...
  });

然后，您可以使用 ui-sref 指令并使用相对路径导航路线。

home.html: 去'About'子路由<a ui-sref=".about">About</a>

about.html：去父路由<a ui-sref="^">Home</a>

Answer 2

我终于按照上面描述的方法进行了。使用 UI-Router 可能是最好的方法，但更改对我的开发产生了 medium/big 影响。

AngularJS 多语言 URL 带链接的路由

AngularJS multilanguage URL routing with links

multilingual

angularjs