Skip to content

Commit

Permalink
Docs: upgrade version
Browse files Browse the repository at this point in the history
  • Loading branch information
@robisim74
robisim74 committed May 12, 2017
1 parent c056251 commit fd69621
Show file tree
Hide file tree
Showing 3 changed files with 281 additions and 178 deletions.
77 changes: 74 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ _No bootstrap (when language changes)_ | no | yes | yes
_Getting the translation in component class_ | not yet | yes | yes
_Numbers_ | pure pipe via Intl | - | directive & pure pipe via Intl
_Dates_ | pure pipe via Intl | - | directive & pure pipe via Intl
_Validation_ | - | - | numbers validation
_Validation_ | - | - | number validation

## Installing
You can add `angular-l10n` to your project using `npm`:
Expand Down Expand Up @@ -50,9 +50,80 @@ and use global `ng.l10n` namespace.
This library is compatible with AoT compilation & Server-side prerendering. It also supports the `strict` TypeScript compiler option.

## Usage
**Angular v4**: [quick start](https://github.com/robisim74/angular-l10n/blob/master/doc/quick-start.md) and [library specification](https://github.com/robisim74/angular-l10n/blob/master/doc/spec.md).
**_Configuration_**
```TypeScript
@NgModule({
imports: [
...
HttpModule,
LocalizationModule.forRoot()
],
...
})
export class AppModule {

**Angular v2**: [branch](https://github.com/robisim74/angular-l10n/tree/angular_v2).
constructor(public locale: LocaleService, public translation: TranslationService) {
this.locale.addConfiguration()
.addLanguages(['en', 'it'])
.setCookieExpiration(30)
.defineDefaultLocale('en', 'US')
.defineCurrency('USD');
this.locale.init();

this.translation.addConfiguration()
.addProvider('./assets/locale-');
this.translation.init();
}

}
```
**_Pure pipes with Decorators_**
```TypeScript
@Component({
...
template: `
<p>{{ 'Greeting' | translate:lang }}</p>
<p>{{ today | localeDate:defaultLocale:'fullDate' }}</p>
<p>{{ pi | localeDecimal:defaultLocale:'1.5-5' }}</p>
<p>{{ value | localeCurrency:defaultLocale:currency:true:'1.2-2' }}</p>
`
})
export class HomeComponent implements OnInit {

@Language() lang: string;
@DefaultLocale() defaultLocale: string;
@Currency() currency: string;

...

ngOnInit(): void {
//
}

}
```
**_Directives_**
```TypeScript
@Component({
...
template: `
<p translate>Greeting</p>
<p localeDate="fullDate">{{ today }}</p>
<p localeDecimal="1.5-5">{{ pi }}</p>
<p localeCurrency="1.2-2" [symbol]="true">{{ value }}</p>
`
})
export class HomeComponent {
...
}
```
See the following documentation to learn more about all the features:

- **Angular v4**: [quick start](https://github.com/robisim74/angular-l10n/blob/master/doc/quick-start.md) and [library specification](https://github.com/robisim74/angular-l10n/blob/master/doc/spec.md)

- **Angular v2**: [branch](https://github.com/robisim74/angular-l10n/tree/angular_v2)

## Related projects
[Angular Localization with an ASP.NET CORE MVC Service](https://damienbod.com/2016/04/29/angular-2-localization-with-an-asp-net-core-mvc-service/) @damienbod
Expand Down
142 changes: 76 additions & 66 deletions doc/quick-start.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ System.config({
...
});
```
Import the modules and the components you need in `app.module.ts`:
Import the modules you need and configure the services in `app.module.ts`:
```TypeScript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
Expand All @@ -33,7 +33,7 @@ import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';

import { TranslationModule } from 'angular-l10n';
import { TranslationModule, LocaleService, TranslationService } from 'angular-l10n';

@NgModule({
imports: [
Expand All @@ -44,13 +44,27 @@ import { TranslationModule } from 'angular-l10n';
declarations: [AppComponent, HomeComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
export class AppModule {

constructor(public locale: LocaleService, public translation: TranslationService) {
this.locale.addConfiguration()
.addLanguages(['en', 'it'])
.setCookieExpiration(30)
.defineLanguage('en');
this.locale.init();

this.translation.addConfiguration()
.addProvider('./assets/locale-');
this.translation.init();
}

}
```
Add to `app.component.ts` the initialization of the services:
Add to `app.component.ts`:
```TypeScript
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';

import { Translation, LocaleService, TranslationService } from 'angular-l10n';
import { LocaleService, Language } from 'angular-l10n';

@Component({
selector: 'my-app',
Expand All @@ -65,50 +79,45 @@ import { Translation, LocaleService, TranslationService } from 'angular-l10n';
<home-component></home-component>
`
})
export class AppComponent extends Translation {
export class AppComponent implements OnInit {

constructor(public locale: LocaleService, public translation: TranslationService) {
super(translation);
@Language() lang: string;

this.locale.addConfiguration()
.addLanguages(['en', 'it'])
.setCookieExpiration(30)
.defineLanguage('en');
this.locale.init();
constructor(public locale: LocaleService) { }

this.translation.addConfiguration()
.addProvider('./assets/locale-');
this.translation.init();
ngOnInit(): void {
//
}

selectLanguage(language: string): void {
this.locale.setCurrentLanguage(language);
}

}

```
Add `home.component.ts`:
```TypeScript
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';

import { Translation, TranslationService } from 'angular-l10n';
import { Language } from 'angular-l10n';

@Component({
selector: 'home-component',
template: `
<p>{{ 'Greeting' | translate:lang }}</p>
`
})
export class HomeComponent extends Translation {
export class HomeComponent implements OnInit {

constructor(public translation: TranslationService) {
super(translation);
@Language() lang: string;

ngOnInit(): void {
//
}

}
```
and create the _json_ files of the translations such as `locale-en.json` and `locale-it.json` in `assets` folder:
and create the _json_ files of the translations such as `locale-en.json` and `locale-it.json` in `src/assets` folder:
```Json
{
"Title": "Angular localization",
Expand Down Expand Up @@ -137,7 +146,7 @@ import { Component } from '@angular/core';
export class HomeComponent { }
```
Note that if you use in the component only the _directives_ and not the _pipes_,
you don't need to import the services and extend `Translation` class.
you don't need to use `@Language()` _decorator_.

For more details, see [library specification](https://github.com/robisim74/angular-l10n/blob/master/doc/spec.md).

Expand All @@ -157,7 +166,7 @@ System.config({
...
});
```
Import the modules and the components you need in `app.module.ts`:
Import the modules you need and configure the services in `app.module.ts`:
```TypeScript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
Expand All @@ -166,7 +175,7 @@ import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';

import { LocalizationModule } from 'angular-l10n';
import { LocalizationModule, LocaleService, TranslationService } from 'angular-l10n';

@NgModule({
imports: [
Expand All @@ -177,13 +186,28 @@ import { LocalizationModule } from 'angular-l10n';
declarations: [AppComponent, HomeComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
export class AppModule {

constructor(public locale: LocaleService, public translation: TranslationService) {
this.locale.addConfiguration()
.addLanguages(['en', 'it'])
.setCookieExpiration(30)
.defineDefaultLocale('en', 'US')
.defineCurrency('USD');
this.locale.init();

this.translation.addConfiguration()
.addProvider('./assets/locale-');
this.translation.init();
}

}
```
Add to `app.component.ts` the initialization of the services:
Add to `app.component.ts`:
```TypeScript
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';

import { Localization, LocaleService, TranslationService } from 'angular-l10n';
import { LocaleService, Language } from 'angular-l10n';

@Component({
selector: 'my-app',
Expand All @@ -199,21 +223,14 @@ import { Localization, LocaleService, TranslationService } from 'angular-l10n';
<home-component></home-component>
`
})
export class AppComponent extends Localization {
export class AppComponent implements OnInit {

constructor(public locale: LocaleService, public translation: TranslationService) {
super(locale, translation);
@Language() lang: string;

this.locale.addConfiguration()
.addLanguages(['en', 'it'])
.setCookieExpiration(30)
.defineDefaultLocale('en', 'US')
.defineCurrency('USD');
this.locale.init();
constructor(public locale: LocaleService) { }

this.translation.addConfiguration()
.addProvider('./assets/locale-');
this.translation.init();
ngOnInit(): void {
//
}

selectLocale(language: string, country: string, currency: string): void {
Expand All @@ -223,7 +240,7 @@ export class AppComponent extends Localization {

}
```
and create the _json_ files of the translations such as `locale-en.json` and `locale-it.json` in `assets` folder:
and create the _json_ files of the translations such as `locale-en.json` and `locale-it.json` in `src/assets` folder:
```Json
{
"Title": "Angular localization",
Expand All @@ -240,9 +257,9 @@ and create the _json_ files of the translations such as `locale-en.json` and `lo
```
Add `home.component.ts`:
```TypeScript
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';

import { Localization, LocaleService, TranslationService } from 'angular-l10n';
import { Language, DefaultLocale, Currency } from 'angular-l10n';

@Component({
selector: 'home-component',
Expand All @@ -254,21 +271,23 @@ import { Localization, LocaleService, TranslationService } from 'angular-l10n';
<button (click)="change()">{{ 'Change' | translate:lang }}</button>
`
})
export class HomeComponent extends Localization {
export class HomeComponent implements OnInit {

@Language() lang: string;
@DefaultLocale() defaultLocale: string;
@Currency() currency: string;

today: number;
pi: number;
value: number;

constructor(public locale: LocaleService, public translation: TranslationService) {
super(locale, translation);

ngOnInit(): void {
this.today = Date.now();
this.pi = 3.14159;
this.value = Math.round(Math.random() * 1000000) / 100;
}

change() {
change(): void {
this.value = Math.round(Math.random() * 1000000) / 100;
}

Expand All @@ -279,17 +298,9 @@ Finally, to extend the support to all browsers, add the following script tag in
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en-US,Intl.~locale.en-GB,Intl.~locale.it-IT"></script>
```
#### Using directives
In addition to the _pipes_, you can use _directives_. Try to change in `app.component.ts`:
```Html
<h1>{{ 'TITLE' | translate:lang }}</h1>
```
into:
```Html
<h1 translate>Title</h1>
```
Then change `home.component.ts`:
In addition to the _pipes_, you can use _directives_. Try to change `home.component.ts`:
```TypeScript
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'home-component',
Expand All @@ -301,26 +312,26 @@ import { Component } from '@angular/core';
<button (click)="change()" translate>Change</button>
`
})
export class HomeComponent {
export class HomeComponent implements OnInit {

today: number;
pi: number;
value: number;

constructor() {
ngOnInit(): void {
this.today = Date.now();
this.pi = 3.14159;
this.value = Math.round(Math.random() * 1000000) / 100;
}

change() {
change(): void {
this.value = Math.round(Math.random() * 1000000) / 100;
}

}
```
Note that if you use in the component only the _directives_ and not the _pipes_,
you don't need to import the services and extend `Localization` class.
you don't need to use _decorators_.

For more details, see [library specification](https://github.com/robisim74/angular-l10n/blob/master/doc/spec.md).

Expand Down Expand Up @@ -418,4 +429,3 @@ Always configure your provider in this way:
this.translation.addConfiguration()
.addProvider('./assets/locale-');
```

Loading

0 comments on commit fd69621

Please sign in to comment.