I'm rebuilding a basic webpage using AngularJS, and want to implement changing languages when clicking an icon. So far I've made a service called 'langService'
, that has functions to set and get language. I then pass the service a value (say 'eng' or 'slo') with the set language function when clicking an icon on the page.
In my controllers, I'm passing in the 'langService'
, then binding the factory to $scope
like this $scope.lng = Language;
in order to call it from my views. In my views I then build 2 different pages from JSON objects, and display the using ng-show
, according to the variable set in the langService
.
It works. But it produces a lot of duplication in code, I need to pass the langService
to every controller, and bind to scope again. How can I make it simpler?
This is an example from my navbar:
HTML:
<div id="navbar" ng-controller="navbarController">
<ul ng-show="lng.getLanguage()==='slo'">
<li class="dropdown" ng-repeat="menu in slo"><a ng-href="{{ menu.url }}">{{ menu.main }}<span ng-class="menu.icon"></span></a>
<ul class="drop-nav">
<li ng-repeat="submenu in menu.submenu[0]"><a ng-href="{{ submenu.url }}">{{ submenu.text }}</a></li>
</ul>
</li>
<li><a href="" ng-click="changeLanguage('eng')"><img src="images/EN.gif"></a></li>
</ul>
<ul ng-show="lng.getLanguage()==='eng'">
<li class="dropdown" ng-repeat="menu in eng"><a href="{{ menu.url }}">{{ menu.main }}<span ng-class="menu.icon"></span></a>
<ul class="drop-nav">
<li ng-repeat="submenu in menu.submenu[0]"><a ng-href="{{ submenu.url }}">{{ submenu.text }}</a></li>
</ul>
</li>
<li><a href="" ng-click="changeLanguage('slo')"><img src="images/SLO.gif"></a></li>
</ul>
</div>
Service:
angular.module('langService', [])
.factory('Language', function() {
var language = 'slo';
function setLanguage(lang) {
//...optional logic
language = lang;
}
function getLanguage() {
return language;
}
return {
setLanguage: setLanguage,
getLanguage: getLanguage
};
});
Controller:
ZICApp.controller('navbarController', function ($scope, Language) {
//bind language object from langService
$scope.lng = Language;
$scope.changeLanguage = function(lang) {
Language.setLanguage(lang);
};
$scope.slo = [
{
main: "IJS",
url: "https://www.ijs.si/ijsw"
},
{
main: "ZIC",
icon: "glyphicon glyphicon-triangle-bottom",
submenu: [{
one: {
text: "predstavitev",
url: "#/"
},
two: {
text: "osebje",
url: "#/osebje"
}
}]
},
{
main: "knjižnica",
icon: "glyphicon glyphicon-triangle-bottom",
submenu: [{
one: {
text: "tiskane revije",
url: ""
},
two: {
text: "elektronske revije",
url: ""
},
three: {
text: "baze podatkov",
url: ""
},
four: {
text: "katalog(COBISS)",
url: "http://www.cobiss.si/scripts/cobiss?command=CONNECT&base=50108"
}
}]
},
{
main: "storitve",
icon: "glyphicon glyphicon-triangle-bottom",
submenu: [{
one: {
text: "bibliografije",
url: ""
},
two: {
text: "medknjižnična izposoja",
url: ""
},
three: {
text: "fotokopirnica",
url: ""
}
}]
}
];
$scope.eng = [{
main: "IJS"
},
{
main: "ZIC",
icon: "glyphicon glyphicon-triangle-bottom",
submenu: [{
one: {
text: "introduction",
url: "#/"
},
two: {
text: "staff",
url: "#/osebje"
}
}]
},
{
main: "library",
icon: "glyphicon glyphicon-triangle-bottom",
submenu: [{
one: {
text: "printed journals",
url: ""
},
two: {
text: "electronic journals",
url: ""
},
three: {
text: "databases",
url: ""
},
four: {
text: "catalogue(COBISS)",
url: "http://www.cobiss.si/scripts/cobiss?command=CONNECT&base=50108"
}
}]
},
{
main: "services",
icon: "glyphicon glyphicon-triangle-bottom",
submenu: [{
one: {
text: "bibliographies",
url: ""
},
two: {
text: "interlibrary loan",
url: ""
},
three: {
text: "copy room",
url: ""
}
}]
}];
});
The rest of the views are built in mostly the same way. If you want to look at the whole project here's the GitHub Repo and the page in action.