angularjs - Angular services don't work when moved to separate files -

i have problem demo mean-app (working in cloud9): app fails work when move services separate files. works:

angular.module('locatorapp', [])  var locationlistctrl = function($scope, locatordata, geolocation) {   $scope.getdata = function(position) {     var lat = position.data.lat;     var lng = position.data.lon;     locatordata.locationbycoords(lat,lng)       .then(function(data) {         $scope.data = {locations: data.data};       })       .catch(function(error) {         console.log(error);       });   };    geolocation.getposition($scope.getdata); };  var locatordata = function($http) {   var locationbycoords = function (lat, lng) {     return $http.get('/api/locations?lng=' + lng + '&lat=' + lat);   };   return {     locationbycoords : locationbycoords   }; };  var geolocation = function($http) {   var geoapiurl = 'http://ip-api.com/json/?fields=lat,lon,status';   var getposition = function(cbsuccess, cberror) {       $http.get(geoapiurl).then(cbsuccess, cberror);   };   return {     getposition : getposition   }; };  angular   .module('locatorapp')   .controller('locationlistctrl', locationlistctrl)   .service('locatordata', locatordata)   .service('geolocation', geolocation); 

then break separate files, app.js:

angular   .module('locatorapp', ['ngroute'])   .config(['$routeprovider', config]);  function config($routeprovider) {   $routeprovider     .when('/', {       templateurl: 'home/home.view.html',       controller: 'homectrl',       controlleras: 'vm'     })     .otherwise({redirectto: '/'}); } 

home.controller.js:

angular   .module('locatorapp')   .controller('homectrl', homectrl);  function homectrl(locatordata, geolocation) {   var vm = this;   vm.pageheader = {     title: 'locator',   };    vm.getdata = function(position) {     var lat = position.data.lat;     var lng = position.data.lon;     locatordata.locationbycoords(lat,lng)       .then(function(data) {         vm.data = {locations: data.data};       })       .catch(function(error) {         console.log(error);       });   };    geolocation.getposition(vm.getdata); } 

geolocation.service.js:

angular  .module('locatorapp')  .service('geolocation', geolocation);  var geolocation = function($http) {   var geoapiurl = 'http://ip-api.com/json/?fields=lat,lon,status';   var getposition = function(cbsuccess, cberror) {       $http.get(geoapiurl).then(cbsuccess, cberror);   };   return {     getposition : getposition   }; }; 

locatordata.service.js:

angular  .module('locatorapp')  .service('locatordata', locatordata);  var locatordata = function($http) {   var locationbycoords = function(lat, lng) {     return $http.get('/api/locations?lng=' + lng + '&lat=' + lat);   };   return {     locationbycoords : locationbycoords   }; }; 

links in layout.jade:

// files in 'public' folder script(src='/angular/angular.min.js') script(src='/lib/angular-route.min.js')  // files in 'app_client' folder  script(src='/app.js') script(src='/home/home.controller.js') script(src='/common/services/geolocation.service.js') script(src='/common/services/locatordata.service.js') 

statics in express app.js:

app.use(express.static(path.join(__dirname, 'public'))); app.use(express.static(path.join(__dirname, 'app_client'))); 

the following error appears:

error: [ng:areq] http://errors.angularjs.org/1.6.1/ng/areq?p0=fn&p1=not%20ananunction%2c%20got%20undefined

i googled docs , tutorials, can't figure out what's wrong services definitions.

the issue use variables before declarations.

locatordata , geolocation defined function expressions. so, undefined before place of declaration.

you change order of registering service , defining function in original file, contained code

var locatordata = function($http) { ... };  angular  .module('locatorapp')  .service('locatordata', locatordata); 

or use function declaration (not function expression)

angular  .module('locatorapp')  .service('locatordata', locatordata);  function locatordata($http) { ... };