using angular-gettext library first and example implementation

dependencies in bower.json and package.json
edit grunt to extract and complie po files
configure angular gettext in app.js

Gruntfile.js

@@ -77,6 +77,25 @@ module.exports = function (grunt) {
                     atBegin: true
                 }
             }
+        },
+        nggettext_extract: {
+            pot: {
+                files: {
+                    'po/template.pot': ['app/**/*.html']
+                }
+            },
+        },
+        nggettext_compile: {
+            all: {
+                files: {
+                    'dist/shared/translations.js': ['po/*.po']
+                }
+            },
+            dev: {
+                files: {
+                    'app/shared/translations.js': ['po/*.po']
+                }
+            }
         }
     });
 
@@ -93,10 +112,21 @@ module.exports = function (grunt) {
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-bower-task');
     grunt.loadNpmTasks('grunt-karma');
+    grunt.loadNpmTasks('grunt-angular-gettext');
+
 
+    // todo: reorganize dev and other tasks
     grunt.registerTask('dev', ['bower', 'connect:server', 'watch:dev']);
     grunt.registerTask('test', ['bower', 'jshint', 'karma:continuous']);
     grunt.registerTask('minified', ['bower', 'connect:server', 'watch:min']);
-    grunt.registerTask('default', ['bower', 'html2js:dist', 'concat:dist',  'concat:components', 'uglify:dist']);
+    grunt.registerTask('default', [
+        'bower',
+        'html2js:dist',
+        'concat:dist',
+        'concat:components',
+        'uglify:dist',
+        'nggettext_extract',
+        'nggettext_compile'
+    ]);
 
 };
\ No newline at end of file

app/app.js

@@ -18,7 +18,8 @@ var app = angular.module(
         'zaerp.auth',
         'zaerp.staff',
         'zaerp.student',
-        'schemaForm'
+        'schemaForm',
+        'gettext'
     ]).
 /**
  *  lazyload modules with oclazyload

app/app_routes.js

@@ -64,4 +64,7 @@ app.config(['$routeProvider', function ($routeProvider) {
 }).config(['$httpProvider', function($httpProvider) {
     // to send cookies CORS
     $httpProvider.defaults.withCredentials = true;
-}]);
\ No newline at end of file
+}]).run(function (gettextCatalog) {
+    gettextCatalog.setCurrentLanguage('tr');
+    gettextCatalog.debug = true;
+});
\ No newline at end of file

app/index.html

@@ -37,9 +37,9 @@
         </div>
         <div id="navbar" class="navbar-collapse collapse">
             <ul class="nav navbar-nav navbar-right">
-                <li><a href="#/dashboard">Dashboard</a></li>
-                <li><a href="#/login">Login</a></li>
-                <li><a href="javascript:void(0);" logout>Logout</a></li>
+                <li><a href="#/dashboard" translate>Dashboard</a></li>
+                <li><a href="#/login"translate>Login</a></li>
+                <li><a href="javascript:void(0);" logout translate>Logout</a></li>
             </ul>
             <form class="navbar-form navbar-right">
                 <input type="text" class="form-control" placeholder="Search...">
@@ -53,8 +53,9 @@
             <ul class="nav nav-sidebar">
                 <!--<li active-link="active"><a href="#/students">Students</a></li>-->
                 <!--<li active-link="active"><a href="#/student/add">New Student</a></li>-->
-                <li active-link="active"><a href="#/staffs">Staffs</a></li>
-                <li active-link="active"><a href="#/staff/add">New Staff</a>
+                <li active-link="active"><a href="#/staffs" translate>Staffs
+                </a></li>
+                <li active-link="active"><a href="#/staff/add" translate>New Staff</a>
                 </li>
                 <!--<li active-link="active"><a href="#/input_types">Types</a></li>-->
             </ul>
@@ -94,6 +95,8 @@
 <!--<script type="text/javascript"-->
 <!--src="bower_components/angular-schema-form-datepicker/"></script>-->
 <script type="text/javascript" src="bower_components/angular-schema-form-datepicker/bootstrap-datepicker.js"></script>
+<script src="bower_components/angular-gettext/dist/angular-gettext.min.js"></script>
+<script src="shared/translations.js"></script>
 
 <script src="app.js"></script>
 <script src="app_routes.js"></script>

bower.json

@@ -14,7 +14,8 @@
     "bootstrap": "3.3.4",
     "angular-schema-form": "0.8.3",
     "angular-schema-form-datepicker": "0.4.0",
-    "oclazyload": "1.0.1"
+    "oclazyload": "1.0.1",
+    "angular-gettext": "2.1.0"
   },
   "resolutions": {
     "angular": "1.3.17"

package.json

@@ -29,7 +29,8 @@
     "grunt-contrib-concat": "~0.4.0",
     "grunt-contrib-watch": "~0.6.1",
     "grunt-bower-task": "~0.3.4",
-    "grunt-karma": "~0.8.0"
+    "grunt-karma": "~0.8.0",
+    "grunt-angular-gettext": "~2.1.0"
   },
   "scripts": {
     "postinstall": "bower install",

po/tr.po

+msgid ""
+msgstr ""
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Project-Id-Version: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"X-Generator: Poedit 1.8.2\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"Language: tr\n"
+
+#: app/index.html:40
+msgid "Dashboard"
+msgstr "Panel"
+
+#: app/index.html:41
+msgid "Login"
+msgstr "Giriş"
+
+#: app/index.html:42
+msgid "Logout"
+msgstr "Çıkış"
+
+#: app/index.html:58
+msgid "New Staff"
+msgstr "Yeni Personel"
+
+#: app/index.html:56
+msgid "Staffs"
+msgstr "Personeller"