如何为AngularJS路由添加动态前缀

How to add dynamic prefix to AngularJS routes

本文关键字：添加 动态 前缀 路由 AngularJS      更新时间：2023-09-26

什么是本地化的URL：

  • http://example.com/eng/somepath

  • http://example.com/ger/somepath

让我们假装我们总是知道用户语言。

angular.module('website', [])
.constant('ROUTES', (function () {
    var lang = 'eng'; // just for example
    return {
        SOME_PATH: '/' + lang  + '/somepath'
  }
})())
.config([..., '$locationProvider', 'ROUTES', function(..., $locationProvider, ROUTES {
    $routeProvider.when(ROUTES.SOME_PATH, {templateUrl: 'pages/some_page.html', controller:     'SomePageController'});
    $locationProvider.html5Mode(true);
}])
.run(['$rootScope', 'ROUTES', function ($rootScope, ROUTES) {
    $rootScope.ROUTES = ROUTES;
}]);

所以，如果我在html中添加链接，那么每个链接都有效：

<a href="{{ROUTES.SOME_PATH}}">Some path</a>

在我点击一个链接后，路由工作正按计划进行。但如果我刷新页面或通过直接链接（"http://example.com/eng/somepath"），我无法访问任何页面并看到404页面。

使用$routeProvider绘制路线不是更容易吗？

$routeProvider.when('/:langId/:somepath', 
    {
     controller: 'languageHandlingController'
    })

我认为最好的选择是将url设置为类似http://mysite.com/somepath?lang=en的内容，然后您可以在任何需要的地方直接从url读取lang。

相关文章：