5 lines
79 KiB
JSON
Raw Normal View History

{
"id": "guide/i18n",
"title": "Localizing your app",
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/i18n.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"localizing-your-app\">Localizing your app<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/i18n#localizing-your-app\"><i class=\"material-icons\">link</i></a></h1>\n\n<a id=\"angular-i18n\"></a>\n<p><em>Internationalization</em> (i18n) is the process of designing and preparing your app to be usable in different locales around the world.\n<em>Localization</em> is the process of building versions of your app for different locales, including extracting text for translation into different languages, and formatting data for particular locales.</p>\n<p>A <em>locale</em> identifies a region (such as a country) in which people speak a particular language or language variant. The locale determines the formatting and parsing of dates, times, numbers, and currencies as well as measurement units and the translated names for time zones, languages, and countries.</p>\n<div class=\"alert is-helpful\">\n<p>Create an adaptable user interface for all of your target locales that takes into consideration the differences in spacing for different languages. For details, see <a href=\"https://marketfinder.thinkwithgoogle.com/intl/en_us/guide/how-to-approach-i18n/#overview\" title=\"How to approach internationalization\">How to approach internationalization</a>.</p>\n</div>\n<p>Use Angular to internationalize your app:</p>\n<ul>\n<li>Use built-in pipes to display dates, numbers, percentages, and currencies in a local format.</li>\n<li>Mark text in component templates for translation.</li>\n<li>Mark plural forms of expressions for translation.</li>\n<li>Mark alternate text for translation.</li>\n</ul>\n<p>After preparing your app for an international audience, use the <a href=\"cli\">Angular CLI</a> to localize your app by performing the following tasks:</p>\n<ul>\n<li>Use the CLI to extract marked text to a <em>source language</em> file.</li>\n<li>Make a copy of this file for each language, and send these <em>translation files</em> to a translator or service.</li>\n<li>Use the CLI to merge the finished translation files when building your app for one or more locales.</li>\n</ul>\n<div class=\"alert is-helpful\">\n<p> To explore the sample app with French translations used in this guide, see the <live-example></live-example>.</p>\n</div>\n<h2 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/i18n#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>To prepare your app for translations, you should have a basic understanding of the following:</p>\n<ul>\n<li><a href=\"guide/glossary#template\" title=\"Definition of a template\">Templates</a></li>\n<li><a href=\"guide/glossary#component\" title=\"Definition of a component\">Components</a></li>\n<li><a href=\"guide/glossary#command-line-interface-cli\" title=\"Definition of CLI\">Angular CLI</a> command-line tool for managing the Angular development cycle</li>\n<li><a href=\"https://www.w3.org/XML/\" title=\"W3C: Extensible Markup Language (XML)\">Extensible Markup Language (XML)</a> used for translation files</li>\n</ul>\n<h2 id=\"steps-to-localize-your-app\">Steps to localize your app<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/i18n#steps-to-localize-your-app\"><i class=\"material-icons\">link</i></a></h2>\n<p>To localize your app, follow these general steps:</p>\n<ol>\n<li><a href=\"guide/i18n#setting-up-cli\">Add the localize package</a>.</li>\n<li><a href=\"guide/i18n#setting-up-locale\">Refer to locales by ID</a>.</li>\n<li><a href=\"guide/i18n#i18n-pipes\">Format data based on locale</a>.</li>\n<li><a href=\"guide/i18n#Template-translations\">Prepare templates fo
}