當移動到單獨的文件時，角度服務不起作用

Question

我的演示MEAN-app（在Cloud9中使用它）中遇到問題：當我將服務移動到單獨的文件時，應用程序無法正常工作。 這工作：

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); 

然後，我打破它爲單獨的文件， 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 
    }; 
}; 

鏈接在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') 

靜快遞app.js：

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

出現以下錯誤：

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

我使用Google搜索文檔和教程，但無法弄清楚服務定義有什麼問題。

Answer 1

問題是你在聲明之前使用變量。

locatorData和geolocation被定義爲函數表達式。所以，他們在聲明的地方之前是未定義的。

你可以改變註冊服務和定義功能，因爲它是在原始文件的順序，這是包含了所有的代碼

var locatorData = function($http) { 
... 
}; 

angular 
.module('locatorApp') 
.service('locatorData', locatorData); 

或者你可以使用函數聲明（無功能的表達）

angular 
.module('locatorApp') 
.service('locatorData', locatorData); 

function locatorData($http) { 
... 
}; 

Answer 2

嘗試更改包含scrtip的順序。 看起來您正在呼叫包含服務呼叫的控制器，即使您並未將服務加載到該頁面。

// files in 'app_client' folder 
script(src='/app.js') 
script(src='/common/services/geolocation.service.js') 
script(src='/common/services/locatorData.service.js') 
script(src='/home/home.controller.js') 

Answer 3

這種方式綁定是通過宿主對象鏡像的，原始值不能單獨使用顯示模塊模式更新。

試試這個

geolocation.service.js：

angular 
.module('locatorApp') 
.service('geolocation', geolocation); 

function geolocation ($http) { 
    //include these four lines of code 
    var MirrorFunc = { 
    getPosition : getPosition 
}; 
    return MirrorFunc; 
    //till here 
    var geoAPIURL = 'http://ip-api.com/json/?fields=lat,lon,status'; 
    function getPosition (cbSuccess, cbError) { 
    $http.get(geoAPIURL).then(cbSuccess, cbError); 
    } 
}; 

同樣，對於locatorData.service.js：

angular 
.module('locatorApp') 
.service('locatorData', locatorData); 

function locatorData ($http) { 
    //include these four lines of code 
    var MirrorFunc = { 
    locationByCoords : locationByCoords 
}; 
return MirrorFunc ; 
//till here 
function locationByCoords (lat, lng) { 
    return $http.get('/api/locations?lng=' + lng + '&lat=' + lat); 
} 
}; 

您可以參觀約翰爸爸的角風格指南 https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#services