{"id":8613,"date":"2016-05-18T17:23:02","date_gmt":"2016-05-18T15:23:02","guid":{"rendered":"http:\/\/phraseapp.com\/blog\/?p=105"},"modified":"2023-08-21T14:10:16","modified_gmt":"2023-08-21T12:10:16","slug":"translating-angularjs-applications","status":"publish","type":"post","link":"https:\/\/phrase.com\/blog\/posts\/translating-angularjs-applications\/","title":{"rendered":"Translating AngularJS Applications in Context With Angular-Phrase"},"content":{"rendered":"<p style=\"text-align: left;\"><a href=\"https:\/\/angularjs.org\/\">AngularJS<\/a> is an awesome Javascript framework to build single-page applications with Javascript. We\u2019re huge fans of the framework that was developed and is maintained by the Google team.<\/p>\n<p style=\"text-align: left;\">When developing large AngularJS applications for a wide audience, internationalization of these apps becomes more and more important to make the user interface accessible for users worldwide.<\/p>\n<p style=\"text-align: left;\">Handling the underlying i18n processes and files can be tedious and difficult to implement: interpolation, handling pluralization, guessing the correct user locale etc.<\/p>\n<p style=\"text-align: left;\">Fortunately, the AngularJS developer community is very active and publishes awesome modules on a regular basis. One of the most popular modules might be\u00a0<a title=\"angular-translate\" href=\"http:\/\/goo.gl\/faWO3v\">angular-translate<\/a>, a full-features AngularJS module that covers almost every aspect of internationalizing apps:<\/p>\n<ul style=\"text-align: left;\">\n<li>Loading i18n locale data<\/li>\n<li>Handling pluralization and interpolation<\/li>\n<li>Caching translations<\/li>\n<li>Guessing the user&#8217;s locale<\/li>\n<li>and many more<\/li>\n<\/ul>\n<p style=\"text-align: left;\">Covering all aspects of angular-translate fills a whole tutorial itself. See the angular-translate tutorial on <a title=\"angular-translate\" href=\"http:\/\/goo.gl\/LMVHbm\">ng-newsletter<\/a> for a great introduction to the module.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_69_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Overview<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/phrase.com\/blog\/posts\/translating-angularjs-applications\/#in-context-editing-for-angularjs-apps\" title=\"In-context editing for AngularJS apps\">In-context editing for AngularJS apps<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/phrase.com\/blog\/posts\/translating-angularjs-applications\/#install-angular-phrase\" title=\"Install Angular-Phrase\">Install Angular-Phrase<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/phrase.com\/blog\/posts\/translating-angularjs-applications\/#install-angular-phrase-via-bower\" title=\"Install Angular-Phrase via Bower:\">Install Angular-Phrase via Bower:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/phrase.com\/blog\/posts\/translating-angularjs-applications\/#build-from-source\" title=\"Build from source\">Build from source<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/phrase.com\/blog\/posts\/translating-angularjs-applications\/#add-the-module\" title=\"Add the module\">Add the module<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/phrase.com\/blog\/posts\/translating-angularjs-applications\/#configure\" title=\"Configure\">Configure<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/phrase.com\/blog\/posts\/translating-angularjs-applications\/#javascript-snippet\" title=\"Javascript snippet\">Javascript snippet<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/phrase.com\/blog\/posts\/translating-angularjs-applications\/#done\" title=\"Done\">Done<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/phrase.com\/blog\/posts\/translating-angularjs-applications\/#summary\" title=\"Summary\">Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h2 id=\"in-context-editing-for-angularjs-apps\" style=\"text-align: left;\"><span class=\"ez-toc-section\" id=\"in-context-editing-for-angularjs-apps\"><\/span>In-context editing for AngularJS apps<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left;\">If you\u2019re familiar with the Phrase in-context editor you know what a powerful tool it is to speed up the translation process and boost the content\u2019s quality. Editing translations directly on the page is fast and easy! If you don\u2019t know in-context editing yet, <a title=\"PhraseApp In-Context-Editor Demo\" href=\"https:\/\/phrase.com\/demo\/\">have a look at our demo<\/a>.<\/p>\n<p style=\"text-align: left;\">Adding in-context editing capability to your localized AngularJS app is easy with the <a title=\"angular-phrase\" href=\"http:\/\/goo.gl\/IHP0JL\">angular-phrase adapter<\/a>.<\/p>\n<p style=\"text-align: left;\">It extends the methods provided by angular-translate and makes every translatable string editable by the Phrase in-context editor.<\/p>\n<h2 id=\"install-angular-phrase\" style=\"text-align: left;\"><span class=\"ez-toc-section\" id=\"install-angular-phrase\"><\/span>Install Angular-Phrase<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"install-angular-phrase-via-bower\" style=\"text-align: left;\"><span class=\"ez-toc-section\" id=\"install-angular-phrase-via-bower\"><\/span>Install Angular-Phrase via Bower:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre class=\"lang:default highlight:0 decode:true EnlighterJSRAW\" data-enlighter-language=\"generic\">bower install angular-phrase<\/pre>\n<p style=\"text-align: left;\">(or download it manually from the\u00a0<code>dist<\/code>\u00a0folder)<\/p>\n<h3 id=\"build-from-source\" style=\"text-align: left;\"><span class=\"ez-toc-section\" id=\"build-from-source\"><\/span>Build from source<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: left;\">You can also build it directly from source to get the latest and greatest:<\/p>\n<pre class=\"lang:default highlight:0 decode:true EnlighterJSRAW\" data-enlighter-language=\"generic\">grunt build<\/pre>\n<h2 id=\"add-the-module\" style=\"text-align: left;\"><span class=\"ez-toc-section\" id=\"add-the-module\"><\/span>Add the module<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left;\">Add angular-phrase module to your existing AngularJS application\u00a0<em>after<\/em>\u00a0loading the\u00a0<span class=\"s3\">angular-translatemodule:<\/span><\/p>\n<pre class=\"lang:js decode:true EnlighterJSRAW\" data-enlighter-language=\"generic\">var myApp = angular.module(\"myApp\", ['pascalprecht.translate', 'phrase'])<\/pre>\n<h2 id=\"configure\" style=\"text-align: left;\"><span class=\"ez-toc-section\" id=\"configure\"><\/span>Configure<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left;\">Configure the module:<\/p>\n<pre class=\"lang:js decode:true EnlighterJSRAW\" data-enlighter-language=\"generic\">myApp.value(\"phraseProjectId\", \"YOUR-PROJECT-ID\");\nmyApp.value(\"phraseEnabled\", true);\nmyApp.value(\"phraseDecoratorPrefix\", \"{{__\");\nmyApp.value(\"phraseDecoratorSuffix\", \"__}}\");<\/pre>\n<h2 id=\"javascript-snippet\" style=\"text-align: left;\"><span class=\"ez-toc-section\" id=\"javascript-snippet\"><\/span>Javascript snippet<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left;\">Add the\u00a0<span class=\"s3\">phrase-javascript\u00a0directive within your application, usually best within the\u00a0<span class=\"s3\"><code>&lt;head&gt;<\/code>:<\/span><\/span><\/p>\n<pre class=\"lang:xhtml decode:true EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;phrase-javascript&gt;&lt;\/phrase-javascript&gt;\n<\/pre>\n<p style=\"text-align: left;\">If this does not work for you, you can also try to integrate the Javascript snippet manually.<\/p>\n<h2 id=\"done\" style=\"text-align: left;\"><span class=\"ez-toc-section\" id=\"done\"><\/span>Done<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left;\">If you have done everything correctly you should be able to start your AngularJS app with the in-context editor and start editing translations super-fast.<\/p>\n<h2 id=\"summary\" style=\"text-align: left;\"><span class=\"ez-toc-section\" id=\"summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left;\">Localizing your existing AngularJS apps with angular-translate can be done easily. It\u2019s a great module that covers everything you need to implement a localized version of your apps.<\/p>\n<p style=\"text-align: left;\">With just a few extra steps you can add the powerful Phrase in-context editor as well and speed up your localization process. Go ahead, translate your app, and get happier customers worldwide.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When developing large AngularJS applications for a wide audience, internationalization of these apps becomes more and more important.<\/p>\n","protected":false},"author":61,"featured_media":2612,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_stopmodifiedupdate":true,"_modified_date":"","_searchwp_excluded":"","footnotes":""},"categories":[40],"class_list":["post-8613","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-localization"],"acf":[],"_links":{"self":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts\/8613"}],"collection":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/users\/61"}],"replies":[{"embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/comments?post=8613"}],"version-history":[{"count":8,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts\/8613\/revisions"}],"predecessor-version":[{"id":89369,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts\/8613\/revisions\/89369"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/media\/2612"}],"wp:attachment":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/media?parent=8613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/categories?post=8613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}