import {Component} from 'angular2/core';
import {TranslatePipe} from './translate.pipe';
@Component({
selector: 'my-app',
template: `
<span>{{'home.nav.calendar' | translate}}</span>
`,
pipes: [ TranslatePipe ]
})
export class AppComponent {
}
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component';
import {TranslationService} from './translation.service';
bootstrap(AppComponent, [ HTTP_PROVIDERS,TranslationService ]);
/* Master Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body, input[text], button {
color: #888;
font-family: Cambria, Georgia;
}
a {
cursor: pointer;
cursor: hand;
}
button {
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}
button:disabled {
background-color: #eee;
color: #aaa;
cursor: auto;
}
/* Navigation link styles */
nav a {
padding: 5px 10px;
text-decoration: none;
margin-top: 10px;
display: inline-block;
background-color: #eee;
border-radius: 4px;
}
nav a:visited, a:link {
color: #607D8B;
}
nav a:hover {
color: #039be5;
background-color: #CFD8DC;
}
nav a.router-link-active {
color: #039be5;
}
/* items class */
.items {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 24em;
}
.items li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.items li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.items li.selected:hover {
background-color: #BBD8DC;
color: white;
}
.items .text {
position: relative;
top: -3px;
}
.items {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 24em;
}
.items li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.items li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.items li.selected {
background-color: #CFD8DC;
color: white;
}
.items li.selected:hover {
background-color: #BBD8DC;
}
.items .text {
position: relative;
top: -3px;
}
.items .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://npmcdn.com/typescript@1.8.2/lib/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.8/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.8/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.8/http.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import {Observable,Observer} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
@Injectable()
export class TranslationService {
private _messages = {};
private translationLoaded : Observable<boolean>;
private translationLoadedObserver : Observer<boolean>;
constructor(private _http: Http) {
this.translationLoaded = Observable.create((observer) => {
this.translationLoadedObserver = observer;
});
var observable = this._http.get("app/i18n/localizable.it.strings").map((res: Response) => res.json());
observable.subscribe(res => {
this._messages = res;
this.translationLoadedObserver.next(true);
});
}
getTranslationByKey(key: string, args?: any[]) {
return this._messages[key];
}
}
{
"home.nav.calendar": "Calendar"
}
import {Pipe,PipeTransform,ChangeDetectorRef} from 'angular2/core';
import {TranslationService} from './translation.service';
@Pipe({
name: 'translate',
pure: false
})
export class TranslatePipe implements PipeTransform {
constructor(private _ref :ChangeDetectorRef, private _translation: TranslationService) {
this.loaded = false;
}
transform(value: string, args: string[]) : any {
this.translationLoadedSub = this._translation.translationLoaded.subscribe((data) => {
this.value = this._translation.getTranslationByKey(value);
this._ref.markForCheck();
this.loaded = true;
});
if (this.value == null && this.loaded) {
this.value = this._translation.getTranslationByKey(value);
}
return this.value;
}
_dispose(): void {
if(isPresent(this.translationLoadedSub)) {
this.translationLoadedSub.unsubscribe();
this.translationLoadedSub = undefined;
}
}
ngOnDestroy(): void {
this._dispose();
}
}