Used ABP language system in durandal template.

Author: hikalkan

Templates/All-In-One-Template/MySpaProject/MySpaProject.WebSpaAngular/App/Main/views/layout/header.cshtml

@@ -19,7 +19,7 @@
                 <li class="dropdown">
                     <a href="" data-toggle="dropdown"><i ng-class="vm.currentLanguage.icon"></i> <span>{{vm.currentLanguage.displayName}}</span> <b class="caret"></b></a>
                     <ul class="dropdown-menu">
-                        <li ng-repeat="language in vm.languages" ng-hide="vm.currentLanguage == language.name"><a href="/AbpLocalization/ChangeCulture?cultureName={{language.name}}"><i ng-class="language.icon"></i> {{language.displayName}}</a></li>
+                        <li ng-repeat="language in vm.languages" ng-hide="vm.currentLanguage.name == language.name"><a href="/AbpLocalization/ChangeCulture?cultureName={{language.name}}"><i ng-class="language.icon"></i> {{language.displayName}}</a></li>
                     </ul>
                 </li>
             </ul>

Templates/All-In-One-Template/MySpaProject/MySpaProject.WebSpaDurandal/App/Main/main.js

@@ -42,7 +42,8 @@ define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'durandal/vie
         app.configurePlugins({
             router: true,
             dialog: true,
-            widget: true
+            widget: true,
+            observable: true
         });
 
         app.start().then(function () {

Templates/All-In-One-Template/MySpaProject/MySpaProject.WebSpaDurandal/App/Main/viewmodels/layout.js

@@ -1,43 +1,13 @@
 define(['plugins/router'],
     function (router) {
 
-        var languages = [
-            {
-                name: 'tr',
-                displayName: 'Türkçe',
-                iconClass: 'famfamfam-flag-tr'
-            },
-            {
-                name: 'en',
-                displayName: 'English',
-                iconClass: 'famfamfam-flag-england'
-            }
-        ];
-
         return new function () {
             var that = this;
 
             that.router = router;
 
-            that.getLanguageFlagClass = function (lang) {
-                for (var i = 0; i < languages.length; i++) {
-                    if (lang.indexOf(languages[i].name) == 0) {
-                        return languages[i].iconClass;
-                    }
-                }
-
-                return '';
-            };
-
-            that.getLanguageName = function (lang) {
-                for (var i = 0; i < languages.length; i++) {
-                    if (lang.indexOf(languages[i].name) == 0) {
-                        return languages[i].displayName;
-                    }
-                }
-
-                return '';
-            };
+            that.languages = abp.localization.languages;
+            that.currentLanguage = abp.localization.currentLanguage;
 
             that.activate = function () {
                 router.map([

Templates/All-In-One-Template/MySpaProject/MySpaProject.WebSpaDurandal/App/Main/views/layout.cshtml

@@ -17,10 +17,9 @@
             </ul>
             <ul class="nav navbar-nav navbar-right">
                 <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="famfamfam-flag-tr" data-bind="css: getLanguageFlagClass(abp.localization.currentCulture.name)"></i> <span data-bind="text: getLanguageName(abp.localization.currentCulture.name)"></span> <b class="caret"></b></a>
-                    <ul class="dropdown-menu">
-                        <li data-bind="visible: !abp.localization.isCurrentCulture('tr')"><a href="/AbpLocalization/ChangeCulture?cultureName=tr"><i class="famfamfam-flag-tr"></i> Türkçe</a></li>
-                        <li data-bind="visible: !abp.localization.isCurrentCulture('en')"><a href="/AbpLocalization/ChangeCulture?cultureName=en"><i class="famfamfam-flag-england"></i> English</a></li>
+                    <a href="" data-toggle="dropdown"><i data-bind="css: currentLanguage.icon"></i> <span data-bind="text: currentLanguage.displayName"></span> <b class="caret"></b></a>
+                    <ul class="dropdown-menu" data-bind="foreach: languages">
+                        <li data-bind="visible: $parent.currentLanguage.name != name"><a data-bind="attr: { href: '/AbpLocalization/ChangeCulture?cultureName=' +  name }"><i data-bind="css: icon"></i> <span data-bind="text: displayName"></span></a></li>
                     </ul>
                 </li>
             </ul>