自定义AngularJS服务的隐秘失败

时间：2017-12-26 00:31:09

标签： javascript angularjs mean-stack angularjs-service

我正在尝试跟随大多数好的但已过时的书使用MongoDB，Express，AngularJS和Node 获取MEAN，并且我正在使用调用替换控制器中的硬连线数据的部分到我已经构建的自定义API并且肯定正在工作，由curl测试确定。在我实现此更改之前，页面看起来像这样：

functional

现在看起来像这样：

non-functional

以下是有问题的来源：

var _isNumeric = function (n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
};

var formatDistance = function () {
  return function (distance) {
    var roundedDistance, unit;

    if (distance && _isNumeric(distance)) {
      if (distance > 1) {
        roundedDistance = parseFloat(distance).toFixed(1);
        unit = 'km';
      } else {
        roundedDistance = parseInt(distance * 1000, 10);
        unit = 'm';
      }

      return roundedDistance + ' ' + unit;
    } else {
      return '?';
    }
  };
};

var ratingStars = function () {
  return {
    scope: {
      thisRating: '=rating'
    },
    templateUrl: '/angularjs/rating-stars.html'
  };
};

var loc8rData = function ($http) {
  return $http.get('/api/locations?lng=-0.79&lat=51.3&maxDistance=25');
};

var locationListCtrl = function ($scope, loc8rData) {
  $scope.message = 'Searching for nearby places...';

  loc8rData.success(function (data) {
    $scope.message = data.length > 0 ? '' : 'No locations found';
    $scope.data = { locations: data };
  }).error(function (err) {
    $scope.message = 'Sorry, something\'s gone wrong.';
    console.log(err);
  });
};

angular
  .module('loc8r', [])
  .controller('locationListCtrl', locationListCtrl)
  .filter('formatDistance', formatDistance)
  .directive('ratingStars', ratingStars)
  .service('loc8rData', loc8rData);

在控制台中发现以下不是非常有用的警告和错误：

[Exception... "Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED) [nsIMessageSender.sendAsyncMessage]"  nsresult: "0xc1f30001 (NS_ERROR_NOT_INITIALIZED)"  location: "JS frame :: resource://gre/modules/ExtensionUtils.jsm :: sendAsyncMessage :: line 505"  data: no]  (unknown)
[Exception... "Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED) [nsIMessageSender.sendAsyncMessage]"  nsresult: "0xc1f30001 (NS_ERROR_NOT_INITIALIZED)"  location: "JS frame :: resource://gre/modules/ExtensionUtils.jsm :: sendAsyncMessage :: line 505"  data: no]  (unknown)
Invalid chrome URI: /
Cannot send function call result: other side closed connection (call data: ({path:"tabs.remove", args:[23]}))
[Exception... "Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED) [nsIMessageSender.sendAsyncMessage]"  nsresult: "0xc1f30001 (NS_ERROR_NOT_INITIALIZED)"  location: "JS frame :: resource://gre/modules/ExtensionUtils.jsm :: sendAsyncMessage :: line 505"  data: no]  (unknown)
Loading failed for the <script> with source “https://js-sec.indexww.com/ht/p/185901-159836282584097.js”.  ask:171
Attempt to set a forbidden header was denied: Connection  805599773-lcs_client_bin.js:99:385
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!  ask
Error: Could not establish connection. Receiving end does not exist.  undefined
Attempt to set a forbidden header was denied: Connection  805599773-lcs_client_bin.js:99:385
Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.  (unknown)
[Exception... "Component returned failure code: 0x80004002 (NS_NOINTERFACE) [nsIWebProgress.DOMWindow]"  nsresult: "0x80004002 (NS_NOINTERFACE)"  location: "JS frame :: chrome://browser/content/browser.js :: onStateChange :: line 5174"  data: no]  (unknown)
NS_NOINTERFACE: Component returned failure code: 0x80004002 (NS_NOINTERFACE) [nsIWebProgress.DOMWindow]  WebNavigationContent.js:220
[Exception... "Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED) [nsIMessageSender.sendAsyncMessage]"  nsresult: "0xc1f30001 (NS_ERROR_NOT_INITIALIZED)"  location: "JS frame :: resource://gre/modules/ExtensionUtils.jsm :: sendAsyncMessage :: line 505"  data: no]  (unknown)
[Exception... "Component returned failure code: 0x80004002 (NS_NOINTERFACE) [nsIWebProgress.DOMWindow]"  nsresult: "0x80004002 (NS_NOINTERFACE)"  location: "JS frame :: chrome://browser/content/browser.js :: onStateChange :: line 5174"  data: no]  (unknown)
NS_NOINTERFACE: Component returned failure code: 0x80004002 (NS_NOINTERFACE) [nsIWebProgress.DOMWindow]  WebNavigationContent.js:220
Loading failed for the <script> with source “blob:https://github.com/b435c6f8-48e4-4b26-a514-f8afc76aad14”.  loc8r:1
Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src https://assets-cdn.github.com”). Source: ;!function(){var t=0,e=function(t,e){ret....  loc8r:1
Content Security Policy: The page’s settings blocked the loading of a resource at blob:https://github.com/b435c6f8-48e4-4b26-a514-f8afc76aad14 (“script-src https://assets-cdn.github.com”).  (unknown)
[Exception... "Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED) [nsIMessageSender.sendAsyncMessage]"  nsresult: "0xc1f30001 (NS_ERROR_NOT_INITIALIZED)"  location: "JS frame :: resource://gre/modules/ExtensionUtils.jsm :: sendAsyncMessage :: line 505"  data: no]  (unknown)
TypeError: this.transport is null[Learn More]  main.js:1514:5
[Exception... "Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED) [nsIMessageSender.sendAsyncMessage]"  nsresult: "0xc1f30001 (NS_ERROR_NOT_INITIALIZED)"  location: "JS frame :: resource://gre/modules/ExtensionUtils.jsm :: sendAsyncMessage :: line 505"  data: no]  (unknown)

