translated all texts

TODO

+loaders (lu busy?)
+

app/app.js

     'ngMaterial',
     'md.data.table',
     'sasrio.angular-material-sidenav',
+    'pascalprecht.translate',
     'luticate2Utils',
     // 'luticateAuth',
     'appSdk'
 ])
-    .config(['$stateProvider', '$urlRouterProvider', 'ssSideNavSectionsProvider', '$mdThemingProvider', '$mdIconProvider',
-        function($stateProvider, $urlRouterProvider, ssSideNavSectionsProvider, $mdThemingProvider, $mdIconProvider) {
+    .config(['$stateProvider', '$urlRouterProvider', 'ssSideNavSectionsProvider', '$mdThemingProvider', '$mdIconProvider', '$translateProvider',
+        function($stateProvider, $urlRouterProvider, ssSideNavSectionsProvider, $mdThemingProvider, $mdIconProvider, $translateProvider) {
 
             // $mdThemingProvider
             //     .theme('default')
             //     .primaryPalette('blue')
             //     .accentPalette('pink');
 
+            $translateProvider.useSanitizeValueStrategy('escape');
+            $translateProvider.useMessageFormatInterpolation();
+            $translateProvider.useStaticFilesLoader({
+                prefix: 'translations/',
+                suffix: '.json'
+            });
+            $translateProvider.preferredLanguage('en');
+
             $mdIconProvider
                 .icon('md-toggle-arrow', 'img/arrow.svg');
 
             ssSideNavSectionsProvider.initWithTheme($mdThemingProvider);
             ssSideNavSectionsProvider.initWithSections([{
                 id: 'toogle_1',
-                name: 'Home',
+                name: 'home.name',
                 type: 'heading',
                 children: [{
-                    name: 'Home 1',
+                    name: 'home.name',
                     type: 'toggle',
                     pages: [{
                         id: 'toogle_1_link_1',
-                        name: 'Home 1 1',
+                        name: 'home.name',
                         state: 'home'
                     }, {
                         id: 'toogle_1_link_2',
                         hidden: true
                     }, {
                         id: 'toogle_1_link_3',
-                        name: 'Home 1 3',
+                        name: 'home.name',
                         state: 'home.1.3'
                     }]
                 }]
             }, {
                 id: 'link_1',
-                name: 'Home 2 ',
+                name: 'home.name',
                 state: 'home.2',
                 type: 'link',
                 icon: 'fa fa-check'
             }, {
                 id: 'link_2',
-                name: 'Home 3',
+                name: 'home.name',
                 state: 'home.3',
                 type: 'link'
             }, {
                 id: 'link_3',
-                name: 'Link 3',
+                name: 'home.name',
                 state: 'common.link3',
                 type: 'link',
                 hidden: true
             },  {
                 id: 'toogle_2',
-                name: 'PkGuid',
+                name: 'pkguid.name',
                 type: 'heading',
                 children: [{
-                    name: 'PkGuids',
+                    name: 'pkguid.name',
                     type: 'toggle',
                     pages: [{
                         id: 'toogle_2_link_1',
-                        name: 'All',
+                        name: 'common.all',
                         state: 'pkguid'
                     },{
                         id: 'toogle_2_link_1',
-                        name: 'New',
+                        name: 'common.new',
                         state: 'pkguid_add'
                     }]
                 }]
             $stateProvider.state('home', {
                 url:'/',
                 parent: 'root',
-                title: "Home",
+                title: "home.name",
                 reloadOnSearch: false,
                 templateUrl:'views/home.html',
                 controller:'HomeController'
             $stateProvider.state('pkguid', {
                 url:'/pkguids',
                 parent: 'root',
-                title: "PkGuid",
+                title: "pkguid.name",
                 reloadOnSearch: false,
                 templateUrl:'views/pkguid.html',
                 controller:'PkGuidController'
             $stateProvider.state('pkguid_add', {
                 url:'/pkguids/add',
                 parent: 'root',
-                title: "New PkGuid",
-                toolbarTitle: "PkGuid ~ New",
+                title: "pkguid.add.defaultTitle",
+                toolbarTitle: "pkguid.add.defaultToolbarTitle",
                 reloadOnSearch: false,
                 templateUrl:'views/pkguidedit.html',
                 controller:'PkGuidEditController'
             $stateProvider.state('pkguid_edit', {
                 url:'/pkguids/edit/:id',
                 parent: 'root',
-                title: "Edit PkGuid",
-                toolbarTitle: "PkGuid ~ Edit",
+                title: "pkguid.edit.defaultTitle",
+                toolbarTitle: "pkguid.edit.defaultToolbarTitle",
                 reloadOnSearch: false,
                 templateUrl:'views/pkguidedit.html',
                 controller:'PkGuidEditController',
 
             $urlRouterProvider.otherwise('/');
     }])
-    .directive('dateNow', ['$filter', function($filter) {
-        return {
-            link: function( $scope, $element, $attrs) {
-                $element.text($filter('date')(new Date(), $attrs.dateNow));
+    .run(['$rootScope', '$transitions', 'AppUtilsBusiness', 'ssSideNav', '$translate', function ($rootScope, $transitions, AppUtilsBusiness, ssSideNav, $translate) {
+        $translate('common.appName').then(function() {
+            for (var i = 0; i < ssSideNav.sections.length; ++i) {
+                var a = ssSideNav.sections[i];
+                a.name = AppUtilsBusiness.tr(a.name);
+                if (a.children != null) {
+                    for (var j = 0; j < a.children.length; ++j) {
+                        var b = a.children[j];
+                        b.name = AppUtilsBusiness.tr(b.name);
+                        if (b.pages != null) {
+                            for (var k = 0; k < b.pages.length; ++k) {
+                                var c = b.pages[k];
+                                c.name = AppUtilsBusiness.tr(c.name);
+                            }
+                        }
+                    }
+                }
             }
-        };
-    }])
-    .run(['$rootScope', '$transitions', 'AppUtilsBusiness', function ($rootScope, $transitions, AppUtilsBusiness) {
+        }, function (error) {
+            console.error(error);
+        });
         $transitions.onEnter({}, function($transitions)
         {
             var toState = $transitions.$to();
             var title = toState.title != null ? toState.title : toState.toolbarTitle != null ? toState.toolbarTitle : null;
             var toolbarTitle = toState.toolbarTitle != null ? toState.toolbarTitle : toState.title != null ? toState.title : null;
             if (title != null) {
-                AppUtilsBusiness.setTitle(title);
+                AppUtilsBusiness.setTitle(AppUtilsBusiness.tr(title));
             }
             if (toolbarTitle != null) {
-                AppUtilsBusiness.setToolbarTitle(toolbarTitle);
+                AppUtilsBusiness.setToolbarTitle(AppUtilsBusiness.tr(toolbarTitle));
             }
         });
     }]);

app/controllers/pkguid.controller.js

 
             $scope.askRemoveOne = function (pkguid) {
                 var confirm = $mdDialog.confirm()
-                    .title('Confirm deletion')
-                    .textContent('Do you really want to delete PkGuid \'' + pkguid.someText + '\'?')
-                    .ok('Delete')
-                    .cancel('Cancel');
+                    .title(AppUtilsBusiness.tr('common.confirmDelete'))
+                    .textContent(AppUtilsBusiness.tr('pkguid.deleteOne', {text: pkguid.someText}))
+                    .ok(AppUtilsBusiness.tr('common.delete'))
+                    .cancel(AppUtilsBusiness.tr('common.cancel'));
                 $mdDialog.show(confirm).then(function() {
                     $scope.error = null;
                     $scope.promise = pkGuidBusiness.deleteDbo(pkguid.id).then(function(data)
 
             $scope.askRemoveSelected = function () {
                 var confirm = $mdDialog.confirm()
-                    .title('Confirm deletion')
-                    .textContent('Do you really want to delete ' + $scope.selected.length + ' PkGuid?')
-                    .ok('Delete')
-                    .cancel('Cancel');
+                    .title(AppUtilsBusiness.tr('common.confirmDelete'))
+                    .textContent(AppUtilsBusiness.tr('pkguid.deleteMultiple', {count: $scope.selected.length}))
+                    .ok(AppUtilsBusiness.tr('common.delete'))
+                    .cancel(AppUtilsBusiness.tr('common.cancel'));
                 $mdDialog.show(confirm).then(function() {
                     $scope.error = null;
                     $scope.removeFirstSelected();

app/controllers/pkguidedit.controller.js

             $scope.setTitle = function()
             {
                 if ($scope.pkguid.id != null) {
-                    AppUtilsBusiness.setTitle('Edit PkGuid \'' + $scope.pkguid.someText + '\'');
-                    AppUtilsBusiness.setToolbarTitle('PkGuid ~ Edit ~ \'' + $scope.pkguid.someText + '\'');
+                    AppUtilsBusiness.setTitle(AppUtilsBusiness.tr('pkguid.edit.title', {text: $scope.pkguid.someText}));
+                    AppUtilsBusiness.setToolbarTitle(AppUtilsBusiness.tr('pkguid.edit.toolbarTitle', {text: $scope.pkguid.someText}));
                 }
             };
 

app/controllers/toolbar.controller.js

     .controller('ToolBarController', ['$scope', '$rootScope', '$mdSidenav',
         function ($scope, $rootScope, $mdSidenav) {
 
-            $scope.title = "Toolbar";
+            $scope.title = '';
 
             $scope.toggleSideBar = function () {
                 $mdSidenav('left').toggle();

app/index.html

 <head>
     <base href="/app/">
     <meta charset="utf-8">
-    <title ng-bind="title">MyApp</title>
+    <title ng-bind="title">Loading...</title>
 
     <!-- build:css css/globals.css -->
     <link rel="stylesheet" href="../bower_components/components-font-awesome/css/font-awesome.min.css"/>
     <script src="../bower_components/luticate2-utils/dist/luticate-utils.min.js"></script>
     <script src="../bower_components/angular-material-data-table/dist/md-data-table.min.js"></script>
     <script src="../bower_components/angular-material-sidenav/angular-material-sidenav.js"></script>
+    <script src="../bower_components/angular-translate/angular-translate.min.js"></script>
+    <script src="../bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
+    <script src="../bower_components/messageformat/messageformat.js"></script>
+    <script src="../bower_components/angular-translate-interpolation-messageformat/angular-translate-interpolation-messageformat.min.js"></script>
     <!--<script src="../bower_components/luticate-auth/dist/luticate-auth.min.js"></script>-->
     <!--<script src="../bower_components/angular-dialog-service/dist/dialogs.js"></script>-->
     <!--<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>-->

app/translations/en.json

+{
+  "common": {
+    "appName": "MyApp",
+    "filter": "Filter",
+    "all": "All",
+    "new": "New",
+    "refresh": "Refresh",
+    "close": "Close",
+    "actions": "Actions",
+    "never": "Never",
+    "delete": "Delete",
+    "edit": "Edit",
+    "submit": "Submit",
+    "menu": "Menu",
+    "cancel": "Cancel",
+    "confirmDelete": "Confirm deletion",
+    "pagination": {
+      "of": "of",
+      "page": "Page:",
+      "rowsPerPage": "Items per page:"
+    },
+    "createdBy": "Created with ❤ by"
+  },
+  "home": {
+    "name": "Home",
+    "welcome": "Welcome Home!"
+  },
+  "pkguid": {
+    "name": "PkGuids",
+    "selectedItems": "{count} {count, select, 1{PkGuid} other{PkGuids}} selected",
+    "id": "Id",
+    "someText": "Some Text",
+    "someInt": "Some Int",
+    "createdAt": "Created At",
+    "updatedAt": "Updated At",
+    "deleteOne": "Do you really want to delete PkGuid '{text}'?",
+    "deleteMultiple": "Do you really want to delete {count} {count, select, 1{PkGuid} other{PkGuids}}?",
+    "edit": {
+      "defaultTitle": "Edit PkGuid",
+      "defaultToolbarTitle": "PkGuid ~ Edit",
+      "title": "Edit PkGuid '{text}'",
+      "toolbarTitle": "PkGuid ~ Edit ~ {text}"
+    },
+    "add": {
+      "defaultTitle": "New PkGuid",
+      "defaultToolbarTitle": "PkGuid ~ New"
+    }
+  }
+}

app/views/footer.html

     <div layout="column" layout-fill layout-align="top center">
         <div flex>
             <div class="col-lg-12">
-                <p>Copyright &copy; <a href="https://www.rthoni.com/">Robin Thoni</a> <span date-now="yyyy"></span></p>
+                <p>{{ 'common.createdBy' | translate }} <a href="https://www.rthoni.com/">Robin Thoni</a></p>
             </div>
         </div>
     </div>

app/views/home.html

 <div layout="column" layout-fill layout-align="top">
-    <p>Welcome Home</p>
+    <p>{{ 'home.welcome' | translate }}</p>
 </div>

app/views/pkguid.html

     <div flex>
         <md-toolbar class="md-table-toolbar md-default" ng-show="!isFilterShown && selected.length == 0">
             <div class="md-toolbar-tools">
-                <span>PkGuids</span>
+                <span>{{ 'pkguid.name' | translate }}</span>
                 <span flex></span>
-                <md-button class="md-icon-button" ng-click="showFilter(true)">
+                <md-button class="md-icon-button" ng-click="showFilter(true)" title="{{ 'common.filter' | translate }}">
                     <md-icon class="material-icons">filter_list</md-icon>
                 </md-button>
-                <md-button class="md-icon-button" ui-sref="pkguid_add">
+                <md-button class="md-icon-button" ui-sref="pkguid_add" title="{{ 'common.new' | translate }}">
                     <md-icon class="material-icons">add</md-icon>
                 </md-button>
-                <md-button class="md-icon-button" ng-click="getPkGuids()">
+                <md-button class="md-icon-button" ng-click="getPkGuids()" title="{{ 'common.refresh' | translate }}">
                     <md-icon class="material-icons">refresh</md-icon>
                 </md-button>
             </div>
                 <md-icon class="material-icons">search</md-icon>
                 <form autocomplete="off">
                     <md-input-container class="md-block" flex-gt-sm>
-                        <label>Filter</label>
+                        <label>{{ 'common.filter' | translate }}</label>
                         <input type="text" ng-model="query.filter" ng-model-options="{debounce: 500}" ng-change="getPkGuids()">
                     </md-input-container>
 
                 </form>
-                <md-button class="md-icon-button" ng-click="showFilter(false)">
+                <md-button class="md-icon-button" ng-click="showFilter(false)" title="{{ 'common.close' | translate }}">
                     <md-icon class="material-icons">close</md-icon>
                 </md-button>
             </div>
         </md-toolbar>
         <md-toolbar class="md-table-toolbar alternate" ng-show="selected.length > 0">
             <div class="md-toolbar-tools">
-                <span>{{selected.length}} {{selected.length > 1 ? 'PkGuids' : 'PkGuid'}} selected</span>
+                <span>{{ 'pkguid.selectedItems' | translate:{count:selected.length} }}</span>
                 <span flex></span>
                 <md-button class="md-icon-button" ng-click="askRemoveSelected()">
                     <md-icon class="material-icons">delete</md-icon>
             <table md-table md-row-select multiple ng-model="selected" md-progress="promise">
                 <thead md-head md-order="query.order" md-on-reorder="getPkGuids">
                 <tr md-row>
-                    <th md-column md-order-by="id"><span>Id</span></th>
-                    <th md-column md-order-by="someText"><span>Some Text</span></th>
-                    <th md-column md-order-by="someInt" md-numeric>Some Int</th>
-                    <th md-column md-order-by="createdAt">Created At</th>
-                    <th md-column md-order-by="updatedAt">Updated At</th>
-                    <th md-column>Actions</th>
+                    <th md-column md-order-by="id"><span>{{ 'pkguid.id' | translate }}</span></th>
+                    <th md-column md-order-by="someText"><span>{{ 'pkguid.someText' | translate }}</span></th>
+                    <th md-column md-order-by="someInt" md-numeric>{{ 'pkguid.someInt' | translate }}</th>
+                    <th md-column md-order-by="createdAt">{{ 'pkguid.createdAt' | translate }}</th>
+                    <th md-column md-order-by="updatedAt">{{ 'pkguid.updatedAt' | translate }}</th>
+                    <th md-column>{{ 'common.actions' | translate }}</th>
                 </tr>
                 </thead>
                 <tbody md-body>
                     <td md-cell>{{item.someText}}</td>
                     <td md-cell>{{item.someInt}}</td>
                     <td md-cell>{{item.createdAt | date : 'medium'}}</td>
-                    <td md-cell>{{item.updatedAt == null ? 'Never' : item.updatedAt | date : 'medium'}}</td>
+                    <td md-cell>{{item.updatedAt == null ? ('common.never' | translate ) : (item.updatedAt | date : 'medium')}}</td>
                     <td md-cell>
-                        <md-button class="md-icon-button" ui-sref="pkguid_edit({id: item.id, pkguid: item})">
+                        <md-button class="md-icon-button" ui-sref="pkguid_edit({id: item.id, pkguid: item})" title="{{ 'common.edit' | translate }}">
                             <md-icon class="material-icons">mode_edit</md-icon>
                         </md-button>
-                        <md-button class="md-icon-button" ng-click="askRemoveOne(item)">
+                        <md-button class="md-icon-button" ng-click="askRemoveOne(item)" title="{{ 'common.delete' | translate }}">
                             <md-icon class="material-icons">delete</md-icon>
                         </md-button>
                     </td>
         </md-table-container>
     </div>
 
-    <md-table-pagination class="col-xs-11" md-limit="query.limit" md-limit-options="[1, 5, 10, 15]" md-page="query.page" md-total="{{pkGuids.count}}" md-on-paginate="getPkGuids" md-page-select></md-table-pagination>
+    <md-table-pagination md-label="{of: '{{ 'common.pagination.of' | translate }}', page: '{{ 'common.pagination.page' | translate }}', rowsPerPage: '{{ 'common.pagination.rowsPerPage' | translate }}'}"
+                         class="col-xs-11" md-limit="query.limit" md-limit-options="[5, 10, 15]"
+                         md-page="query.page" md-total="{{pkGuids.count}}" md-on-paginate="getPkGuids" md-page-select></md-table-pagination>
 
     <div class="isa_error" ng-show="error != null">
         <i class="fa fa-times-circle"></i>

app/views/pkguidedit.html

         <form name="editForm">
             <div layout-gt-sm="row">
                 <md-input-container class="md-block" flex-gt-sm>
-                    <label>SomeText</label>
+                    <label>{{ 'pkguid.someText' | translate }}</label>
                     <input required ng-model="pkguid.someText">
                 </md-input-container>
 
                 <md-input-container class="md-block" flex-gt-sm>
-                    <label>Some Int</label>
+                    <label>{{ 'pkguid.someInt' | translate }}</label>
                     <input required type="number" ng-model="pkguid.someInt">
                 </md-input-container>
             </div>
                 <md-progress-linear ng-disabled="!running" md-mode="indeterminate"></md-progress-linear>
             </div>
             <div>
-                <md-button type="submit" ng-click="!editForm.$invalid && submit()">Submit</md-button>
+                <md-button type="submit" ng-click="!editForm.$invalid && submit()">{{ 'common.submit' | translate }}</md-button>
             </div>
             <div class="isa_error" ng-show="error != null">
                 <i class="fa fa-times-circle"></i>

app/views/sidebar.html

 <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
     <header class="nav-header" ss-style-color="{'background-color': 'primary.default'}">
         <md-toolbar class="md-theme-indigo">
-            <h1 class="md-toolbar-tools"><a ui-sref="home">MyApp</a></h1>
+            <h1 class="md-toolbar-tools"><a ui-sref="home">{{ 'common.appName' | translate }}</a></h1>
         </md-toolbar>
     </header>
     <div flex ng-controller="SideBarController">

app/views/toolbar.html

 <md-toolbar layout="row" ng-controller="ToolBarController">
     <div class="md-toolbar-tools">
-        <md-button class="md-icon-button" aria-label="Toolbar" ng-click="toggleSideBar()" hide-gt-md>
+        <md-button class="md-icon-button" aria-label="Toolbar" ng-click="toggleSideBar()" hide-gt-md title="{{ 'common.menu' | translate }}">
             <md-icon class="material-icons">menu</md-icon>
         </md-button>
         <h2>{{title}}</h2>

bower.json

     "components-font-awesome": "^4.7.0",
     "angular-material-sidenav": "^0.0.14",
     "material-design-icons": "^3.0.1",
-    "angular-translate": "^2.13.1"
+    "angular-translate": "^2.13.1",
+    "angular-translate-loader-static-files": "^2.13.1",
+    "angular-translate-interpolation-messageformat": "^2.13.1"
   }
 }

sdk/Business/apputils.business.js

     'use strict';
 
     angular.module('appSdk')
-        .factory('AppUtilsBusiness', ['$rootScope', function($rootScope) {
+        .factory('AppUtilsBusiness', ['$rootScope', '$translate', function($rootScope, $translate) {
 
             var AppUtilsBusiness = {};
 
 
             AppUtilsBusiness.setTitle = function(title)
             {
-                $rootScope.title = title + ' - MyApp';
+                $rootScope.title = title + ' - ' + AppUtilsBusiness.tr('app.name');
             };
 
             AppUtilsBusiness.setToolbarTitle = function(title)
                 $rootScope.$emit('toolbar.title', {title: title});
             };
 
+            AppUtilsBusiness.tr = function(id, data)
+            {
+                return $translate.instant(id, data);
+            };
+
             return AppUtilsBusiness;
         }]);
 })();