Skip to content

Commit

Permalink
Created npm package
Browse files Browse the repository at this point in the history
  • Loading branch information
robisim74 committed Mar 31, 2016
1 parent 9b16d66 commit c72c7a1
Show file tree
Hide file tree
Showing 34 changed files with 210 additions and 1,768 deletions.
7 changes: 6 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
$ cat .gitignore
/node_modules
/dist
/bundles

# Ignored files
*.js
*.map
*.d.ts
1 change: 1 addition & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/node_modules
Binary file removed AdvancedUse.jpg
Binary file not shown.
95 changes: 52 additions & 43 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,44 +1,68 @@
# Angular 2 Localization
> A translation service for the new Angular 2 applications using TypeScript.
> Simple & fast.
> An Angular 2 library for i18n and l10n that implements a translation service - using TypeScript and SystemJS.
## Sample application
## Sample app
Sample application that implements the translation service: [demo](http://robisim74.github.io/angular2localization)

## Installation
You can add `angular2localization` to your project via [Node and npm](https://nodejs.org):
```
npm install --save angular2localization
```
To load the package you have two methods:
- Loading the bundle:
```Html
<!--loads angular2localization-->
<script src="node_modules/angular2localization/bundles/angular2localization.js"></script>
```
- Using SystemJS:
```Html
<!--configures SystemJS-->
<script>
System.config({
defaultJSExtensions: true,
map: {
'angular2localization': 'node_modules/angular2localization'
}
});
</script>
```

## Getting the translation
To get the translation, add in the template:
```
```Html
{{ 'TITLE' | translate }}
```

### Translating with i18n
With `I18n Select` that displays the string that matches the current value:
and in each component:
```TypeScript
@Component({
...
pipes: [TranslatePipe]
})
```
With `I18n Select` that displays the string that matches the current value:
```Html
{{ gender | i18nSelect: inviteMapping | translate }}
```
With `I18n Plural` that pluralizes the value properly:
```
```Html
{{ messages.length | i18nPlural: messageMapping | translate }}
```

## How to use the translation service
Include in your application:
* the `locale` and `localization` services;
* the `localization` pipe;

and register `LocaleService`, `LocalizationService` and `LocalizationPipe` in the route component:
## Basic usage
Add in the route component in order to access the data of location from anywhere in the application:
```TypeScript
// Services.
import {LocaleService} from './services/locale.service'; // LocaleService class.
import {LocalizationService} from './services/localization.service'; // LocalizationService class.
import {LocaleService} from 'angular2localization/angular2localization'; // LocaleService class.
import {LocalizationService} from 'angular2localization/angular2localization'; // LocalizationService class.
// Pipes.
import {LocalizationPipe} from './pipes/localization.pipe'; // LocalizationPipe class.
import {TranslatePipe} from 'angular2localization/angular2localization'; // TranslatePipe class.

@Component({
selector: 'app-component',
...
providers: [LocaleService, LocalizationService, LocalizationPipe], // Localization providers: inherited by all descendants.
pipes: [LocalizationPipe] // Add in each component to invoke the transform method.
providers: [LocaleService, LocalizationService, TranslatePipe], // Localization providers: inherited by all descendants.
pipes: [TranslatePipe] // Add in each component to invoke the transform method.
})

export class AppComponent {
Expand All @@ -64,7 +88,7 @@ bootstrap(AppComponent, [HTTP_PROVIDERS]);
To initialize the `LocalizationService` for the direct loading, add the following code in the body of the constructor of the route component:
```TypeScript
var translationEN = {
TITLE: 'ANGULAR 2 LOCALIZATION',
TITLE: 'angular 2 localization',
CHANGE_LANGUAGE: 'change language',
...
}
Expand All @@ -80,7 +104,7 @@ To initialize the `LocalizationService` for the asynchronous loading add the fol
```TypeScript
this.localization.translationProvider('./resources/locale-'); // Required: initializes the translation provider with the given path prefix.
```
and create the json files of the translations such as `locale-en.json`:
and create the `json` files of the translations such as `locale-en.json`:
```
{
"TITLE": "angular 2 localization",
Expand All @@ -99,24 +123,23 @@ Because strings must be written within quotes, use the `\` escape character to i
"\"What's happened to me?\" he thought."
```

## Changing language
### Changing language
To change language at runtime, add in the route component:
```TypeScript
selectLanguage(language) {
selectLanguage(language: string) {

this.locale.setCurrentLanguage(language);

}
```
where `language` is the two-letter code of the language; then add in the view:
```
```Html
<a (click)="selectLanguage('en')">English</a>
...
```

## Advanced use with AsyncRoute
If you use an `AsyncRoute` in an extended application, you can create an instance of the `LocalizationService` for every asynchronously loaded component, as shown:
![AdvancedUse](https://github.com/robisim74/angular2localization/blob/master/AdvancedUse.jpg)
If you use an `AsyncRoute` in an extended application, you can create an instance of the `LocalizationService` for every asynchronously loaded component.
Each instance is different, and can be directly or asynchronously loaded, as in this example:
```TypeScript
export class I18nComponent {
Expand All @@ -130,21 +153,7 @@ export class I18nComponent {

}
```
In this way, application performance and memory usage are optimized.
In this way, application performance and memory usage are optimized. See the [demo](http://robisim74.github.io/angular2localization) for a sample code.

## Running the sample app
What you need to run the sample app:
- this repository
- [Node and npm](https://nodejs.org) already installed.

In the command line, go to the directory that contains `index.html`:
```
npm install
gulp
```
You need a static server as [lite-server](https://github.com/johnpapa/lite-server):
```
npm install -g lite-server
lite-server
```
and then in a browser visit `localhost:3000/index.html`.
##License
MIT
4 changes: 4 additions & 0 deletions angular2localization.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
// Exports services & pipes.
export * from './src/services/localization.service';
export * from './src/services/locale.service';
export * from './src/pipes/translate.pipe';
45 changes: 0 additions & 45 deletions app/app.component.html

This file was deleted.

84 changes: 0 additions & 84 deletions app/app.component.js

This file was deleted.

54 changes: 0 additions & 54 deletions app/app.component.ts

This file was deleted.

Loading

0 comments on commit c72c7a1

Please sign in to comment.