J.Pip J.Pip - 2 months ago 6
AngularJS Question

Argument 'fn' is not a function got string

I have a part in my angular application on which I've binded a controller,

since then I got the Argument 'fn' is not a function Error, can anyone look at my code and explain why I got that Error?

I would be very gratefull :)

html-markup:

<section class="col-lg-12" data-ng-controller="MessageController">
<fieldset>
<legend>{{ 'MESSAGES' | translate }}</legend>
</fieldset>
<div class="margin-left-15">
<ul class="list-style-button">
<li data-ng-repeat="message in MSG">{{ message }}</li>
</ul>
</div>
</section>


controller:

(function () {
'use strict';

var controllers = angular.module('portal.controllers');

controllers.controller('MessageController',['$scope','MessageService','$rootScope', function MessageController($scope, MessageService, $rootScope){
$rootScope.MSG = MessageService.getMessages();

$rootScope.$watch('MSG', function(newValue){
$scope.MSG = newValue;
});
}]);
}());


Service:

(function(){

'use strict';

var messageServices = angular.module('portal.services');

messageServices.factory('MessageService', ['MessageData','localStorageService', 'UserService'], function(MessageData, localStorageService, UserService){
return new MessageService(MessageData, localStorageService, UserService);
});

function MessageService(MessageData, localStorageService, UserService){
this.messageData = MessageData;
this.localStorageService = localStorageService;
this.userService = UserService;
}

MessageService.prototype.getMessages = function(){
var locale = this.userService.getUserinfoLocale();
var messages = this.localStorageService.get(Constants.key_messages+locale);
if(messages !== null && messages !== undefined){
return JSON.parse(messages);
} else {
return this.messageData.query({locale: locale}, $.proxy(function(data, locale){
this.save(Constants.key_messages+locale, JSON.stringify(data));
}, this));
}
};

MessageService.prototype.save = function(key, value){
this.localStorageService.add(key, value);
};

}());


data:

(function(){
'use strict';

var data = angular.module('portal.data');

data.factory('MessageData', function($resource){
return $resource(Constants.url_messages,{},{
query: {method: 'GET', params: {locale: 'locale'}, isArray: true}
});
});
}());


order of js files in html head:

<script src="js/lib/jquery-1.10.js"></script>
<script src="js/lib/angular.js"></script>
<script src="js/lib/angular-resource.js"></script>
<script src="js/lib/angular-translate.js"></script>
<script src="js/lib/angular-localstorage.js"></script>
<script src="js/lib/jquery-cookies.js"></script>
<script src="js/lib/bootstrap.js"></script>
<script src="js/portal.js"></script>

Answer

The problem was in using the 'wrong' syntax to create the service
instead of using:

messageServices.factory('MessageService', 
    ['MessageData','localStorageService', 'UserService'], 
    function(MessageData, localStorageService, UserService){
        return new MessageService(MessageData, localStorageService, UserService);
    }
);

I had to use:

messageServices.factory('MessageService', 
    ['MessageData','localStorageService', 'UserService', 
    function(MessageData, localStorageService, UserService){
        return new MessageService(MessageData, localStorageService, UserService);
    }
]);

I closed the array with parameters to soon, and since I'm still learning I didn't see it directly, anyhow I hope I can help others who stumble upon this.

Comments