docs(aio): updated i18n guide and example (#19975)

angular · Nov 2, 2017 · 6f05dab · 6f05dab
1 parent 18197bd
commit 6f05dab
Show file tree

Hide file tree

Showing 30 changed files with 797 additions and 783 deletions.
diff --git a/...xamples/i18n/src/app/app.component.1.html → ...xamples/i18n/doc-files/app.component.html b/...xamples/i18n/src/app/app.component.1.html → ...xamples/i18n/doc-files/app.component.html
@@ -29,4 +29,3 @@ <h1 i18n="@@introductionHeader">Hello i18n!</h1>
 <!--#docregion i18n-title-->
 <img [src]="logo" title="Angular logo">
 <!--#enddocregion i18n-title-->
-Contact GitHub API Training Shop Blog About
diff --git a/.../examples/i18n/src/app/app.locale_data.ts → ...xamples/i18n/doc-files/app.locale_data.ts b/.../examples/i18n/src/app/app.locale_data.ts → ...xamples/i18n/doc-files/app.locale_data.ts
diff --git a/aio/content/examples/i18n/doc-files/app.locale_data_extra.ts b/aio/content/examples/i18n/doc-files/app.locale_data_extra.ts
@@ -0,0 +1,7 @@
+// #docregion import-locale-extra
+import { registerLocaleData } from '@angular/common';
+import localeFrCa from '@angular/common/locales/fr-CA';
+import localeFrCaExtra from '@angular/common/locales/extra/fr-CA';
+
+registerLocaleData(localeFrCa, localeFrCaExtra);
+// #enddocregion import-locale-extra
diff --git a/aio/content/examples/i18n/doc-files/app.module.ts b/aio/content/examples/i18n/doc-files/app.module.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { LOCALE_ID, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from '../src/app/app.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ AppComponent ],
+  providers: [ { provide: LOCALE_ID, useValue: 'fr' } ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/i18n/src/main.1.ts → ...content/examples/i18n/doc-files/main.1.ts b/aio/content/examples/i18n/src/main.1.ts → ...content/examples/i18n/doc-files/main.1.ts
@@ -1,6 +1,12 @@
 // #docregion
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
 
 platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/i18n/doc-files/main.2.ts b/aio/content/examples/i18n/doc-files/main.2.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { enableProdMode, TRANSLATIONS, TRANSLATIONS_FORMAT } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+// use the require method provided by webpack
+declare const require;
+// we use the webpack raw-loader to return the content as a string
+const translations = require(`raw-loader!./locale/messages.fr.xlf`);
+
+platformBrowserDynamic().bootstrapModule(AppModule, {
+  providers: [
+    {provide: TRANSLATIONS, useValue: translations},
+    {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'}
+  ]
+});
diff --git a/aio/content/examples/i18n/doc-files/main.3.ts b/aio/content/examples/i18n/doc-files/main.3.ts
@@ -0,0 +1,13 @@
+// #docregion
+import { MissingTranslationStrategy } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+// ...
+
+platformBrowserDynamic().bootstrapModule(AppModule, {
+  missingTranslation: MissingTranslationStrategy.Error,
+  providers: [
+    // ...
+  ]
+});
diff --git a/aio/content/examples/i18n/doc-files/messages.fr.xlf.html b/aio/content/examples/i18n/doc-files/messages.fr.xlf.html
@@ -0,0 +1,73 @@
+<!-- The `messages.fr.xlf` after translation for documentation purposes -->
+<!-- #docregion -->
+<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="en" datatype="plaintext" original="ng2.template">
+    <body>
+      <!-- #docregion translated-hello-before -->
+      <trans-unit id="introductionHeader" datatype="html">
+        <source>Hello i18n!</source>
+        <note priority="1" from="description">An introduction header for this sample</note>
+        <note priority="1" from="meaning">User welcome</note>
+      </trans-unit>
+      <!-- #enddocregion translated-hello-before -->
+      <!-- #docregion translated-hello -->
+      <!-- #docregion custom-id -->
+      <trans-unit id="introductionHeader" datatype="html">
+      <!-- #enddocregion custom-id -->
+        <source>Hello i18n!</source>
+        <target>Bonjour i18n !</target>
+        <note priority="1" from="description">An introduction header for this sample</note>
+        <note priority="1" from="meaning">User welcome</note>
+      </trans-unit>
+      <!-- #enddocregion translated-hello -->
+      <!-- #docregion translated-other-nodes -->
+      <!-- #docregion generated-id -->
+      <trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">
+      <!-- #enddocregion generated-id -->
+        <source>I don&apos;t output any element</source>
+        <target>Je n'affiche aucun élément</target>
+      </trans-unit>
+      <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
+        <source>Angular logo</source>
+        <target>Logo d'Angular</target>
+      </trans-unit>
+      <!-- #enddocregion translated-other-nodes -->
+      <!-- #docregion translated-plural -->
+      <trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">
+        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>
+        <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes} }</target>
+      </trans-unit>
+      <!-- #enddocregion translated-plural -->
+      <!-- #docregion translated-select -->
+      <!-- #docregion translate-select-1 -->
+      <trans-unit id="52515023fc70c216ef291086c1962ff135a9fe13" datatype="html">
+        <source>The author is <x id="ICU" equiv-text="{gender, select, m {...} f {...} o {...}}"/></source>
+        <target>L'auteur est <x id="ICU" equiv-text="{gender, select, m {...} f {...} o {...}}"/></target>
+      </trans-unit>
+      <!-- #enddocregion translate-select-1 -->
+      <!-- #docregion translate-select-2 -->
+      <trans-unit id="4e6fd3f2bb3477e8ad2088f03257f6e1b8b515a5" datatype="html">
+        <source>{VAR_SELECT, select, m {male} f {female} o {other} }</source>
+        <target>{VAR_SELECT, select, m {un homme} f {une femme} o {autre} }</target>
+      </trans-unit>
+      <!-- #enddocregion translate-select-2 -->
+      <!-- #enddocregion translated-select -->
+      <!-- #docregion translate-nested -->
+      <!-- #docregion translate-nested-1 -->
+      <trans-unit id="f7a55c9ef7c5b37147825a9041263305063e63e9" datatype="html">
+        <source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>
+        <target>Mis à jour: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>
+      </trans-unit>
+      <!-- #enddocregion translate-nested-1 -->
+      <!-- #docregion translate-nested-2 -->
+      <trans-unit id="80b5ac44661751e191225c0b1e000bceeeccb52c" datatype="html">
+        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, m {male} f {female} o {other} }} }</source>
+        <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes par {VAR_SELECT, select, m {un homme} f {une femme} o {autre} }} }</target>
+      </trans-unit>
+      <!-- #enddocregion translate-nested-2 -->
+      <!-- #enddocregion translate-nested -->
+    </body>
+  </file>
+</xliff>
+
diff --git a/aio/content/examples/i18n/e2e-spec.ts b/aio/content/examples/i18n/e2e-spec.ts
diff --git a/aio/content/examples/i18n/e2e/app.e2e-spec.ts b/aio/content/examples/i18n/e2e/app.e2e-spec.ts
@@ -0,0 +1,45 @@
+import { browser, element, by } from 'protractor';
+
+describe('i18n E2E Tests', () => {
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  it('should display i18n translated welcome: Bonjour !', function () {
+    expect(element(by.css('h1')).getText()).toEqual('Bonjour i18n !');
+  });
+
+  it('should display the node texts without elements', function () {
+    expect(element(by.css('app-root')).getText()).toContain(`Je n'affiche aucun élément`);
+  });
+
+  it('should display the translated title attribute', function () {
+    const title = element(by.css('img')).getAttribute('title');
+    expect(title).toBe(`Logo d'Angular`);
+  });
+
+  it('should display the ICU plural expression', function () {
+    expect(element.all(by.css('span')).get(0).getText()).toBe(`Mis à jour à l'instant`);
+  });
+
+  it('should display the ICU select expression', function () {
+    const selectIcuExp = element.all(by.css('span')).get(1);
+    expect(selectIcuExp.getText()).toBe(`L'auteur est une femme`);
+    element.all(by.css('button')).get(2).click();
+    expect(selectIcuExp.getText()).toBe(`L'auteur est un homme`);
+  });
+
+  it('should display the nested expression', function() {
+    const nestedExp = element.all(by.css('span')).get(2);
+    const incBtn = element.all(by.css('button')).get(0);
+    expect(nestedExp.getText()).toBe(`Mis à jour: à l'instant`);
+    incBtn.click();
+    expect(nestedExp.getText()).toBe(`Mis à jour: il y a une minute`);
+    incBtn.click();
+    incBtn.click();
+    element.all(by.css('button')).get(4).click();
+    expect(nestedExp.getText()).toBe(`Mis à jour: il y a 3 minutes par autre`);
+  });
+
+});
diff --git a/aio/content/examples/i18n/example-config.json b/aio/content/examples/i18n/example-config.json
@@ -0,0 +1,3 @@
+{
+  "projectType": "i18n"
+}
diff --git a/aio/content/examples/i18n/messages.xlf b/aio/content/examples/i18n/messages.xlf
diff --git a/aio/content/examples/i18n/plnkr.json b/aio/content/examples/i18n/plnkr.json
diff --git a/aio/content/examples/i18n/src/app/app.component.html b/aio/content/examples/i18n/src/app/app.component.html
@@ -17,19 +17,19 @@ <h1 i18n="User welcome|An introduction header for this sample@@introductionHeade
 <br>
 <button (click)="inc(1)">+</button> <button (click)="inc(-1)">-</button>
 <!--#docregion i18n-plural-->
