AngularJS में क्लाइंट पर टेम्पलेट्स का स्थानीयकरण

AngularJS पर एक बहुभाषी वेब एप्लिकेशन विकसित करते समय , आपको सबसे अधिक संभावना है कि किसी तरह अनुवाद समस्या को हल करने की आवश्यकता होगी। आज मैं उन तरीकों में से एक को साझा करना चाहूंगा, जिसे यह लागू किया जा सकता है।

मान लीजिए कि हमारे पास पहले से ही एक निश्चित सेवा है जो स्ट्रिंग्स के सरल शब्दकोश का उपयोग करके अनुवाद करने की क्षमता प्रदान करती है।

/** * @param {Settings} Settings * @constructor */ function Language(Settings) { this.Settings = Settings; } Language.$inject = ['Settings']; app.service('Language', Language); /** * @param {String} string * @returns {String} */ Language.prototype.translate = function(string) { var translation = __lang[this.Settings.getValue('lang')]; if (typeof translation[string] !== 'undefined') { string = translation[string]; } return string; }; 

AngularJS को जानने के बाद, पहला विचार जो मन में आता है, वह है स्ट्रिंग्स के अनुवाद के साथ "फ़ार्म के" पर "अनुवाद करने के लिए":

 <span>{{ 'some_english_string' | translate }}</span> 

लेकिन इस दृष्टिकोण की कमियां हैं:
- सबसे पहले, प्रत्येक $ पच चक्र में निष्पादित कोड की मात्रा अभी भी बढ़ जाती है और यदि आपके पास एक जटिल अनुप्रयोग है, तो एक ही समय में पृष्ठ पर बड़ी संख्या में लाइनें प्रदर्शित की जाती हैं और / या आपका अनुवाद एल्गोरिथ्म केवल शब्दकोष से एक पंक्ति लगाने की तुलना में पहले से ही अधिक जटिल है। - तब उत्पादकता घट जाएगी।
- दूसरी बात यह है कि कोणीय अभिव्यक्तियों का उपयोग अब इतना सुविधाजनक नहीं होगा यदि आप उनका उपयोग करते हैं, कहते हैं, कुछ निर्देशों के गुणों के अंदर, जो स्वयं पहले से ही अभिव्यक्तियों को स्वीकार करते हैं, क्योंकि अन्य अभिव्यक्तियों के अंदर अभिव्यक्ति का निष्पादन काम नहीं करेगा। इस मामले में, निश्चित रूप से, इस तरह के तारों को बदलने के लिए एक फिल्टर के बजाय एक वैश्विक फ़ंक्शन का उपयोग करना संभव होगा, लेकिन फिर भी ये अतिरिक्त कठिनाइयां हैं।

दूसरा विकल्प जो वे उपयोग करने की सलाह देते हैं, वह है सर्वर पर टेम्प्लेट का अनुवाद करना और क्लाइंट की ओर से पहले से ही फॉर्म की स्थानीयकृत प्रतियों का उपयोग करना है some_partial_en.html , some_partial_ru.html । इस स्थिति में, आपको भाषा बदलने के लिए एप्लिकेशन को पुनरारंभ करना होगा। इसके अलावा, यह हमेशा संभव नहीं होता है: उदाहरण के लिए, मेरी अंतिम परियोजना पर, एप्लिकेशन ने तृतीय-पक्ष सेवा से डेटा का उपयोग किया था, और बैकएंड को बिल्कुल भी नहीं लिखा जाना चाहिए था।

लेकिन एक और तरीका है - अर्थात्, क्लाइंट पर टेम्पलेट का अनुवाद करें, लेकिन AngularJS के साथ नहीं। उदाहरण के लिए, आप लो-डैश / अंडरस्कोरज से टेम्पलेट इंजन का उपयोग कर सकते हैं और फॉर्म के निर्माण का उपयोग कर सकते हैं:

 <span><%= t('some_english_string') %></span> 

प्लस यह है कि इस मामले में एक शब्दकोश में एक पंक्ति फ़ीड के अंदर कोणीय अभिव्यक्तियों का उपयोग करना संभव होगा

 __lang.ru = { "some_english_string": "    {{string.number}}" }; 

और इसके विपरीत, इस निर्माण को अन्य कोणीय अभिव्यक्तियों में प्रतिस्थापित करें, उदाहरण के लिए, कुछ निर्देश में:

 <div class="input-text-right"> <input type="text" my-num-format="00000.00" my-validate="[ { type: 'notGreaterThen', compareTo: 'somecondition()', message: '<%= t('some_validation_error_message') %>' } ]" ng-model="model.value"> </div> 

ऐसा करने के लिए, हम अपनी भाषा सेवा में टेम्प्लेट का अनुवाद करने के लिए एक विधि जोड़ेंगे:

 ..... /** * @param {String} template * @returns {String} */ Language.prototype.translateTemplate = function(template) { //     this.translate()      Lo-Dash  t() return _.template(template, { t: angular.bind(this, this.translate) }); }; 

अब हमें कोणीय द्वारा उपयोग किए जाने वाले पैटर्न को इंटरसेप्ट करने और उन्हें संकलित करने से पहले अनुवाद करने की आवश्यकता है। AngularJS में टेम्प्लेट प्राप्त करने के लिए कोई अलग सेवा नहीं है, लेकिन जहां भी ऐसा होता है (मार्ग, ngInclude निर्देश आदि) - कैशिंग के लिए $ templateCache का उपयोग किया जाता है। यहाँ हम इसे फिर से परिभाषित करते हैं:

 //  angular-    ,       app.factory('$templateCache', [ '$cacheFactory', 'Language', function($cacheFactory, Language) { /** * @constructor */ function MyTemplateCache() { /** * @param {String} key * @param {*} value */ this.put = function(key, value) { //   -  promise-,    $http if (typeof value.then !== 'undefined') { //    promise-,       value = value.then(function(response) { response.data = Language.translateTemplate(response.data); return response; }); } //   -  -,  angular      promise- $http else if (value instanceof Array) { value[1] = Language.translateTemplate(value[1]); } //   -    // ( ,        <script type="text/ng-template"></script> //   ) else if (typeof value === 'string') { value = Language.translateTemplate(value); } //    put() MyTemplateCache.prototype.put(key, value); }; } //     $templateCache MyTemplateCache.prototype = $cacheFactory('templates'); return new MyTemplateCache(); } ]); 

बस इतना ही। अब, पृष्ठ को फिर से लोड किए बिना भाषा बदलने के लिए, यह कैश को साफ़ करने और पुनः लोड करने के लिए मार्ग का कारण बनने के लिए पर्याप्त होगा:

 $templateCache.removeAll(); $route.reload(); 

एकमात्र टिप्पणी: जब आप मार्ग को रिबूट करते हैं, तो राज्य में सहेजे नहीं जाने वाले सभी परिवर्तनों को छोड़ दिया जाएगा, क्योंकि जब आप टेम्पलेट्स को फिर से जोड़ते हैं, तो सभी स्कोप फिर से बनाए जाएंगे।