Skip to content

I18n support - Can switch between English and Norwegian #155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Apr 5, 2017
Merged

I18n support - Can switch between English and Norwegian #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ec42e6f
added ng2-translate
hakonamatata Apr 5, 2017
65cef8f
added translate module to app.module
hakonamatata Apr 5, 2017
bb7ac35
translation works but json location hardcoded...
hakonamatata Apr 5, 2017
3dec023
added buttons for switching language
hakonamatata Apr 5, 2017
2a32f87
some more translations
hakonamatata Apr 5, 2017
ad05405
switching between english and norwegian works
hakonamatata Apr 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions Client/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import { Subscription } from 'rxjs/Subscription';
import { isPlatformServer } from '@angular/common';
import { LinkService } from './shared/link.service';

// i18n support
import { TranslateService } from '@ngx-translate/core';

@Component({
selector: 'app',
templateUrl: './app.component.html',
Expand All @@ -25,8 +28,15 @@ export class AppComponent implements OnInit, OnDestroy {
private activatedRoute: ActivatedRoute,
private title: Title,
private meta: Meta,
private linkService: LinkService
) { }
private linkService: LinkService,
public translate: TranslateService
) {
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en');

// the lang to use, if the lang isn't available, it will use the current loader to get them
translate.use('en');
}

ngOnInit() {
// Change "Title" on every navigationEnd event
Expand Down
31 changes: 26 additions & 5 deletions Client/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { CommonModule, APP_BASE_HREF } from '@angular/common';
import { HttpModule, Http } from '@angular/http';
import { FormsModule } from '@angular/forms';

import { Ng2BootstrapModule } from 'ng2-bootstrap';

// i18n support
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './containers/home/home.component';
Expand All @@ -17,6 +21,13 @@ import { Ng2BootstrapComponent } from './containers/ng2-bootstrap-demo/ng2bootst
import { LinkService } from './shared/link.service';
import { ConnectionResolver } from './shared/route.resolver';

export function createTranslateLoader(http: Http) {

// BUG: URLs requested via Http on the server must be absolute
// TODO: Should not hardcode localhost://5000, should use APP_BASE_HREF!!
return new TranslateHttpLoader(http, 'http://localhost:5000/assets/i18n/', '.json');
}

@NgModule({
declarations: [
AppComponent,
Expand All @@ -33,6 +44,15 @@ import { ConnectionResolver } from './shared/route.resolver';
FormsModule,
Ng2BootstrapModule.forRoot(), // You could also split this up if you don't want the Entire Module imported

// i18n support
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http]
}
}),

// App Routing
RouterModule.forRoot([
{
Expand Down Expand Up @@ -80,7 +100,7 @@ import { ConnectionResolver } from './shared/route.resolver';
}
},
{
path: 'chat', component: ChatComponent,
path: 'chat', component: ChatComponent,
// Wait until the resolve is finished before loading the Route
resolve: { connection: ConnectionResolver },
data: {
Expand Down Expand Up @@ -109,8 +129,9 @@ import { ConnectionResolver } from './shared/route.resolver';
])
],
providers: [
LinkService,
ConnectionResolver
LinkService,
ConnectionResolver,
TranslateModule
]
})
export class AppModule {
Expand Down
64 changes: 32 additions & 32 deletions Client/app/components/navmenu/navmenu.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,43 @@
<div class='main-nav'>
<div class='navbar'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
<div class='navbar'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' [routerLink]="['/home']">Angular 4 Universal & ASP.NET Core </a>
</div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse'>
<ul class='nav navbar-nav'>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/home']">
<span class='glyphicon glyphicon-home'></span> Home
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/counter']">
<span class='glyphicon glyphicon-education'></span> Counter
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/users']">
<span class='glyphicon glyphicon-user'></span> REST API Demo
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/ng2-bootstrap']">
<span class='glyphicon glyphicon-user'></span> ng2-Bootstrap demo
</a>
</li>
<!--<li [routerLinkActive]="['link-active']">
<a class='navbar-brand' [routerLink]="['/home']">Angular 4 Universal & ASP.NET Core </a>
</div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse'>
<ul class='nav navbar-nav'>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/home']">
<span class='glyphicon glyphicon-home'></span> {{ 'HOME' | translate }}
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/counter']">
<span class='glyphicon glyphicon-education'></span> {{ 'COUNTER' | translate }}
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/users']">
<span class='glyphicon glyphicon-user'></span> REST API Demo
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/ng2-bootstrap']">
<span class='glyphicon glyphicon-user'></span> ng2-Bootstrap demo
</a>
</li>
<!--<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/chat']">
<span class='glyphicon glyphicon-comment'></span> Chat
</a>
</li>-->
</ul>
</div>
</ul>
</div>
</div>
</div>
</div>
101 changes: 59 additions & 42 deletions Client/app/containers/home/home.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,76 @@

<h1>{{ title }}</h1>
<h1>
{{ title }}</h1>

<blockquote>
<strong>Enjoy the latest features from .NET Core & Angular 4.0!</strong>
<br>
For more info check the repo here: <a href="https://github.com/MarkPieszak/aspnetcore-angular2-universal">AspNetCore-Angular2-Universal repo</a>
<strong>Enjoy the latest features from .NET Core & Angular 4.0!</strong>
<br> For more info check the repo here: <a href="https://github.com/MarkPieszak/aspnetcore-angular2-universal">AspNetCore-Angular2-Universal repo</a>

<br><br>
<br><br>
</blockquote>


<div class="row">
<div class="col-lg-6">
<h2>What does this Starter offer? </h2>
<div class="col-lg-6">
<h2>{{ 'HOME_FEATURE_LIST_TITLE' | translate }} </h2>
<ul>
<li>ASP.NET Core 1.1 :: ( Visual Studio 2017 )</li>
<li>
Angular 4.* front-end UI framework
<ul>
<li>ASP.NET Core 1.1 :: ( Visual Studio 2017 )</li>
<li>
Angular 4.* front-end UI framework
<ul>
<li>Angular **platform-server** (Universal moved into Core here) - server-side rendering for SEO, deep-linking, and incredible performance.</li>
<!--<li>HMR State Management - Don't lose your applications state during HMR!</li>-->
<li>AoT (Ahead-of-time) production compilation for even faster Prod builds.</li>
</ul>
</li>
<li>
The latest TypeScript 2.* features
<!--<ul>
<li>Angular **platform-server** (Universal moved into Core here) - server-side rendering for SEO, deep-linking, and
incredible performance.</li>
<!--<li>HMR State Management - Don't lose your applications state during HMR!</li>-->
<li>AoT (Ahead-of-time) production compilation for even faster Prod builds.</li>
</ul>
</li>
<li>
The latest TypeScript 2.* features
<!--<ul>
<li>
"Path" support example - create your own custom directory paths to avoid `../../` directory diving.<br />
Check the <a href="https://github.com/MarkPieszak/aspnetcore-angular2-universal/blob/master/tsconfig.json">tsconfig</a> to see how they are setup.
</li>
</ul>-->
</li>
<li>
Webpack 2
<ul>
<!--<li>TS2 aware path support</li>-->
<li>Hot Module Reloading/Replacement for an amazing development experience.</li>
<li>Tree-shaking</li>
</ul>
</li>

<li>Bootstrap (ng2-bootstrap) : Bootstrap capable of being rendered even on the server.</li>
<li>Unit testing via karma & jasmine.</li>
<!--<li>e2e testing via protractor.</li>-->
</li>
<li>
Webpack 2
<ul>
<!--<li>TS2 aware path support</li>-->
<li>Hot Module Reloading/Replacement for an amazing development experience.</li>
<li>Tree-shaking</li>
</ul>
</div>
</li>

<div class="col-lg-6">
<h2>Having issues?</h2>
<li>Bootstrap (ng2-bootstrap) : Bootstrap capable of being rendered even on the server.</li>
<li>Unit testing via karma & jasmine.</li>
<!--<li>e2e testing via protractor.</li>-->
</ul>

<ul>
<li><strong>Issues with this Starter?</strong> <br>Please post an issue here: <a href="https://github.com/MarkPieszak/aspnetcore-angular2-universal">AspNetCore-Angular2-Universal repo</a><br><br></li>
<!--<li><strong>Issues with <u>Universal</u> itself?</strong> <br>Please post an issue here: <a href="https://github.com/angular/universal">Angular Universal repo</a></li>-->
</ul>
</div>
</div>

<div class="col-lg-6">
<h2>{{ 'HOME_ISSUES_TITLE' | translate }}</h2>

<ul>
<li><strong>Issues with this Starter?</strong> <br>Please post an issue here: <a href="https://github.com/MarkPieszak/aspnetcore-angular2-universal">AspNetCore-Angular2-Universal repo</a><br><br></li>
<!--<li><strong>Issues with <u>Universal</u> itself?</strong> <br>Please post an issue here: <a href="https://github.com/angular/universal">Angular Universal repo</a></li>-->
</ul>
</div>

</div>

<div class="row">
<div class="col-lg-12">

<h2> {{ 'SWITCH_LANGUAGE' | translate }}</h2>

<button class="btn btn-default" (click)="setLanguage('en')">
<span class="flag-icon flag-icon-us"></span> {{ 'ENGLISH' | translate }}
</button>

<button class="btn btn-default" (click)="setLanguage('no')">
<span class="flag-icon flag-icon-no"></span> {{ 'NORWEGIAN' | translate }}
</button>

</div>
</div>
</div>
8 changes: 5 additions & 3 deletions Client/app/containers/home/home.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Component, OnInit, Inject } from '@angular/core';