-<span i18n>{wolves, plural, =0 {no wolves} =1 {one wolf} =2 {two wolves} other {a wolf pack}}</span>
+<span i18n>Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}</span>
 <!--#enddocregion i18n-plural-->
-({{wolves}})
+({{minutes}})
 <br><br>
-<button (click)="male()">&#9794;</button> <button (click)="female()">&#9792;</button>
+<button (click)="male()">&#9794;</button> <button (click)="female()">&#9792;</button> <button (click)="other()">&#9895;</button>
 <!--#docregion i18n-select-->
-<span i18n>The hero is {gender, select, m {male} f {female}}</span>
+<span i18n>The author is {gender, select, m {male} f {female} o {other}}</span>
 <!--#enddocregion i18n-select-->
 <br><br>
 <!--#docregion i18n-nested-->
-<span i18n>Here we have: {count, plural,
-  =0 {no one}
-  =1 {one {gender, select, male {man} female {woman}}}
-  other {{{heroes.length}} {gender, select, male {men} female {women}}}
-}</span>
+<span i18n>Updated: {minutes, plural,
+  =0 {just now}
+  =1 {one minute ago}
+  other {{{minutes}} minutes ago by {gender, select, m {male} f {female} o {other}}}}
+</span>
 <!--#enddocregion i18n-nested-->
