Argument 'fn' is not a function got string

Question

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 1

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.