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中的

statics：

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

出现以下错误：

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

我用谷歌搜索了文档和教程，但无法弄清楚服务定义有什么问题。

Answer 1

尝试更改include scrtipt的顺序。即使您没有将服务加载到页面，看起来您正在调用包含服务调用的控制器。

// 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 2

问题是您在声明之前使用变量。

locatorData和geolocation被定义为函数表达式。因此，在声明之前它们是未定义的。

您可以更改注册服务的顺序，并定义原始文件中包含所有代码的功能

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

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

或者你可以使用函数声明（不是函数表达式）

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

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

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

您可以访问John Papa的角度风格指南 https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#services

移动到单独的文件时，角度服务不起作用

3 个答案: