控制器之间通过服务共享数据（AngularJS）

Question

I want to build a site, which supports several languages. So I wanted to use AngularJS Controllers to controll the view. I have written some script, but I get the following error: TypeError: Cannot read property 'getLang' of undefined

Here is my AngularJS code:

var myApp = angular.module('myApp',[]);
myApp.service('languageService' , function() {
    var language = 'en';
    return {
        getLang: function() {
            return language;
        },

        setLang: function(ind) {
              if (ind == 0) {
                  language = 'en';
              } else if (ind == 1) {
                  language = 'ru';
              }
        }
    };
})

myApp.controller('ChangeLangCtrl', ['$scope', function($scope, languageService) {
     $scope.changeLang = function(ind) {
        languageService.setLang(ind);
     }
}])

myApp.controller('NaviCtrl', ['$scope', function($scope, languageService) {
    var currentLang = languageService.getLang();
    if (currentLang == 'en') {
        $scope.menu = ['About Us', 'Service', 'Contacts'];
    } else {
        $scope.menu = ['О нас', 'Наши Услуги', 'Связь с нами']
    }
}])

So what could be my mistake? I mean, I initialize the language variable with en at the beginning. So why is the getLang() function then undefined?

Answer 1

['$scope', function($scope, languageService) 

You didm;t specify languageService

It must be

['$scope', 'languageService', function($scope, languageService) 

That's the reason why you are getting languageService.getLang is undefined because you've not specified any value for languageService so getLang doesn't exit.

So your code will become:

myApp.controller('ChangeLangCtrl', [['$scope', 'languageService', 
function($scope, languageService)  {
     $scope.changeLang = function(ind) {
        languageService.setLang(ind);
     }
}])

myApp.controller('NaviCtrl', ['$scope', 'languageService', function($scope, languageService)  {
    var currentLang = languageService.getLang();
    if (currentLang == 'en') {
        $scope.menu = ['About Us', 'Service', 'Contacts'];
    } else {
        $scope.menu = ['О нас', 'Наши Услуги', 'Связь с нами']
    }
}])

Answer 2

You forget to inject languageService as a dependency in your controller,thats why its throwing that error.

Try this,

var myApp = angular.module('myApp',[]);
myApp.service('languageService' , function() {
    var language = 'en';
    return {
        getLang: function() {
            return language;
        },

        setLang: function(ind) {
              if (ind == 0) {
                  language = 'en';
              } else if (ind == 1) {
                  language = 'ru';
              }
        }
    };
})

myApp.controller('ChangeLangCtrl', ['$scope','languageService', function($scope, languageService) {
     $scope.changeLang = function(ind) {
        languageService.setLang(ind);
     }
}])

myApp.controller('NaviCtrl', ['$scope','languageService', function($scope, languageService) {
    var currentLang = languageService.getLang();
    if (currentLang == 'en') {
        $scope.menu = ['About Us', 'Service', 'Contacts'];
    } else {
        $scope.menu = ['О нас', 'Наши Услуги', 'Связь с нами']
    }
}])