diff --git a/aio/content/examples/i18n/src/app/app.component.ts b/aio/content/examples/i18n/src/app/app.component.ts
@@ -2,20 +2,20 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent {
-  wolves = 0;
+  minutes = 0;
   gender = 'f';
   fly = true;
   logo = 'https://angular.io/assets/images/logos/angular/angular.png';
-  count = 3;
   heroes: string[] = ['Magneta', 'Celeritas', 'Dynama'];
   inc(i: number) {
-    this.wolves = Math.min(5, Math.max(0, this.wolves + i));
+    this.minutes = Math.min(5, Math.max(0, this.minutes + i));
   }
-  male()   { this.gender = 'm'; }
+  male() { this.gender = 'm'; }
   female() { this.gender = 'f'; }
+  other() { this.gender = 'o'; }
 }
 
diff --git a/aio/content/examples/i18n/src/app/app.locale_data_extra.ts b/aio/content/examples/i18n/src/app/app.locale_data_extra.ts
diff --git a/aio/content/examples/i18n/src/app/app.module.ts b/aio/content/examples/i18n/src/app/app.module.ts
@@ -1,13 +1,12 @@
 // #docregion
-import { NgModule }      from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { AppComponent }  from './app.component';
+import { AppComponent } from './app.component';
 
 @NgModule({
-  imports:      [ BrowserModule ],
+  imports: [ BrowserModule ],
   declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
+  bootstrap: [ AppComponent ]
 })
-
 export class AppModule { }