AngularJS перевод с UI Router - PullRequest
       36

AngularJS перевод с UI Router

0 голосов
/ 30 апреля 2020

У меня есть приложение, созданное с Angularjs с использованием Angularjs Библиотека перевода - https://angular-translate.github.io/, и я настроил его с помощью маршрутизатора пользовательского интерфейса, поскольку текущий веб-сайт уже был проиндексирован 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 выбранный язык, например, если я нажму на Engli sh, я получу www.domain.com/en, если Я нажимаю на Spani sh, я получаю www.domain.com/es. Но когда я go прямо на www.domain.com/en, я получаю ошибку 404 - Объект не найден!

  • Как это сделать, когда URL-адрес вставляется вместе с языком после / для доступа к веб-сайту с этим конкретным языком вместо отображения ошибки 404.

    Как сделать языки такими, как www.domain.com/en/us вместо www.domain.com/en (поэтому сначала идет код языка, а затем код страны)?

    Возможно ли, чтобы эти URL / языки могли быть просмотрены Google?

1 Ответ

1 голос
/ 01 мая 2020
  1. Как выглядит код вашего сервера? Я предполагаю, что он обслуживает только страницу индекса на "/", поэтому, если вы обновите sh свою страницу на любом маршруте, отличном от root, он ничего не подаст, и вас не найдут. В основном для одностраничных приложений маршрутизация должна выполняться полностью на стороне клиента, потому что это часть, которая имеет контекст о вашем приложении, чтобы знать, что делать. Так что всегда ваш сервер обслуживает страницу индекса независимо от того, какой маршрут, что позволит маршрутизатору пользовательского интерфейса взять верх и сделать все возможное c
  2. Чтобы добавить /en/us, обновите конфигурацию вашего состояния. Кроме того, вам не нужно определять params, если вам не нужно значение по умолчанию
$stateProvider.state('catalog', {
    url: '/{lang}/{region}',
    controller: "SudokuController"
});
Сканеры Google могли бы сканировать одностраничное приложение, как ваше, но большинство сканеров не могут - поэтому, если вы заботитесь о SEO, вам нужно будет сделать некоторые дополнительные вещи. У вас есть пара вариантов
  1. Оплатить услугу, такую ​​как https://prerender.io/ Вам нужно настроить немного кода на вашем сервере, но по большей части они позаботятся о создании вашего сайта сканироваться. Я использовал их в прошлом и рекомендую их. Как это работает? По сути, когда сканер посещает ваш сайт вместо того, чтобы обслуживать их в одностраничном приложении, предварительная визуализация будет предоставлять им стати c версию вашего сайта, которая была предварительно обработана для понимания сканером.
  2. Второй вариант довольно трудоемкий. Я также сделал это (но на более новой версии angular) и не рекомендую это, много головных болей. Это называется рендерингом на стороне сервера. По сути, вместо того, чтобы другой сервис создавал предварительно обработанную версию вашей страницы, ваш сервер делает это на лету. Более новая версия angular имеет некоторые встроенные функции для этого, не уверен насчет angularjs. Я рекомендую поискать в Google больше о предварительном рендеринге и рендеринге на стороне сервера, но я могу сказать, что здесь нет ничего невозможного.
...