स्थानीय बनाना यूआरएल ui रूटर और कोणीय-अनुवाद

Question

मैं मार्ग के लिए यूआई-रूटर उपयोग कर रहा हूँ और अनुवाद के लिए कोणीय-अनुवाद के साथ। क्या मैं प्राप्त करने के लिए चाहते हैं तो तरह यूआरएल के लिए चुनी गई भाषा बाँध चल रहा है:

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

और तदनुसार जवाब देंगे।

उदाहरण देखने के लिए कोशिश की, लेकिन कुछ भी नहीं मिला। अगर किसी समान समाधान लागू, मैं आप इसे कैसे किया जानकर बहुत खुशी होगी।

धन्यवाद

Answer 1

मैं इन पंक्तियों के साथ कुछ का उपयोग करें:

CoffeeScript

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' 
    }); 
    } 
]); 

इस के साथ, आप कर सकते हैं injec वहाँ स्थान के लिए टी $stateParams अपने नियंत्रक में और पाने के लिए उपयोग:

CoffeeScript

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 घटना समान:

CoffeeScript

$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); 
}); 

ध्यान दें कि यदि आप उपयोग कर रहे हैं कोणीय-अनुवाद v1.x आप $translate.uses बजाय $translate.use उपयोग करना चाहिए।

Answer 2

मैं सही बात पर एक ब्लॉग पोस्ट में लिखा है: http://fadeit.dk/post/angular-translate-ui-router-seo

Answer 3

समाधान मान्य है केवल यदि आप नीचे प्रारूप के 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

अगर नीचे दृष्टिकोण सबसे अच्छा है मैं नहीं जानता एक, हालांकि यह काम करता है।

शुरुआत के लिए, पहला अंतर यह है कि हमने एक जेएसओएन फ़ाइल से मार्गों को पुनर्प्राप्त करने वाली सेवा का उपयोग करके गतिशील रूप से उत्पन्न होने के लिए यूई-राउटर राज्य स्थापित किए हैं। इस में @ मसीह के जवाब देने के लिए इसी तरह किया जाता है:

// 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 फ़ाइल पार्स करके: Angular - UI Router - programmatically 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; 
}]); 

हम तो आवेदन के run ब्लॉक में उपभोग था जिसके ऊपर routingService क्रिसटी के runtimeStates.addState का उपयोग कर रूटिंग पदानुक्रम बनाता है।

मैं निकट भविष्य में एक कार्यशील डेमो शामिल करने का प्रयास करूंगा।

क्रेडिट भी @ karl-agius पर जाते हैं।

Answer 4

उन लोगों के लिए जो ngRoute का उपयोग कर यूआरएल शामिल करना चाहते हैं (मैं यहां बिल्कुल ठीक से आया हूं), मैंने इसे निम्नानुसार कार्यान्वित किया है।

(1) मेरे .htaccess में मैंने एक भाषा सबडोमेन के बिना सभी यूआरएल पकड़े और इसे डिफ़ॉल्ट (मेरे मामले में 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) मेरी कोणीय परियोजना की 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) आदेश मेरी HTML फ़ाइलों में भाषा प्राप्त करने के लिए मैं भी $rootScope में जोड़ा।

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

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