Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from Nov 2, 2017
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 0 additions & 1 deletion ...xamples/i18n/src/app/app.component.1.html → ...xamples/i18n/doc-files/app.component.html
View file
Open in desktop
Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😂

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, no idea why we had this

0 .../examples/i18n/src/app/app.locale_data.ts → ...xamples/i18n/doc-files/app.locale_data.ts
View file
Open in desktop
File renamed without changes.
7 changes: 7 additions & 0 deletions aio/content/examples/i18n/doc-files/app.locale_data_extra.ts
View file
Open in desktop
@@ -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
13 changes: 13 additions & 0 deletions aio/content/examples/i18n/doc-files/app.module.ts
View file
Open in desktop
@@ -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 { }
6 changes: 6 additions & 0 deletions aio/content/examples/i18n/src/main.1.ts → ...content/examples/i18n/doc-files/main.1.ts
View file
Open in desktop
@@ -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);
22 changes: 22 additions & 0 deletions aio/content/examples/i18n/doc-files/main.2.ts
View file
Open in desktop
@@ -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'}
]
});
13 changes: 13 additions & 0 deletions aio/content/examples/i18n/doc-files/main.3.ts
View file
Open in desktop
@@ -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: [
// ...
]
});
73 changes: 73 additions & 0 deletions aio/content/examples/i18n/doc-files/messages.fr.xlf.html
View file
Open in desktop
@@ -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>

36 changes: 0 additions & 36 deletions aio/content/examples/i18n/e2e-spec.ts
View file
Open in desktop

This file was deleted.

45 changes: 45 additions & 0 deletions aio/content/examples/i18n/e2e/app.e2e-spec.ts
View file
Open in desktop
@@ -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`);
});

});
3 changes: 3 additions & 0 deletions aio/content/examples/i18n/example-config.json
View file
Open in desktop
@@ -0,0 +1,3 @@
{
"projectType": "i18n"
}
43 changes: 0 additions & 43 deletions aio/content/examples/i18n/messages.xlf
View file
Open in desktop

This file was deleted.

19 changes: 0 additions & 19 deletions aio/content/examples/i18n/plnkr.json
View file
Open in desktop

This file was deleted.

18 changes: 9 additions & 9 deletions aio/content/examples/i18n/src/app/app.component.html
View file
Open in desktop
Expand Up @@ -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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think @naomiblack once said that using gender in examples is tricky and maybe not a good idea.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was the example used previously, I just added other, but you're right, maybe I can find another example

<!--#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-->
10 changes: 5 additions & 5 deletions aio/content/examples/i18n/src/app/app.component.ts
View file
Open in desktop
Expand Up @@ -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'; }
}

7 changes: 0 additions & 7 deletions aio/content/examples/i18n/src/app/app.locale_data_extra.ts
View file
Open in desktop

This file was deleted.

9 changes: 4 additions & 5 deletions aio/content/examples/i18n/src/app/app.module.ts
View file
Open in desktop
@@ -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 { }