Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(localization): implement the localization using ngx-translate (#830)

Browse source
This commit is contained in:
Venkatraman 2017-04-11 04:07:30 -05:00 • committed by Lex Zhukov
parent 56638e7584
commit 627d62d11f
15 changed files with 151 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -19,6 +19,8 @@
"@angularclass/hmr": "1.2.2",
"@angularclass/hmr-loader": "3.0.2",
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.22",
"@ngx-translate/core": "6.0.1",
"@ngx-translate/http-loader": "0.0.3",
"amcharts3": "github:amcharts/amcharts3",
"ammap3": "github:amcharts/ammap3",
"animate.css": "3.5.2",

4
src/app/app.module.ts
View file

@ -5,6 +5,7 @@ import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { removeNgStyles, createNewHosts, createInputTransfer } from '@angularclass/hmr';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TranslateService } from '@ngx-translate/core';
/*
* Platform and Environment providers/directives/pipes
@ -59,7 +60,8 @@ export type StoreType = {
export class AppModule {
constructor(public appRef: ApplicationRef, public appState: AppState) {
constructor(public appRef: ApplicationRef,
public appState: AppState) {
}
hmrOnInit(store: StoreType) {

31
src/app/app.translation.module.ts Normal file
View file

@ -0,0 +1,31 @@
import { NgModule } from '@angular/core';
import { Http, HttpModule } from '@angular/http';
import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { TranslateService } from '@ngx-translate/core';
export function createTranslateLoader(http: Http) {
return new TranslateHttpLoader(http, './assets/i18n/US/', '.json');
}
const translationOptions = {
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http]
}
};
@NgModule({
imports: [TranslateModule.forRoot(translationOptions)],
exports: [TranslateModule],
providers: [TranslateService]
})
export class AppTranslationModule {
constructor(private translate: TranslateService) {
translate.addLangs(["en"]);
translate.setDefaultLang('en');
translate.use('en');
}
}

13
src/app/pages/dashboard/dashboard.html
View file

@ -6,12 +6,12 @@
<div class="row">
<ba-card class="col-xlg-6 col-xl-6 col-lg-12 col-sm-12 col-xs-12"
title="Acquisition Channels" baCardClass="traffic-panel medium-card">
title="general.dashboard.acquisitionChannels" baCardClass="traffic-panel medium-card">
<traffic-chart></traffic-chart>
</ba-card>
<ba-card class="col-xlg-6 col-xl-6 col-lg-12 col-sm-12 col-xs-12"
title="Users by Country" baCardClass="medium-card">
title="general.dashboard.usersByCountry" baCardClass="medium-card">
<users-map></users-map>
</ba-card>
</div>
@ -20,7 +20,7 @@
<div class="col-xlg-9 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<ba-card class="col-xlg-8 col-xl-12 col-lg-12 col-md-7 col-sm-12 col-xs-12"
title="Revenue" baCardClass="medium-card">
title="general.dashboard.revenue" baCardClass="medium-card">
<line-chart></line-chart>
</ba-card>
<ba-card class="col-xlg-4 col-xl-12 col-lg-12 col-md-5 col-sm-12 col-xs-12"
@ -31,7 +31,7 @@
</div>
<div class="col-xlg-3 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
<ba-card title="Feed"
<ba-card title="general.dashboard.feed"
baCardClass="large-card with-scroll feed-panel">
<feed></feed>
</ba-card>
@ -40,13 +40,12 @@
</div>
<div class="row shift-up">
<ba-card class="col-xlg-3 col-lg-6 col-md-12 col-sm-12 col-xs-12" title="To Do List"
<ba-card class="col-xlg-3 col-lg-6 col-md-12 col-sm-12 col-xs-12" title="general.dashboard.toDoList"
baCardClass="xmedium-card feed-comply-panel with-scroll todo-panel">
<todo></todo>
</ba-card>
<ba-card class="col-xlg-6 col-lg-6 col-md-12 col-sm-12 col-xs-12" title="Calendar"
<ba-card class="col-xlg-6 col-lg-6 col-md-12 col-sm-12 col-xs-12" title="general.dashboard.calendar"
baCardClass="xmedium-card feed-comply-panel with-scroll calendar-panel">
<calendar></calendar>
</ba-card>
</div>

2
src/app/pages/dashboard/dashboard.module.ts
View file

@ -1,6 +1,7 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppTranslationModule } from '../../app.translation.module';
import { NgaModule } from '../../theme/nga.module';
import { Dashboard } from './dashboard.component';
@ -26,6 +27,7 @@ import { UsersMapService } from './usersMap/usersMap.service';
imports: [
CommonModule,
FormsModule,
AppTranslationModule,
NgaModule,
routing
],

2
src/app/pages/dashboard/pieChart/pieChart.html
View file

@ -7,7 +7,7 @@
<span class="percent"></span>
</div>
<div class="description">
<div>{{ chart.description }}</div>
<div translate>{{ chart.description }}</div>
<div class="description-stats">{{ chart.stats }}</div>
</div>
<i class="chart-icon i-{{ chart.icon }}"></i>

8
src/app/pages/dashboard/pieChart/pieChart.service.ts
View file

@ -12,22 +12,22 @@ export class PieChartService {
return [
{
color: pieColor,
description: 'New Visits',
description: 'general.dashboard.newVisits',
stats: '57,820',
icon: 'person',
}, {
color: pieColor,
description: 'Purchases',
description: 'general.dashboard.purchases',
stats: '$ 89,745',
icon: 'money',
}, {
color: pieColor,
description: 'Active Users',
description: 'general.dashboard.activeUsers',
stats: '178,391',
icon: 'face',
}, {
color: pieColor,
description: 'Returned',
description: 'general.dashboard.returned',
stats: '32,592',
icon: 'refresh',
}

2
src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html
View file

@ -6,7 +6,7 @@
<div class="col-md-4">
<label class="radio-inline custom-radio nowrap">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<span>Option 1</span>
<span translate>{{'general.forms.option1'}}</span>
</label>
</div>
<div class="col-md-4">

2
src/app/pages/forms/forms.module.ts
View file

@ -1,6 +1,7 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule as AngularFormsModule } from '@angular/forms';
import { AppTranslationModule } from '../../app.translation.module';
import { NgaModule } from '../../theme/nga.module';
import { NgbRatingModule } from '@ng-bootstrap/ng-bootstrap';
@ -27,6 +28,7 @@ import { WithoutLabelsForm } from './components/layouts/components/withoutLabels
imports: [
CommonModule,
AngularFormsModule,
AppTranslationModule,
NgaModule,
NgbRatingModule,
routing

64
src/app/pages/pages.menu.ts
View file

@ -6,7 +6,7 @@ export const PAGES_MENU = [
path: 'dashboard',
data: {
menu: {
title: 'Dashboard',
title: 'general.menu.dashboard',
icon: 'ion-android-home',
selected: false,
expanded: false,
@ -18,7 +18,7 @@ export const PAGES_MENU = [
path: 'editors',
data: {
menu: {
title: 'Editors',
title: 'general.menu.editors',
icon: 'ion-edit',
selected: false,
expanded: false,
@ -30,7 +30,7 @@ export const PAGES_MENU = [
path: 'ckeditor',
data: {
menu: {
title: 'CKEditor',
title: 'general.menu.ck_editor',
}
}
}
@ -40,7 +40,7 @@ export const PAGES_MENU = [
path: 'components',
data: {
menu: {
title: 'Components',
title: 'general.menu.components',
icon: 'ion-gear-a',
selected: false,
expanded: false,
@ -52,7 +52,7 @@ export const PAGES_MENU = [
path: 'treeview',
data: {
menu: {
title: 'Tree View',
title: 'general.menu.tree_view',
}
}
}
@ -62,7 +62,7 @@ export const PAGES_MENU = [
path: 'charts',
data: {
menu: {
title: 'Charts',
title: 'general.menu.charts',
icon: 'ion-stats-bars',
selected: false,
expanded: false,
@ -74,7 +74,7 @@ export const PAGES_MENU = [
path: 'chartist-js',
data: {
menu: {
title: 'Chartist.Js',
title: 'general.menu.chartist_js',
}
}
}
@ -84,7 +84,7 @@ export const PAGES_MENU = [
path: 'ui',
data: {
menu: {
title: 'UI Features',
title: 'general.menu.ui_features',
icon: 'ion-android-laptop',
selected: false,
expanded: false,
@ -96,7 +96,7 @@ export const PAGES_MENU = [
path: 'typography',
data: {
menu: {
title: 'Typography',
title: 'general.menu.typography',
}
}
},
@ -104,7 +104,7 @@ export const PAGES_MENU = [
path: 'buttons',
data: {
menu: {
title: 'Buttons',
title: 'general.menu.buttons',
}
}
},
@ -112,7 +112,7 @@ export const PAGES_MENU = [
path: 'icons',
data: {
menu: {
title: 'Icons',
title: 'general.menu.icons',
}
}
},
@ -120,7 +120,7 @@ export const PAGES_MENU = [
path: 'modals',
data: {
menu: {
title: 'Modals',
title: 'general.menu.modals',
}
}
},
@ -128,7 +128,7 @@ export const PAGES_MENU = [
path: 'grid',
data: {
menu: {
title: 'Grid',
title: 'general.menu.grid',
}
}
},
@ -138,7 +138,7 @@ export const PAGES_MENU = [
path: 'forms',
data: {
menu: {
title: 'Form Elements',
title: 'general.menu.form_elements',
icon: 'ion-compose',
selected: false,
expanded: false,
@ -150,7 +150,7 @@ export const PAGES_MENU = [
path: 'inputs',
data: {
menu: {
title: 'Form Inputs',
title: 'general.menu.form_inputs',
}
}
},
@ -158,7 +158,7 @@ export const PAGES_MENU = [
path: 'layouts',
data: {
menu: {
title: 'Form Layouts',
title: 'general.menu.form_layouts',
}
}
}
@ -168,7 +168,7 @@ export const PAGES_MENU = [
path: 'tables',
data: {
menu: {
title: 'Tables',
title: 'general.menu.tables',
icon: 'ion-grid',
selected: false,
expanded: false,
@ -180,7 +180,7 @@ export const PAGES_MENU = [
path: 'basictables',
data: {
menu: {
title: 'Basic Tables',
title: 'general.menu.basic_tables',
}
}
},
@ -188,7 +188,7 @@ export const PAGES_MENU = [
path: 'smarttables',
data: {
menu: {
title: 'Smart Tables',
title: 'general.menu.smart_tables',
}
}
}
@ -198,7 +198,7 @@ export const PAGES_MENU = [
path: 'maps',
data: {
menu: {
title: 'Maps',
title: 'general.menu.maps',
icon: 'ion-ios-location-outline',
selected: false,
expanded: false,
@ -210,7 +210,7 @@ export const PAGES_MENU = [
path: 'googlemaps',
data: {
menu: {
title: 'Google Maps',
title: 'general.menu.google_maps',
}
}
},
@ -218,7 +218,7 @@ export const PAGES_MENU = [
path: 'leafletmaps',
data: {
menu: {
title: 'Leaflet Maps',
title: 'general.menu.leaflet_maps',
}
}
},
@ -226,7 +226,7 @@ export const PAGES_MENU = [
path: 'bubblemaps',
data: {
menu: {
title: 'Bubble Maps',
title: 'general.menu.bubble_maps',
}
}
},
@ -234,7 +234,7 @@ export const PAGES_MENU = [
path: 'linemaps',
data: {
menu: {
title: 'Line Maps',
title: 'general.menu.line_maps',
}
}
}
@ -244,7 +244,7 @@ export const PAGES_MENU = [
path: '',
data: {
menu: {
title: 'Pages',
title: 'general.menu.pages',
icon: 'ion-document',
selected: false,
expanded: false,
@ -256,7 +256,7 @@ export const PAGES_MENU = [
path: ['/login'],
data: {
menu: {
title: 'Login'
title: 'general.menu.login'
}
}
},
@ -264,7 +264,7 @@ export const PAGES_MENU = [
path: ['/register'],
data: {
menu: {
title: 'Register'
title: 'general.menu.register'
}
}
}
@ -274,7 +274,7 @@ export const PAGES_MENU = [
path: '',
data: {
menu: {
title: 'Menu Level 1',
title: 'general.menu.menu_level_1',
icon: 'ion-ios-more',
selected: false,
expanded: false,
@ -286,7 +286,7 @@ export const PAGES_MENU = [
path: '',
data: {
menu: {
title: 'Menu Level 1.1',
title: 'general.menu.menu_level_1_1',
url: '#'
}
}
@ -295,7 +295,7 @@ export const PAGES_MENU = [
path: '',
data: {
menu: {
title: 'Menu Level 1.2',
title: 'general.menu.menu_level_1_2',
url: '#'
}
},
@ -304,7 +304,7 @@ export const PAGES_MENU = [
path: '',
data: {
menu: {
title: 'Menu Level 1.2.1',
title: 'general.menu.menu_level_1_2_1',
url: '#'
}
}
@ -317,7 +317,7 @@ export const PAGES_MENU = [
path: '',
data: {
menu: {
title: 'External Link',
title: 'general.menu.external_link',
url: 'http://akveo.com',
icon: 'ion-android-exit',
order: 800,

2
src/app/theme/components/baCard/baCard.html
View file

@ -1,6 +1,6 @@
<div baCardBlur class="animated fadeIn card {{cardType}} {{baCardClass || ''}}" zoom-in>
<div *ngIf="title" class="card-header clearfix">
<h3 class="card-title">{{title}}</h3>
<h3 class="card-title" translate>{{title}}</h3>
</div>
<div class="card-body">
<ng-content></ng-content>

8
src/app/theme/components/baContentTop/baContentTop.html
View file

@ -1,8 +1,10 @@
<div class="content-top clearfix">
<h1 class="al-title">{{ activePageTitle }}</h1>
<h1 class="al-title" translate>{{ activePageTitle }}</h1>
<ul class="breadcrumb al-breadcrumb">
<li class="breadcrumb-item"><a routerLink="/pages/dashboard">Home</a></li>
<li class="breadcrumb-item active">{{ activePageTitle }}</li>
<li class="breadcrumb-item">
<a routerLink="/pages/dashboard" translate>{{'general.home'}}</a>
</li>
<li class="breadcrumb-item active" translate>{{ activePageTitle }}</li>
</ul>
</div>

8
src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html
View file

@ -1,15 +1,15 @@
<li *ngIf="!menuItem.hidden" [title]="menuItem.title" [ngClass]="{'al-sidebar-list-item': !child, 'ba-sidebar-sublist-item': child, 'selected': menuItem.selected && !menuItem.expanded, 'with-sub-menu': menuItem.children, 'ba-sidebar-item-expanded': menuItem.expanded}">
<li *ngIf="!menuItem.hidden" [title]="menuItem.title | translate" [ngClass]="{'al-sidebar-list-item': !child, 'ba-sidebar-sublist-item': child, 'selected': menuItem.selected && !menuItem.expanded, 'with-sub-menu': menuItem.children, 'ba-sidebar-item-expanded': menuItem.expanded}">
<a *ngIf="!menuItem.children && !menuItem.url" (mouseenter)="onHoverItem($event, item)" [routerLink]="menuItem.route.paths" class="al-sidebar-list-link">
<i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span>{{ menuItem.title }}</span>
<i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span translate>{{ menuItem.title }}</span>
</a>
<a *ngIf="!menuItem.children && menuItem.url" (mouseenter)="onHoverItem($event, item)" [href]="menuItem.url" [target]="menuItem.target" class="al-sidebar-list-link">
<i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span>{{ menuItem.title }}</span>
<i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span translate>{{ menuItem.title }}</span>
</a>
<a *ngIf="menuItem.children" (mouseenter)="onHoverItem($event, item)" href (click)="onToggleSubMenu($event, menuItem)" class="al-sidebar-list-link">
<i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span>{{ menuItem.title }}</span>
<i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span translate>{{ menuItem.title }}</span>
<b class="fa fa-angle-down" [ngClass]="{'fa-angle-up': menuItem.expanded}"></b>
</a>

4
src/app/theme/nga.module.ts
View file

@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgUploaderModule } from 'ngx-uploader';
import { AppTranslationModule } from '../app.translation.module';
import {
BaThemeConfig
@ -108,7 +109,8 @@ const NGA_VALIDATORS = [
RouterModule,
FormsModule,
ReactiveFormsModule,
NgUploaderModule,
AppTranslationModule,
NgUploaderModule
],
exports: [
...NGA_PIPES,

54
src/assets/i18n/US/en.json Normal file
View file

@ -0,0 +1,54 @@
{
"general": {
"home": "Home",
"dashboard": {
"acquisitionChannels": "Acquisition Channels",
"usersByCountry": "Users by Country",
"revenue": "Revenue",
"feed": "Feed",
"toDoList": "To Do List",
"calendar": "Calendar",
"newVisits": "New Visits",
"purchases": "Purchases",
"activeUsers": "Active Users",
"returned": "Returned"
},
"forms": {
"option1": "Option 1"
},
"menu": {
"dashboard": "Dashboard",
"editors": "Editors",
"ck_editor": "CKEditor",
"components": "Components",
"tree_view": "Tree View",
"charts": "Charts",
"chartist_js": "Chartist.Js",
"ui_features": "UI Features",
"typography": "Typography",
"buttons": "Buttons",
"icons": "Icons",
"modals": "Modals",
"grid": "Grid",
"form_elements": "Form Elements",
"form_inputs": "Form Inputs",
"form_layouts": "Form Layouts",
"tables": "Tables",
"basic_tables": "Basic Tables",
"smart_tables": "Smart Tables",
"maps": "Maps",
"google_maps": "Google Maps",
"leaflet_maps": "Leaflet Maps",
"bubble_maps": "Bubble Maps",
"line_maps": "Line Maps",
"pages": "Pages",
"login": "Login",
"register": "Register",
"menu_level_1": "Menu Level 1",
"menu_level_1_1": "Menu Level 1.1",
"menu_level_1_2": "Menu Level 1.2",
"menu_level_1_2_1": "Menu Level 1.2.1",
"external_link": "External Link"
}
}
}