import { TranslateService } from '@ngx-translate/core';

@Component({
selector: 'app-home',
Expand All @@ -10,12 +11,13 @@ export class HomeComponent implements OnInit {
title: string = 'Angular 4.0 Universal & ASP.NET Core advanced starter-kit';

// Use "constructor"s only for dependency injection
constructor () {
}
constructor(public translate: TranslateService) { }

// Here you want to handle anything with @Input()'s @Output()'s
// Data retrieval / etc - this is when the Component is "ready" and wired up
ngOnInit () {
ngOnInit() { }

public setLanguage(lang) {
this.translate.use(lang);
}
}
2 changes: 2 additions & 0 deletions Views/Shared/_Layout.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@

<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css" />

@Html.Raw(ViewData["Styles"])

</head>
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/platform-server": "^4.0.0",
"@angular/router": "^4.0.0",
"@ngx-translate/core": "^6.0.1",
"@ngx-translate/http-loader": "0.0.3",
"@types/node": "^7.0.12",
"angular2-template-loader": "0.6.0",
"aspnet-prerendering": "^2.0.0",
Expand All @@ -39,11 +41,11 @@
"json-loader": "^0.5.4",
"ng2-bootstrap": "^1.6.1",
"ng2-signalr": "^2.0.2",
"node-sass": "^4.5.2",
"preboot": "^4.5.2",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.1",
"rxjs": "^5.0.1",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"signalr": "^2.2.1",
"style-loader": "^0.13.1",
Expand Down
9 changes: 9 additions & 0 deletions wwwroot/assets/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"HOME": "Home",
"HOME_FEATURE_LIST_TITLE": "What does this Starter offer?",
"HOME_ISSUES_TITLE": "Having issues?",
"COUNTER": "Counter",
"SWITCH_LANGUAGE": "Switch language",
"ENGLISH": "English",
"NORWEGIAN": "Norwegian"
}
9 changes: 9 additions & 0 deletions wwwroot/assets/i18n/no.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"HOME": "Hjem",
"HOME_FEATURE_LIST_TITLE": "Hva tilbyr dette prosjektet?",
"HOME_ISSUES_TITLE": "Oppever du problemer?",
"COUNTER": "Teller",
"SWITCH_LANGUAGE": "Bytt språk",
"ENGLISH": "Engelsk",
"NORWEGIAN": "Norsk"
}