Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@robisim74
robisim74 committed Nov 29, 2020
1 parent c2bf5b1 commit 0b79b33
Show file tree
Hide file tree
Showing 23 changed files with 2,872 additions and 1,011 deletions.
34 changes: 18 additions & 16 deletions docs/dependencies.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,41 +48,43 @@
</ol>
<ul class="dependencies-list">
<li>
<b>@angular/animations</b> : 10.0.2</li>
<b>@angular/animations</b> : 11.0.2</li>
<li>
<b>@angular/common</b> : 10.0.2</li>
<b>@angular/common</b> : 11.0.2</li>
<li>
<b>@angular/compiler</b> : 10.0.2</li>
<b>@angular/compiler</b> : 11.0.2</li>
<li>
<b>@angular/core</b> : 10.0.2</li>
<b>@angular/core</b> : 11.0.2</li>
<li>
<b>@angular/forms</b> : 10.0.2</li>
<b>@angular/forms</b> : 11.0.2</li>
<li>
<b>@angular/platform-browser</b> : 10.0.2</li>
<b>@angular/platform-browser</b> : 11.0.2</li>
<li>
<b>@angular/platform-browser-dynamic</b> : 10.0.2</li>
<b>@angular/platform-browser-dynamic</b> : 11.0.2</li>
<li>
<b>@angular/platform-server</b> : 10.0.2</li>
<b>@angular/platform-server</b> : 11.0.2</li>
<li>
<b>@angular/router</b> : 10.0.2</li>
<b>@angular/router</b> : 11.0.2</li>
<li>
<b>@formatjs/intl-getcanonicallocales</b> : ^1.2.10</li>
<b>@formatjs/intl-displaynames</b> : ^4.0.1</li>
<li>
<b>@formatjs/intl-pluralrules</b> : ^3.0.2</li>
<b>@formatjs/intl-getcanonicallocales</b> : ^1.5.2</li>
<li>
<b>@formatjs/intl-relativetimeformat</b> : ^6.0.2</li>
<b>@formatjs/intl-locale</b> : ^2.4.8</li>
<li>
<b>@nguniversal/express-engine</b> : 10.0.1</li>
<b>@formatjs/intl-pluralrules</b> : ^4.0.0</li>
<li>
<b>cross-env</b> : ^7.0.2</li>
<b>@formatjs/intl-relativetimeformat</b> : ^8.0.0</li>
<li>
<b>express</b> : ^4.15.2</li>
<b>@nguniversal/express-engine</b> : 11.0.0</li>
<li>
<b>express</b> : ^4.17.1</li>
<li>
<b>ngx-cookie</b> : ^5.0.0</li>
<li>
<b>ngx-cookie-backend</b> : ^5.0.0</li>
<li>
<b>rxjs</b> : 6.5.4</li>
<b>rxjs</b> : ^6.5.4</li>
<li>
<b>tslib</b> : ^2.0.0</li>
<li>
Expand Down
548 changes: 322 additions & 226 deletions docs/graph/dependencies.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/images/architecture.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 34 additions & 13 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,14 @@ <h4 id="pure-pipes">Pure Pipes</h4>
&lt;p&gt;{{ &#39;whoIAm&#39; | translate:locale.language:{ name: &#39;Angular l10n&#39; } }}&lt;/p&gt;

&lt;p&gt;{{ today | l10nDate:locale.language:{ dateStyle: &#39;full&#39;, timeStyle: &#39;short&#39; } }}&lt;/p&gt;
&lt;p&gt;{{ timeAgo | l10nTimeAgo:locale.language:&#39;second&#39;:{ numeric:&#39;always&#39;, style:&#39;long&#39; } }}&lt;/p&gt;

&lt;p&gt;{{ value | l10nNumber:locale.language:{ digits: &#39;1.2-2&#39;, style: &#39;currency&#39; } }}&lt;/p&gt;</code></pre></div><p>Pure pipes need to know when the <em>locale</em> changes. So import <code>L10nLocale</code> injection token in the component:</p>
&lt;p&gt;{{ value | l10nNumber:locale.language:{ digits: &#39;1.2-2&#39;, style: &#39;currency&#39; } }}&lt;/p&gt;

&lt;p&gt;1 {{ 1 | l10nPlural:locale.language:&#39;home&#39;:{ type: &#39;cardinal&#39; } }}&lt;/p&gt;

&lt;button *ngFor=&quot;let item of schema&quot;
(click)=&quot;setLocale(item.locale)&quot;&gt;{{ item.locale.language | l10nDisplayNames:locale.language:{ type: &#39;language&#39; } }}&lt;/button&gt;</code></pre></div><p>Pure pipes need to know when the <em>locale</em> changes. So import <code>L10nLocale</code> injection token in the component:</p>
<div><pre class="line-numbers"><code class="language-TypeScript">export class AppComponent {

constructor(&#64;Inject(L10N_LOCALE) public locale: L10nLocale) { }
Expand All @@ -121,6 +127,8 @@ <h4 id="pure-pipes">Pure Pipes</h4>
&lt;!-- &lt;p [l10nTranslate]=&quot;{ name: &#39;Angular l10n&#39; }&quot;&gt;whoIAm&lt;/p&gt; --&gt;

&lt;p [options]=&quot;{ dateStyle: &#39;full&#39;, timeStyle: &#39;short&#39; }&quot; l10nDate&gt;{{ today }}&lt;/p&gt;
&lt;p [options]=&quot;{ numeric:&#39;always&#39;, style:&#39;long&#39; }&quot; unit=&quot;second&quot; l10nTimeAgo&gt;{{ timeAgo }}&lt;/p&gt;

&lt;p [options]=&quot;{ digits: &#39;1.2-2&#39;, style: &#39;currency&#39; }&quot; l10nNumber&gt;{{ value }}&lt;/p&gt;</code></pre></div><p>You can dynamically change parameters and expressions values as with pipes, but not in attributes.</p>
<h4 id="apis">APIs</h4>
<div><pre class="line-numbers"><code class="language-TypeScript">export class AppComponent implements OnInit {
Expand All @@ -134,12 +142,15 @@ <h4 id="apis">APIs</h4>
this.whoIAm = this.translation.translate(&#39;whoIAm&#39;, { name: &#39;Angular l10n&#39; });

this.formattedToday = this.intl.formatDate(this.today, { dateStyle: &#39;full&#39;, timeStyle: &#39;short&#39; });
this.formattedTimeAgo = this.intl.formatRelativeTime(this.timeAgo, &#39;second&#39;, { numeric: &#39;always&#39;, style: &#39;long&#39; });
this.formattedValue = this.intl.formatNumber(this.value, { digits: &#39;1.2-2&#39;, style: &#39;currency&#39; });
this.formattedOnePlural = this.intl.plural(1, &#39;home&#39;, { type: &#39;cardinal&#39; });
}
});
}

}</code></pre></div><h3 id="customize-the-library">Customize the library</h3>
}</code></pre></div><p>The <code>L10nIntlService</code> also provides methods for other Intl APIs, such as <em>Collator</em> &amp; <em>ListFormat</em>.</p>
<h3 id="customize-the-library">Customize the library</h3>
<p>The following features can be customized. You just have to implement the indicated class-interface and pass the token during configuration.</p>
<p>E.g.</p>
<div><pre class="line-numbers"><code class="language-TypeScript">&#64;Injectable() export class HttpTranslationLoader implements L10nTranslationLoader {
Expand Down Expand Up @@ -346,9 +357,9 @@ <h3 id="validation">Validation</h3>
</li>
<li><p><code>L10nFormat</code>: shows the format of the <em>language</em> to be used for translations. The supported formats are: <code>&#39;language&#39; | &#39;language-script&#39; | &#39;language-region&#39; | &#39;language-script-region&#39;</code>. So, for example, you can have a <em>language</em> like <code>en-US-u-ca-gregory-nu-latn</code> to format dates and numbers, but only use the <code>en-US</code> for translations setting <code>&#39;language-region&#39;</code></p>
</li>
<li><p><code>L10nDateTimeFormatOptions</code>: the type of <em>options</em> used to format dates. Extends the Intl <code>DateTimeFormatOptions</code> interface, adding the <em>dateStyle</em> and <em>timeStyle</em> attributes</p>
<li><p><code>L10nDateTimeFormatOptions</code>: the type of <em>options</em> used to format dates. Extends the Intl <code>DateTimeFormatOptions</code> interface, adding the <em>dateStyle</em> and <em>timeStyle</em> attributes. See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat">DateTimeFormat</a> for more details on available options</p>
</li>
<li><p><code>L10nNumberFormatOptions</code>: the type of <em>options</em> used to format numbers. Extends the Intl <code>NumberFormatOptions</code> interface, adding the <em>digits</em> attribute</p>
<li><p><code>L10nNumberFormatOptions</code>: the type of <em>options</em> used to format numbers. Extends the Intl <code>NumberFormatOptions</code> interface, adding the <em>digits</em> attribute. See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat">NumberFormat</a> for more details on available options</p>
</li>
</ul>
<h2 id="intl-api">Intl API</h2>
Expand All @@ -357,20 +368,23 @@ <h2 id="intl-api">Intl API</h2>
<ul>
<li><a href="http://kangax.github.io/compat-table/esintl/">ECMAScript compatibility tables</a></li>
<li><a href="http://caniuse.com/#feat=internationalization">Can I use</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Browser_compatibility">Intl</a></li>
</ul>
<p>All modern browsers have implemented this API. You can use a polyfill like <a href="https://polyfill.io/v3/">Polyfill.io</a> to extend support to old browsers.</p>
<p>Just add one script tag in your <code>index.html</code>:</p>
<div><pre class="line-numbers"><code class="language-Html">&lt;script crossorigin=&quot;anonymous&quot;
src=&quot;https://polyfill.io/v3/polyfill.min.js?flags=gated&amp;features=Intl.~locale.en-US&quot;&gt;&lt;/script&gt;</code></pre></div><p>When specifying the <code>features</code>, you have to specify what languages to load.</p>
<p>Other polyfills:</p>
<p>You can use polyfills to extend support to old browsers, or to use newest features:</p>
<ul>
<li><a href="https://formatjs.io/docs/polyfills">Format.JS</a></li>
<li><p><a href="https://polyfill.io/v3/">Polyfill.io</a></p>
<p> Just add one script tag in your <code>index.html</code>, for example:</p>
<div><pre class="line-numbers"><code class="language-Html"> &lt;script crossorigin=&quot;anonymous&quot;
src=&quot;https://polyfill.io/v3/polyfill.min.js?flags=gated&amp;features=Intl.~locale.en-US&quot;&gt;&lt;/script&gt;</code></pre></div><p> When specifying the <code>features</code>, you have to specify what languages to load</p>
</li>
<li><p><a href="https://formatjs.io/docs/polyfills">Format.JS</a></p>
<p> Import polyfills you need as in the sample app</p>
</li>
</ul>
<p>The <code>L10nIntlService</code> also provides methods for other APIs, such as <em>Collator</em>, <em>PluralRules</em> and <em>ListFormat</em>.</p>
<h3 id="intl-api-in-nodejs">Intl API in Node.js</h3>
<p>To use <em>Intl</em> in <em>Node.js</em>, check the support according to the version in the official documentation: <a href="https://nodejs.org/api/intl.html">Internationalization Support</a></p>
<h2 id="server-side-rendering">Server Side Rendering</h2>
<p>You can find a complete sample app with <em>@nguniversal/express-engine</em> <a href="projects/angular-l10n-app-ssr">here</a>.</p>
<p>You can find a complete sample app with <em>@nguniversal/express-engine</em> <a href="projects/angular-l10n-app-ssr">here</a></p>
<p>SSR doesn&#39;t work out of the box, so it is important to know:</p>
<ul>
<li><code>src\app\universal-interceptor.ts</code>: used to handle absolute URLs for HTTP requests on the server</li>
Expand All @@ -382,6 +396,11 @@ <h2 id="server-side-rendering">Server Side Rendering</h2>
</ul>
<h2 id="previous-versions">Previous versions</h2>
<ul>
<li><p><strong>Angular v10 (Angular l10n v10.1.2)</strong></p>
<ul>
<li><a href="https://github.com/robisim74/angular-l10n/tree/angular_v10">Branch</a></li>
</ul>
</li>
<li><p><strong>Angular v9 (Angular l10n v9.3.0)</strong></p>
<ul>
<li><a href="https://github.com/robisim74/angular-l10n/tree/angular_v9">Branch</a></li>
Expand Down Expand Up @@ -420,13 +439,15 @@ <h2 id="previous-versions">Previous versions</h2>
</ul>
<h2 id="contributing">Contributing</h2>
<ul>
<li><p>Building the library:</p>
<li><p>First, install the packages &amp; build the library:</p>
<div><pre class="line-numbers"><code class="language-Shell"> npm install
npm run build</code></pre></div></li>
<li><p>Testing:</p>
<div><pre class="line-numbers"><code class="language-Shell"> npm test</code></pre></div></li>
<li><p>Serving the sample app:</p>
<div><pre class="line-numbers"><code class="language-Shell"> npm start</code></pre></div></li>
<li><p>Serving the sample ssr app:</p>
<div><pre class="line-numbers"><code class="language-Shell"> npm run dev:ssr</code></pre></div></li>
</ul>
<h2 id="license">License</h2>
<p>MIT</p>
Expand Down
19 changes: 5 additions & 14 deletions docs/injectables/L10nDefaultUserLanguage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ <h3 id="constructor">Constructor</h3>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="18" class="link-to-prism">projects/angular-l10n/src/lib/services/l10n-user-language.ts:18</a></div>
<div class="io-line">Defined in <a href="" data-line="19" class="link-to-prism">projects/angular-l10n/src/lib/services/l10n-user-language.ts:19</a></div>
</td>
</tr>

Expand Down Expand Up @@ -171,8 +171,8 @@ <h3 id="methods">

<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="22"
class="link-to-prism">projects/angular-l10n/src/lib/services/l10n-user-language.ts:22</a></div>
<div class="io-line">Defined in <a href="" data-line="23"
class="link-to-prism">projects/angular-l10n/src/lib/services/l10n-user-language.ts:23</a></div>
</td>
</tr>

Expand All @@ -197,6 +197,7 @@ <h3 id="methods">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Injectable, Inject } from &#x27;@angular/core&#x27;;

import { L10N_CONFIG, L10nConfig } from &#x27;../models/l10n-config&#x27;;
import { getBrowserLanguage } from &#x27;../models/utils&#x27;;

/**
* Implement this class-interface to get the user language.
Expand All @@ -216,17 +217,7 @@ <h3 id="methods">
constructor(@Inject(L10N_CONFIG) private config: L10nConfig) { }

public async get(): Promise&lt;string | null&gt; {
let browserLanguage &#x3D; null;
if (typeof navigator !&#x3D;&#x3D; &#x27;undefined&#x27; &amp;&amp; navigator.language) {
switch (this.config.format) {
case &#x27;language&#x27;:
browserLanguage &#x3D; navigator.language.split(&#x27;-&#x27;)[0];
break;
case &#x27;language-region&#x27;:
browserLanguage &#x3D; navigator.language;
break;
}
}
const browserLanguage &#x3D; getBrowserLanguage(this.config.format);
return Promise.resolve(browserLanguage);
}

Expand Down
Loading

0 comments on commit 0b79b33

Please sign in to comment.