Javascript 使用UI路由器进行AngularJS翻译

我有一个使用Angularjs Translate library用Angularjs构建的应用程序，我用UI router设置了它，因为当前的网站已经被google以类似www.domain.com/en/us/的语言版本索引，我需要保持相同的URL结构。该网站有30多种语言，但它是一个SPA单页应用程序

下面是我的应用程序配置Javascript：

app.run(['$rootScope', '$translate', '$state', function ($rootScope, $translate, $state) {
    $rootScope.onChangeValue = function (e) {
        $rootScope.$broadcast("changeValue", e);
    };

    $rootScope.$on('$stateChangeSuccess', onStateChangeSuccess);

    function onStateChangeSuccess(event, toState, toParams) {
        var current = $translate.use();
        if (!current || current !== toParams.lang)
            $translate.use(toParams.lang);
    }
}]);

app.config(['$translateProvider', function ($translateProvider) {
    $translateProvider.useStaticFilesLoader({
        prefix: '../languages/locale-',
        suffix: '.json'
    });
    $translateProvider.fallbackLanguage('en');
    $translateProvider.preferredLanguage('en');
    $translateProvider.useSanitizeValueStrategy('escape');
    $translateProvider.useCookieStorage();
}]);

app.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('');

    $stateProvider.state('catalog', {
        url: '/{lang}',
        controller: "SudokuController",
        params: {
            lang: {
                value: function ($translate) {
                    return $translate.use();
                }
            }
        }
    });
}]);

在控制器中，我有以下功能：

    app.controller("SudokuController", ['$scope', 'Chronicle', '$timeout', '$cookies', '$translate', '$state', '$stateParams', function ($scope, Chronicle, $timeout, $cookies, $translate, $state, $stateParams) {

    $scope.params = $stateParams;
    $scope.changeLanguage = function (newLang) {
        var params = angular.extend($stateParams, { lang: newLang });

        $translate.use(newLang).then(function () {
            $state.transitionTo($state.current, params, {
                reload: true, inherit: false, notify: true
            });
        });
    }
}]);

以下是使用多种语言生成导航的HTML：

<div class="language-dropdown">
    <ul class="country-list" ng-controller="navigationLanguages">
        <li class="country" ng-repeat="language in languagesMenu">
            <div class="country-flag" style="background-image: url('images/mk.png');"></div>
            <a ng-bind="language.Language" ng-click="changeLanguage(language.Code)"></a>
        </li>
    </ul>
</div>

到目前为止，我已经成功地将所选语言添加到URL中，例如，如果我单击英语，我将获得www.domain.com/en；如果我单击西班牙语，我将获得www.domain.com/es。但是当我直接访问www.domain.com/en时，我得到了错误404-找不到对象

当URL与语言一起插入时，我如何做到这一点 在/之后，您可以使用该特定语言访问网站 而不是显示错误404

如何使语言状态如www.domain.com/en/us而不是 www.domain.com/en所以首先是语言代码，然后是 国家代码

这些URL/语言有可能被谷歌抓取吗

您的服务器代码是什么样子的？我猜它只是在/上提供索引页，因此如果您在非根目录的任何路由上刷新页面，它将不会提供任何内容，您将无法找到。基本上，对于单页应用程序，路由应该完全在客户端处理，因为这是一个关于你的应用程序的上下文，让你知道该做什么。所以，无论采用哪种路由，始终让您的服务器提供索引页，这将让ui路由器接管并发挥其魔力 要添加/en/us，请更新您的状态配置。此外，除非需要默认值，否则实际上不需要定义参数 $stateProvider.state'catalog'{ url:'/{lang}/{region}'， 控制器：Sudoku控制器 }; 谷歌的爬虫程序也许可以像你的一样抓取一个单页应用程序，但大多数爬虫程序不能——所以如果你关心SEO，你需要做一些额外的事情。你有几个选择 支付服务费用，就像你必须在服务器上设置一点代码一样，但在大多数情况下，他们会让你的网站可以爬行。我在过去使用过它们，并推荐它们。它是如何工作的？基本上，当爬虫访问您的站点时，而不是在单页应用程序中为他们提供服务，prerender将为他们提供一个静态版本的站点，该站点已预呈现，爬虫可以理解。 第二个选择是相当多的工作。我也这么做过，但是在angular的新版本上，我不推荐它，这让我很头疼。它被称为服务器端渲染。基本上，不是让另一个服务创建页面的预呈现版本，而是让服务器动态创建。angularjs的较新版本对此有一些内置功能，但不确定angularjs。我建议在谷歌上搜索更多关于预渲染和服务器端渲染的信息，这里有比我所能说的更多的信息。

---

可能重复谢谢您的回复！因此，服务器端非常简单，我的意思是它根本不为页面服务-我只有一个API，它与数据库通信并从数据库表检索信息，这就是我在服务器端的全部内容。我应该怎么做才能使路由正确-这样在重新加载或直接访问特定语言时不会出现错误404？@user13289818服务器上一定有提供index.html的内容，否则你的应用程序根本无法加载。你们可能有快递服务器吗？不确定它是否可行，但看到你的回购协议真的会帮助我深入了解它，甚至只是plunkrWell上的一个最小版本。目前它在本地主机上，它正在使用Apache。我不能把它放在plunkr上，因为它是连接在一起的，有很多文件。。