Question

我有一个AngularJS webapp。我正在更改应用程序，因此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：转到＆＃39;关于＆＃39;儿童路线<a ui-sref=".about">About</a>

about.html：转到父路线<a ui-sref="^">Home</a>

Answer 2

我终于按照上面描述的方法了。使用UI-Router可能是最好的方法，但这种变化对我的开发有中等/大的影响。

带链接的AngularJS多语言URL路由

2 个答案: