Skip to content

Commit f091f65

Browse files
MichaelMarnerMichaelMarner
authored
Merge pull request #12 from NextFaze/i18n
Internationalisation Support
2 parents fb16a8b + e7985fd commit f091f65

File tree

13 files changed

+207
-20
lines changed

13 files changed

+207
-20
lines changed

‎README.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,73 @@ export class MyApp {
124124
}
125125
```
126126

127+
## Internationalisation Support
128+
129+
The service uses [ng2-translate](https://www.npmjs.com/package/ng2-translate) to support languages other than English. This package is the way [recommended](https://ionicframework.com/docs/v2/resources/ng2-translate/) by the Ionic developers.
130+
131+
### With Built in translations
132+
133+
To make life easy for app developers, the service includes its own translation strings. All you need to do is add `ng2-translate` to your Ionic app and set the active language.
134+
135+
Languages supported are currently limited to English and a Google Translated Spanish. We would love pull requests for new languages.
136+
137+
#### Boostrap ng2-translate with your app!
138+
139+
```ts
140+
import { ManUpModule } from 'ionic-manup';
141+
import { TranslateModule } from 'ng2-translate';
142+
143+
// in your module's import array
144+
TranslateModule.forRoot(),
145+
ManUpModule.forRoot({url: 'https://example.com/manup.json'})
146+
```
147+
148+
Note: This is an absolute bare minimum example of loading the module. Follow the instructions linked to above for how to use `ng2-translate` in your app.
149+
150+
### With your own strings
151+
152+
If you want to further customise the messages, you can provide your own translations for the ManUp strings. _This is the only way we will be supporting customisation of the messages_.
153+
154+
#### Setup your language files
155+
156+
Follow the instructions for setting up `ng2-translate` with your Ionic 2 app, and add the following tree to your language files:
157+
158+
159+
```json
160+
{
161+
...
162+
163+
"manup": {
164+
"mandatory": {
165+
"title": "Update Required",
166+
"text": "An update to {{app}} is required to continue."
167+
},
168+
"optional": {
169+
"title": "Update Available",
170+
"text": "An update to {{app}} is available. Would you like to update?"
171+
},
172+
"maintenance": {
173+
"title": "{app}} Unavailable",
174+
"text": "{{app}} is currently unavailable, please check back again later."
175+
},
176+
"buttons": {
177+
"update": "Update",
178+
"later": "Not Now"
179+
}
180+
}
181+
}
182+
```
183+
184+
#### Tell ManUp to use external translations
185+
186+
You need to tell ManUp to use external translations. Modify your Bootstrap like this:
187+
188+
```ts
189+
import { ManUpModule } from 'ionic-manup';
190+
191+
// in your module's import array
192+
ManUpModule.forRoot({url: 'https://example.com/manup.json', externalTranslations: true})
193+
```
127194

128195
## Demonstration App
129196

‎manup-demo/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"ionic-manup": "^0.0.5",
2525
"ionic-native": "2.4.1",
2626
"ionicons": "3.0.0",
27+
"ng2-translate": "^5.0.0",
2728
"rxjs": "5.0.0-beta.12",
2829
"sw-toolbox": "3.4.0",
2930
"zone.js": "0.6.26"

‎manup-demo/src/app/app.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,16 @@ import { StatusBar, Splashscreen } from 'ionic-native';
55
import { TabsPage } from '../pages/tabs/tabs';
66

77
import { ManUpService } from 'ionic-manup';
8+
import { TranslateService } from 'ng2-translate'
89

910
@Component({
1011
templateUrl: 'app.html'
1112
})
1213
export class MyApp {
1314
rootPage = TabsPage;
1415

15-
constructor(platform: Platform, private manup: ManUpService) {
16+
constructor(platform: Platform, private manup: ManUpService, private translate: TranslateService) {
17+
translate.setDefaultLang('es');
1618
platform.ready().then(() => {
1719
// Okay, so the platform is ready and our plugins are available.
1820
// Here you can do any higher level native things you might need.

‎manup-demo/src/app/app.module.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
import { NgModule, ErrorHandler } from '@angular/core';
2+
import { Http } from '@angular/http';
23
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
34
import { MyApp } from './app.component';
45
import { AboutPage } from '../pages/about/about';
56
import { ContactPage } from '../pages/contact/contact';
67
import { HomePage } from '../pages/home/home';
78
import { TabsPage } from '../pages/tabs/tabs';
89
import { ManUpModule, ManUpService } from 'ionic-manup';
10+
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';
11+
12+
13+
export function translateLoader(http: Http) {
14+
return new TranslateStaticLoader(http, 'assets/i18n', '.json');
15+
}
916

1017
@NgModule({
1118
declarations: [
@@ -17,7 +24,12 @@ import { ManUpModule, ManUpService } from 'ionic-manup';
1724
],
1825
imports: [
1926
IonicModule.forRoot(MyApp),
20-
ManUpModule.forRoot({url: 'https://raw.githubusercontent.com/NextFaze/ionic-manup/master/manup-demo/manup.json'})
27+
ManUpModule.forRoot({url: 'https://raw.githubusercontent.com/NextFaze/ionic-manup/master/manup-demo/manup.json', externalTranslations: true}),
28+
TranslateModule.forRoot({
29+
provide: TranslateLoader,
30+
useFactory: (translateLoader),
31+
deps: [Http]
32+
})
2133
],
2234
bootstrap: [IonicApp],
2335
entryComponents: [

‎manup-demo/src/assets/i18n/en.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"manup": {
3+
"mandatory": {
4+
"title": "i18n Update Required",
5+
"text": "An update to {{app}} is required to continue."
6+
},
7+
"optional": {
8+
"title": "i18n Update Available",
9+
"text": "An update to {{app}} is available. Would you like to update?"
10+
},
11+
"maintenance": {
12+
"title": "i18n {{app}} Unavailable",
13+
"text": "{{app}} is currently unavailable, please check back again later."
14+
},
15+
"buttons": {
16+
"update": "Update",
17+
"later": "Not Now"
18+
}
19+
}
20+
}

‎manup-demo/src/assets/i18n/es.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"manup": {
3+
"mandatory": {
4+
"title": "Actualización Requerida",
5+
"text": "Se requiere una actualización para continuar"
6+
},
7+
"optional": {
8+
"title": "Actualización disponible",
9+
"text": "Hay disponible una actualización para {{app}}. ¿Te gustaría actualizar?"
10+
},
11+
"maintenance": {
12+
"title": "Sistema no disponible",
13+
"text": "{{app}} no está disponible actualmente. Por favor, vuelva más tarde."
14+
},
15+
"buttons": {
16+
"update": "Actualizar",
17+
"later": "Ahora No"
18+
}
19+
}
20+
}

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
"karma-phantomjs-launcher": "^1.0.2",
5656
"karma-remap-istanbul": "^0.6.0",
5757
"mocha": "^3.2.0",
58+
"ng2-translate": "^5.0.0",
5859
"rxjs": "^5.0.0-beta.12",
5960
"ts-node": "^2.1.0",
6061
"tslint": "^4.4.2",

‎src/i18n/en.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
export var en = {
3+
lang: 'en',
4+
translations: {
5+
manup: {
6+
mandatory: {
7+
title: "Update Required",
8+
text: "An update to {{app}} is required to continue.",
9+
},
10+
optional: {
11+
title: "Update Available",
12+
text: "An update to {{app}} is available. Would you like to update?"
13+
},
14+
maintenance: {
15+
title: "{{app}} Unavailable",
16+
text: "{{app}} is currently unavailable, please check back again later."
17+
},
18+
buttons: {
19+
update: "Update",
20+
later: "Not Now"
21+
}
22+
}
23+
}
24+
}

‎src/i18n/es.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
export var es = {
3+
lang: 'es',
4+
translations: {
5+
manup: {
6+
mandatory: {
7+
title: "Actualización Requerida",
8+
text: "Se requiere una actualización para continuar"
9+
},
10+
optional: {
11+
title: "Actualización disponible",
12+
text: "Hay disponible una actualización para {{app}}. ¿Te gustaría actualizar?"
13+
},
14+
maintenance: {
15+
title: "Sistema no disponible",
16+
text: "{{app}} no está disponible actualmente. Por favor, vuelva más tarde."
17+
},
18+
buttons: {
19+
update: "Actualizar",
20+
later: "Ahora No"
21+
}
22+
}
23+
}
24+
}

‎src/i18n/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { en } from './en';
2+
import { es } from './es';
3+
4+
export var i18n = [
5+
en, es
6+
];

0 commit comments

Comments
 (0)