AngularJS使用UI路由器翻译

Question

[我有一个使用Angularjs翻译库-https://angular-translate.github.io/使用Angularjs构建的应用程序，并且已使用UI路由器对其进行了设置，因为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-找不到对象！

• 与网址一起插入网址时，我该如何做/之后使用该特定语言访问网站而不显示错误404。

  如何使语言状态如www.domain.com/en/us而不是www.domain.com/en（因此首先输入语言代码，然后输入国家代码）？

  这些URL /语言是否可以被Google抓取？

Answer 1

1. 您的服务器代码是什么样的？我猜想它只为"/"上的索引页面提供服务，因此，如果您以非根目录的任何路由刷新页面，它将无法提供任何服务，并且您将找不到。基本上，对于单页应用程序，路由应该完全在客户端处理，因为那是具有有关您的应用程序的上下文以了解该做什么的部分。因此，无论哪个路由，始终让您的服务器服务于索引页，这将使ui路由器接管并发挥其神奇作用
2. 要添加/en/us，请更新您的状态配置。另外，除非您需要默认值，否则实际上不需要定义params。

$stateProvider.state('catalog', {
    url: '/{lang}/{region}',
    controller: "SudokuController"
});

3. Google的抓取工具也许可以像您一样抓取单页应用程序，但大多数抓取工具不能抓取-因此，如果您关心SEO，则需要做一些额外的工作。你有几个选择
   1. 支付https://prerender.io/之类的服务的费用，您必须在服务器上设置一些代码，但是在大多数情况下，它们会确保您的网站可爬网。我过去曾经使用过，并推荐它们。它是如何工作的？基本上，当抓取工具访问您的网站而不是将其提供给单个页面应用程序时，prerender会为他们提供您网站的静态版本，该版本已被抓取者可以理解的预先渲染。
   2. 第二个选项需要大量工作。我也这样做了（但是在较新版本的angular上），不推荐这样做，令人头疼。它称为服务器端渲染。从根本上说，服务器无需执行其他服务来创建页面的预渲染版本，而是动态地执行该操作。较新版本的angular对此具有一些内置功能，不确定angularjs。我建议更多地使用有关预渲染和服务器端渲染的信息，在这里我可以说的更多。