Merge branch 'issue48' of https://github.com/ribizli/ng2-translate into ribizli-issue48

Author: ocombe

README.md

@@ -21,25 +21,30 @@ System.config({
 ```
 
 Finally, you can use ng2-translate in your Angular 2 project (make sure that you've loaded the angular2/http bundle as well).
-It is recommended to instantiate `TranslateService` in the bootstrap of your application and to never add it to the "providers" property of your components, this way you will keep it as a singleton.
-If you add it to the "providers" property of a component it will instantiate a new instance of the service that won't be initialized.
+It is recommended to use `NG_TRANSLATE_PROVIDERS` in the bootstrap of your application and to never add `TranslateService` to the "providers" property of your components, this way you will keep it as a singleton.
+`NG_TRANSLATE_PROVIDERS` provides a default configuration for the static translation file loader.
+If you add `TranslateService` to the "providers" property of a component it will instantiate a new instance of the service that won't be initialized with the language to use or the default language.
 
 ```js
 import {HTTP_PROVIDERS} from 'angular2/http';
 import {Component, Injectable, provide} from 'angular2/core';
-import {TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';
+import {NG_TRANSLATE_PROVIDERS, TranslateService, TranslatePipe,
+    TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';
 import {bootstrap} from 'angular2/platform/browser';
 
 bootstrap(AppComponent, [
     HTTP_PROVIDERS,
     // not required if you use TranslateStaticLoader (default)
     // use this if you want to use another loader
-    provide(TranslateLoader, {useClass: TranslateStaticLoader}),
-    // not required, but recommended to have 1 unique instance of your service
-    TranslateService
+    // or to configure TranslateStaticLoader
+    provide(TranslateLoader, {
+        useFactory: (http: Http) => new TranslateStaticLoader(http),
+        deps: [Http]
+    }),
+    // recommended to have 1 unique instance of your service
+    NG_TRANSLATE_PROVIDERS
 ]);
 
-@Injectable()
 @Component({
     selector: 'app',
     template: `
@@ -63,11 +68,12 @@ export class AppComponent {
 }
 ```
 
-For now, only the static loader is available. You can configure it like this:
+For now, only the static loader is available. You can configure it like this during bootstrap:
 ```js
-var prefix = 'assets/i18n';
-var suffix = '.json';
-translate.useStaticFilesLoader(prefix, suffix);
+provide(TranslateLoader, {
+    useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
+    deps: [Http]
+})
 ```
 
 Then put your translations in a json file that looks like this (for `en.json`):
@@ -79,7 +85,7 @@ Then put your translations in a json file that looks like this (for `en.json`):
 
 An then you can get new translations like this:
 ```js
-    translate.getTranslation(userLang);
+translate.getTranslation(userLang);
 ```
 
 But you can also define your translations manually instead of using `getTranslation`:
@@ -104,14 +110,10 @@ translate.setTranslation('en', {
     ```
 
 #### Methods:
-- `useStaticFilesLoader()`: Use a static files loader
-- `useLoader(loader: TranslateLoader)`: Use a different loader
 - `setDefaultLang(lang: string)`: Sets the default language to use as a fallback
 - `use(lang: string): Observable<any>`: Changes the lang currently used
 - `getTranslation(lang: string): Observable<any>`: Gets an object of translations for a given language with the current loader
 - `setTranslation(lang: string, translations: Object)`: Manually sets an object of translations for a given language
-- `setMissingTranslationHandler(handler: MissingTranslationHandler): void`: sets the Missing Translation Handler which will be
-used when the requested translation is not available
 - `getLangs()`: Returns an array of currently available langs
 - `get(key: string|Array<string>, interpolateParams?: Object): Observable<string|Object>`: Gets the translated value of a key (or an array of keys)
 - `instant(key: string|Array<string>, interpolateParams?: Object): string|Object`: Gets the instant translated value of a key (or an array of keys)
@@ -139,17 +141,8 @@ bootstrap(AppComponent, [
 ]);
 ```
 
-Or you can just use the `useLoader` method:
-```js
-export class AppComponent {
-    constructor(translate: TranslateService, myLoader: CustomLoader) {
-        translate.useLoader(myLoader);
-    }
-}
-```
-
 #### How to handle missing translations
-You can use the method `setMissingTranslationHandler` to define a handler that will be called when the requested translation is not available.
+You can setup a provider for `MissingTranslationHandler` to define a handler that will be called when the requested translation is not available.
 The only required method is `handle` where you can do whatever you want. Just don't forget that it will be called synchronously from the `get` & `instant` methods.
 
 ##### Example:
@@ -164,13 +157,9 @@ export class MyMissingTranslationHandler implements MissingTranslationHandler {
 }
 ```
 
-Set the Missing Translation Handler
+Setup the Missing Translation Handler in bootstrap
 ```js
-constructor(translate: TranslateService) {
-  ...
-  translate.setMissingTranslationHandler(new MyMissingTranslationHandler());
-  ...
-}  
+provide(MissingTranslationHandler, { useClass: MyMissingTranslationHandler })
 ```
 
 ### TranslatePipe

karma.conf.js

@@ -27,6 +27,7 @@ module.exports = function(config) {
             { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false, served: true },
             { pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: false, watched: false, served: true }, // PhantomJS2 (and possibly others) might require it
 
+            { pattern: 'ng2-translate.ts', included: false, watched: true }, // source files
             { pattern: 'src/**/*.ts', included: false, watched: true }, // source files
             { pattern: 'tests/**/*.ts', included: false, watched: true }, // test files
             'karma-test-shim.js'

ng2-translate.ts

@@ -1,11 +1,16 @@
+import {provide} from 'angular2/core';
+import {Http} from 'angular2/http';
 import {TranslatePipe} from './src/translate.pipe';
-import {TranslateService} from './src/translate.service';
+import {TranslateService, TranslateLoader, TranslateStaticLoader} from './src/translate.service';
 
 export * from './src/translate.pipe';
 export * from './src/translate.service';
 export * from './src/translate.parser';
 
-export default {
-  pipes: [TranslatePipe],
-  providers: [TranslateService]
-}
+export const NG_TRANSLATE_PROVIDERS: any = [
+    provide(TranslateLoader, {
+        useFactory: (http: Http) => new TranslateStaticLoader(http),
+        deps: [Http]
+    }),
+    TranslateService
+];

src/translate.service.ts

@@ -11,29 +11,13 @@ export abstract class MissingTranslationHandler {
     abstract handle(key: string): void;
 }
 
-@Injectable()
 export abstract class TranslateLoader {
     abstract getTranslation(lang: string): Observable<any>;
 }
 
-@Injectable()
 export class TranslateStaticLoader implements TranslateLoader {
-    private http: Http;
-    private sfLoaderParams = {prefix: 'i18n', suffix: '.json'};
 
-    constructor(http: Http, @Optional() prefix: string, @Optional() suffix: string) {
-        this.http = http;
-        this.configure(prefix, suffix);
-    }
-
-    /**
-     * Defines the prefix & suffix used for getTranslation
-     * @param prefix
-     * @param suffix
-     */
-    public configure(prefix: string, suffix: string) {
-        this.sfLoaderParams.prefix = prefix ? prefix : this.sfLoaderParams.prefix;
-        this.sfLoaderParams.suffix = suffix ? suffix : this.sfLoaderParams.suffix;
+    constructor(private http: Http, private prefix: string = 'i18n', private suffix: string = '.json') {
     }
 
     /**
@@ -42,7 +26,7 @@ export class TranslateStaticLoader implements TranslateLoader {
      * @returns {any}
      */
     public getTranslation(lang: string): Observable<any> {
-        return this.http.get(`${this.sfLoaderParams.prefix}/${lang}${this.sfLoaderParams.suffix}`)
+        return this.http.get(`${this.prefix}/${lang}${this.suffix}`)
             .map((res: Response) => res.json());
     }
 }
@@ -54,11 +38,6 @@ export class TranslateService {
      */
     public currentLang: string = this.defaultLang;
 
-    /**
-     * An instance of the loader currently used
-     */
-    public currentLoader: TranslateLoader;
-
     /**
      * An EventEmitter to listen to lang changes events
      * onLangChange.subscribe((params: {lang: string, translations: any}) => {
@@ -74,33 +53,9 @@ export class TranslateService {
     private langs: Array<string>;
     private parser: Parser = new Parser();
 
-    /**
-     * Handler for missing translations
-     */
-    private missingTranslationHandler: MissingTranslationHandler;
-
-    constructor(private http: Http, @Optional() loader: TranslateLoader) {
-        if(loader !== null) {
-            this.currentLoader = loader;
-        } else {
-            this.useStaticFilesLoader();
-        }
-    }
-
-    /**
-     * Use a translations loader
-     * @param loader
-     */
-    public useLoader(loader: TranslateLoader) {
-        this.currentLoader = loader;
-    }
-
-    /**
-     * Use a static files loader
-     */
-    public useStaticFilesLoader(prefix?: string, suffix?: string) {
-        this.currentLoader = new TranslateStaticLoader(this.http, prefix, suffix);
-    }
+    constructor(private http: Http,
+        public currentLoader: TranslateLoader,
+        @Optional() private missingTranslationHandler: MissingTranslationHandler) {}
 
     /**
      * Sets the default language to use as a fallback
@@ -265,8 +220,4 @@ export class TranslateService {
         this.onLangChange.emit({lang: lang, translations: this.translations[lang]});
     }
 
-    public setMissingTranslationHandler(handler: MissingTranslationHandler) {
-        this.missingTranslationHandler = handler;
-    }
-
 }

tests/translate.pipe.spec.ts

@@ -1,6 +1,6 @@
 import {TranslatePipe} from '../src/translate.pipe';
 import {MockConnection, MockBackend} from "angular2/src/http/backends/mock_backend";
-import {TranslateService} from "../src/translate.service";
+import {NG_TRANSLATE_PROVIDERS, TranslateService} from "./../ng2-translate";
 import {XHRBackend, HTTP_PROVIDERS} from "angular2/http";
 import {provide, Injector} from "angular2/core";
 
@@ -17,7 +17,7 @@ export function main() {
                 HTTP_PROVIDERS,
                 // Provide a mocked (fake) backend for Http
                 provide(XHRBackend, {useClass: MockBackend}),
-                TranslateService,
+                NG_TRANSLATE_PROVIDERS,
                 TranslatePipe
             ]);
             backend = injector.get(XHRBackend);