硬连线版本与新的失败版本之间的区别可能更有帮助：

diff --git a/public/angularjs/loc8r.js b/public/angularjs/loc8r.js
index 467f5c7..b5f800e 100644
--- a/public/angularjs/loc8r.js
+++ b/public/angularjs/loc8r.js
@@ -31,35 +31,25 @@ var ratingStars = function () {
   };
 };

-var locationListCtrl = function ($scope) {
-  $scope.data = {
-    locations: [{
-       'name': 'Starcups',
-       'address': '125 High Street, Reading, RG6 1PS',
-       'rating': 3,
-      'facilities': ['Hot Drinks', 'Food', 'Premium Wi-Fi'],
-      'distance': 14.6,
-      '_id': '5a27ab691c5e0a989c0634da'
-    }, {
-       'name': 'Café Hero',
-       'address': '125 High Street, Reading, RG6 1PS',
-       'rating': 4,
-      'facilities': ['Hot Drinks', 'Food', 'Premium Wi-Fi'],
-      'distance': 14.6,
-      '_id': '5a2cdcc9877c0bf8cdf47355'
-    }, {
-       'name': 'Burger Queen',
-       'address': '125 High Street, Reading, RG6 1PS',
-       'rating': 2,
-      'facilities': ['Food', 'Premium Wi-Fi'],
-      'distance': 14.6,
-      '_id': '5a2ce5ae877c0bf8cdf47358'
-    }]
-  };
+var loc8rData = function ($http) {
+  return $http.get('/api/locations?lng=-0.79&lat=51.3&maxDistance=25');
+};
+
+var locationListCtrl = function ($scope, loc8rData) {
+  $scope.message = 'Searching for nearby places...';
+
+  loc8rData.success(function (data) {
+    $scope.message = data.length > 0 ? '' : 'No locations found';
+    $scope.data = { locations: data };
+  }).error(function (err) {
+    $scope.message = 'Sorry, something\'s gone wrong.';
+    console.log(err);
+  });
 };

 angular
   .module('loc8r', [])
   .controller('locationListCtrl', locationListCtrl)
   .filter('formatDistance', formatDistance)
-  .directive('ratingStars', ratingStars);
+  .directive('ratingStars', ratingStars)
+  .service('loc8rData', loc8rData);

很明显，当我创建这项服务时，我做错了什么，但是查看较新的AngularJS教程材料似乎根本没有帮助我。

如果你很好奇，可以在这里找到整个shebang（请注意，运行它需要从转储中恢复数据库）：

https://github.com/readyready15728/loc8r

编辑：我已经弄清楚出了什么问题。 Firefox浏览器控制台现在有一个很棒的，巧妙的默认设置，要求我明确地显示console.log()输出。一旦我这样做，我就可以更有效地开始调试了。这就解决了这个问题：

var locationListCtrl = function ($scope, loc8rData) {
  $scope.message = 'Searching for nearby places...';

  loc8rData.then(function (response) {
    $scope.message = response.data.length > 0 ? '' : 'No locations found';
    $scope.data = { locations: response.data };
  }, function (err) {
    $scope.message = 'Sorry, something\'s gone wrong.';
    console.log(err);
  });
};

简单地说，我使用了.then()而不是.success()和.error()，并且意识到$http.get()返回的对象不是数据，而是将数据作为成员。

0 个答案:

没有答案
相关问题
最新问题