在angular v 1.2.19中使用服务的问题

Issue using services in angular v 1.2.19

本文关键字：服务 问题 angular      更新时间：2023-09-26

我收到这个错误：

TypeError: Cannot read property 'prototype' of undefined
at Object.instantiate (http://localhost:3000/angular/angular.min.js:35:144)
at Object.<anonymous> (http://localhost:3000/angular/angular.min.js:35:435)
at Object.d [as invoke] (http://localhost:3000/angular/angular.min.js:35:36)
at http://localhost:3000/angular/angular.min.js:36:288
at c (http://localhost:3000/angular/angular.min.js:34:305)
at d (http://localhost:3000/angular/angular.min.js:35:6)
at Object.instantiate (http://localhost:3000/angular/angular.min.js:35:165)
at $get (http://localhost:3000/angular/angular.min.js:67:421)
at link (http://localhost:3000/lib/angular-route.min.js:7:248)
at K (http://localhost:3000/angular/angular.min.js:54:390)

我已经检查过我的getter/setter语法很多次了，因为我看到其他人也有同样的问题。据我所知，我的是正确的。这是我的代码：主模块app.js:

angular.module('loc8rApp', ['ngRoute']);
function config ($routeProvider){
  $routeProvider 
.when('/', {
  templateUrl: 'home/home.view.html',
  controller: 'homeCtrl',
  controllerAs: 'vm'
})
.otherwise({redirectTo: '/'});
};
angular
  .module('loc8rApp')
  .config(['$routeProvider', config]);

服务loc8rData.js:

angular
  .module('loc8rApp')
  .service('loc8rData', loc8rData);
var loc8rData = function ($http) {
  var locationByCoords = function (lat, lng) {
    return $http.get('/api/locations?lng=' + lng + '&lat=' + lat + '&maxDistance=20');
  };
  return {
locationByCoords : locationByCoords
  };
}

第二项服务：geolocation.services.js:

angular
  .module('loc8rApp')
  .service('geolocation', geolocation);
var geolocation = function () {
  var getPosition = function (cbSuccess, cbError, cbNoGeo) {
    if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(cbSuccess, cbError);
}
else {
  cbNoGeo();
}
 };
      return {
    getPosition : getPosition
  };
}

控制器homeCtrl.js:

angular
  .module('loc8rApp')
  .controller('homeCtrl', homeCtrl);
function homeCtrl ($scope, loc8rData, geolocation) { 
  var vm = this;
  vm.pageHeader = {
    title: 'Loc8r',
    strapline: 'Find places to work with wifi near you!'
  };
  vm.sidebar = {
    content: "Looking for wifi and a seat? Etc etc"
  };
  vm.message = "Checking your location";
  vm.getData = function (position) { 
var lat = position.coords.latitude, 
    lng = position.coords.longitude; 
vm.message = "Searching for nearby places"; 
loc8rData.locationByCoords(lat, lng) 
  .success(function(data) { 
    vm.message = data.length > 0 ? "" : "No locations found nearby";
    vm.data = { locations: data }; 
    }) 
  .error(function (e) { 
    vm.message = "Sorry, something's gone wrong"; 
    }); 
  }; 
  vm.showError = function (error) { 
    $scope.$apply(function() { 
      vm.message = error.message; 
    }); 
  }; 
  vm.noGeo = function () { 
$scope.$apply(function() { 
  vm.message = "Geolocation is not supported by this browser."; 
}); 
  }; 
  geolocation.getPosition(vm.getData,vm.showError,vm.noGeo); 
}

在Layout.jade中，我有：

 html(ng-app='loc8rApp')

体内：

    .containter
      div(ng-view)
        block content

然后我让我的脚本与正文对齐

body


script(src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')
script(src='/angular/angular.min.js')
script(src='/lib/angular-route.min.js')
script(src='/bootstrap/js/bootstrap.min.js')
script(src='/javascript/validation.js')
script(src='/app.js')
script(src='/common/services/loc8rData.js')
script(src='/common/services/geolocation.service.js')
script(src='/home/homeCtrl.js')

HTML：

<div id="banner" class="page-header">
  <div class="row">
    <div class="col-lg-6"></div>
    <h1>{{ vm.pageHeader.title }} 
      <small>{{ vm.pageHeader.strapline }}</small> 
    </h1>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 col-sm-8">
    <label for="filter">Filter results</label>
    <input id="filter" type="text", name="filter", ng-model="textFilter">
    <div class="error">{{ vm.message }}</div>
    <div class="row list-group">
      <div class="col-xs-12 list-group-item" ng-repeat="location in   vm.data.locations | filter : textFilter">
      <h4>
        <a href="/location/{{ location._id }}">{{ location.name }}</a>
        <small class="rating-stars" rating-stars rating="location.rating">    </small>
        <span class="badge pull-right badge-default">{{ location.distance }}  </span>
      </h4>
      <p class="address">{{ location.address }}</p>
      <p>
            <span class="label label-warning label-facility" ng-  repeat="facility in location.facilities">
        {{ facility }}
      </span>
    </p>
  </div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
      <p class="lead">{{ vm.sidebar.content }}</p> 
</div>
</div>

我到处找，我的朋友也是。要知道这是一篇很长的帖子，但如果你愿意，那就太酷了。感谢

您将两个函数声明为变量，但在定义它们之前就使用了它们。例如：

angular.module('loc8rApp').service('geolocation', geolocation);
var geolocation = function () {
    //....
}

在这种情况下，当第一行尝试使用函数geolocation时，它仍然是未定义的。如果您使用其他表示法来声明函数，它将起作用：

angular.module('loc8rApp').service('geolocation', geolocation);
function geolocation() {
    //....
}

这是因为以这种方式声明的函数在代码的其余部分之前进行处理。

同样的事情也适用于loc8rData函数。

前面的答案完全正确。这是因为在Javascript中吊装。变量声明和和函数声明被移到各自作用域的顶部，但变量赋值没有。因此，如果它是函数声明，而不是像示例中那样的函数表达式，那么它就会起作用。

var x; // variable declaration
x = 3; // variable assignment
var geolocation = function () { // function expression
//....
}
function geolocation() { // function declaration
//....
}

例如，在var x=3中；Javascript引擎将其视为两个独立的语句。var x；编译时间和x=3；在执行时。因此，函数表达式声明被挂起，但函数表达式的赋值没有被挂起。

相关文章：