ui-router 및 angular-translate를 사용하여 URL 현지화

ui-router 및 angular-translate를 사용하여 URL 현지화

라우팅에는 ui-router를 사용하고 번역에는 angular-translate를 사용하고 있습니다.제가 원하는 것은 선택한 언어를 다음과 같이 URL에 바인딩하는 것입니다.

www.mydomain.com/en/
www.mydomain.com/ru/
www.mydomain.com/en/about
www.mydomain.com/ru/about

그에 따라 반응합니다.

예를 찾아봤지만 아무것도 찾을 수 없었다.만약 누군가가 유사한 솔루션을 구현했다면 어떻게 구현했는지 듣고 싶습니다.

감사해요.

저는 다음과 같은 방법으로 사용합니다.

커피 스크립트

angular.module('app')
.config([
  '$stateProvider'
  ($stateProvider) ->
    $stateProvider.state 'app',
      abstract: true
      url: '/{locale}'
    $stateProvider.state 'app.root',
      url: ''
    $stateProvider.state 'app.root.about',
      url: '/about'
])

자바스크립트

angular.module('app').config([
  '$stateProvider', function($stateProvider) {
    $stateProvider.state('app', {
      abstract: true,
      url: '/{locale}'
    });
    $stateProvider.state('app.root', {
      url: ''
    });
    return $stateProvider.state('app.root.about', {
      url: '/about'
    });
  }
]);

이것으로 주사할 수 있습니다.$stateParams컨트롤러에 접속하여 로케일에 접속합니다.

커피 스크립트

angular.module('app')
.controller('appCtrl', [
  '$scope', '$stateParams'
  ($scope, $stateParams) ->
    $scope.locale = $stateParams.locale
])

자바스크립트

angular.module('app').controller('appCtrl', [
  '$scope', '$stateParams', function($scope, $stateParams) {
    return $scope.locale = $stateParams.locale;
  }
]);

또는 페이지 전체에 자동으로 영향을 미치려면$stateChangeStart응용 프로그램컨트롤러 또는 이와 유사한 이벤트:

커피 스크립트

$scope.$on '$stateChangeStart', (event, toState, toParams, fromState, fromParams) ->
  $translate.use(toParams.locale)

자바스크립트

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
  $translate.use(toParams.locale);
});

angular-translate v1.x 를 사용하는 경우는,$translate.uses대신$translate.use.

이 솔루션은 다음 형식의 URL을 사용하는 경우에만 유효합니다.

domain.com/{locale}/about

그 때문에, 다음과 같이 됩니다.

domain.com/en/about domain.com/mt/about

최근에는 완전한 URL에 대한 변환을 실장해야 했습니다.따라서 다음과 같습니다.

domain.com/{locale}/{about}

어디에{about}는 각 언어로 번역됩니다.

domain.com/en/about domain.com/mt/fuqna

아래 접근방식이 최선인지는 모르겠지만 효과가 있습니다.

우선 첫 번째 차이점은 JSON 파일에서 경로를 가져오는 서비스를 사용하여 동적으로 생성되도록 UI 라우터 상태를 설정하는 것입니다.이는 @CrisT의 "Angular - UI Router - programmically add states"의 답변과 유사합니다.

module.service("routingService", ["$http", function($http) {

    self.get = function(options) {           
        return self.getByLocale({
            market: options.urlMarketCode
        });
    };

    self.getByLocale = function(options) {
        var market = options.market;

        // loads the different .json files based on the different market values passed, ex: routes-en.json
        var configurationKey = "routes-" + market;

        return $http({
            method: "GET",
            url: configurationKey + ".json",
            headers: {
                "Content-Type": "application/json"
            }
        }).then(function(response) {
            if (response.data) {
                return response.data;
            }
            return undefined;
        }).catch(function(e) {
            console.log(e);
        });
    };

    return self;
}]);

그 후, 상기 내용을 소비합니다.routingService에서run응용 프로그램 블록:

// run the module and register the state change handler
angular.module("sportsbook-app").run(["$state", "$rootScope", "routingService", "stateService",
    function ($state, $rootScope, routingService, stateService) {
        // retrieve the routing heirarchy from file
        routingService.get({
            urlMarketCode: $rootScope.language
        }).then(function (response) {
            if (response) {
                // add the routes to the $stateProvider
                stateService.generate(response);
            }
        });
    }
]);

그리고 마지막으로stateService는 단순히 JSON 파일을 해석하고 ChrisT의 runtimeStates.addState를 사용하여 라우팅 계층을 작성합니다.

가까운 시일 내에 작업 데모를 포함하도록 하겠습니다.

크레딧은 @karl-agius에게도 주어집니다.

저는 정확한 문제에 대해 블로그에 글을 올렸습니다.http://fadeit.dk/post/angular-translate-ui-router-seo

ngRoute를 사용하여 URL을 포함시키고 싶은 분들을 위해 다음과 같이 구현했습니다.

(1) 내에서는.htaccess언어 서브도메인이 없는 URL을 모두 잡아 디폴트(내 경우는 fr)로 리다이렉트 했습니다.유일한 진짜 단점은 모든 언어를 수동으로 지정해야 한다는 것입니다.

# https://stackoverflow.com/questions/19570572/htaccess-multi-language-site-with-sub-directories-and-default-301/19902914#19902914
# Add language to URL - redirect to default if missing    

RewriteBase /   

# empty url -> redirect to nl/
RewriteCond %{QUERY_STRING} !lang=(nl|fr)
RewriteRule ^$ fr/ [R=301,L]

# url is ONLY '/nl' or '/fr' -> redirect to /nl/ or /fr/ (adding slash)
RewriteRule ^(nl|fr)$  $1/ [R=301,L]

# now all urls have nl/ fr/ -> parse them
RewriteRule ^(nl|fr)/(.*)$  $2?lang=$1&%{query_STRING} [L]

(2) 나의 Angular 프로젝트의config블록 저는 현재 언어를 얻기 위해 단순히 URL을 구문 분석했습니다.

config.$inject = ['$translateProvider', '$windowProvider'];

function config($translateProvider, $windowProvider) {

    var $window,
        language;

        $window  = $windowProvider.$get();
        language = $window.location.pathname.replace(/\//g, '');

    //////

    $translateProvider
      .useStaticFilesLoader({
        prefix: 'translations/',
        suffix: '.json'
          })
      .useSanitizeValueStrategy('sanitizeParameters')
      .preferredLanguage( language )
}

3) (3) HTML 파일에 $rootScope.

run.$inject = ['$window', '$rootScope'];

function run($window, $rootScope ) {
    $rootScope.language = $window.location.pathname.replace(/\//g, '');
}

언급URL : https://stackoverflow.com/questions/24281652/localize-urls-with-ui-router-and-angular-translate