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

package.json

@@ -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",

src/app/app.module.ts

@@ -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) {

src/app/app.translation.module.ts

@@ -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');
+  }
+}

src/app/pages/dashboard/dashboard.html

@@ -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>
-

src/app/pages/dashboard/dashboard.module.ts

@@ -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
   ],

src/app/pages/dashboard/pieChart/pieChart.html

@@ -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>

src/app/pages/dashboard/pieChart/pieChart.service.ts

@@ -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',
       }

src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html

@@ -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">

src/app/pages/forms/forms.module.ts

@@ -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

src/app/pages/pages.menu.ts

@@ -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,

src/app/theme/components/baCard/baCard.html

@@ -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>

src/app/theme/components/baContentTop/baContentTop.html

@@ -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">
-    <li class="breadcrumb-item active">{{ activePageTitle }}</li>
+      <a routerLink="/pages/dashboard" translate>{{'general.home'}}</a>
+    </li>
+    <li class="breadcrumb-item active" translate>{{ activePageTitle }}</li>
   </ul>
 </div>

src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html

@@ -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>
 

src/app/theme/nga.module.ts

@@ -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,

src/assets/i18n/US/en.json

@@ -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"
+    }
+  }
+}