Chrome 上的未捕获对象错误。 Angularjs + ngResource答案

【问题标题】：Uncaught object error on Chrome. Angularjs + ngResourceChrome 上的未捕获对象错误。 Angularjs + ngResource
【发布时间】：2018-05-23 20:48:09
【问题描述】：

在 Chrome 上使用调试时，它一直显示此错误：未捕获的对象，在 angular.js:36 上。

我做错了什么？：/

感谢您的帮助:)

模块和资源对象 (services.js)

var services = angular.module('ngdemo.services', ['ngResource']);

services.factory('ProvidersFactory', function ($resource) {
    return $resource('http://devfz.azurewebsites.net/api/providers/', {}, {
        query: { method: 'GET', isArray: true },
    })
});

控制器（controller.js）

var app = angular.module('ngdemo.controllers', []);

app.controller('ProviderListCtrl', ['$scope', 'ProvidersFactory', '$location',
    function ($scope, ProvidersFactory, $location) {
        $scope.providers = ProvidersFactory.query();
    }]);

app.js

angular.module('ngdemo', ['ngdemo.filters', 'ngdemo.services', 'ngdemo.directives', 'ngdemo.controllers']).
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/provider-list', { templateUrl: '/provider-list.html', controller: 'ProviderListCtrl' });
    $routeProvider.otherwise({ redirectTo: '/provider-list' });
}]);

HTML

<!DOCTYPE html>
<html ng-app="ngdemo" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Providers</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet">
    <script src="Scripts/Vendor/angular.min.js"></script>
    <script src="Scripts/Vendor/angular-resource.js"></script>
    <script src="controller.js"></script>
    <script src="services.js"></script>
    <script src="app.js"></script>
</head>
<body role="document" style="padding-top: 70px; padding-bottom: 30px">
    <div class="container body-content" role="main">
        <div ng-controller="ProviderListCtrl">
            <h2>Providers</h2>
            <hr>
            <div style="width:60%">
                <table class="table table-striped table-condensed">
                    <thead>
                        <tr>
                            <th style="min-width: 30px; width: 30px;">Id</th>
                            <th style="min-width: 100px;">Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="provider in providers">
                            <td valign="middle">Test: {{provider.Id}}</td>
                            <td valign="middle">Test: {{provider.Name}}</tdvalign>
                            <td valign="middle" align="right" width="40px"><a ng-click="" class="btn btn-small btn-primary">edit</a></td>
                            <td valign="middle" align="right" width="50px"><a ng-click="" class="btn btn-small btn-danger">delete</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

【问题讨论】：

你能为此创建一个 plunker 吗？我看到的唯一问题是这个 w3.org/1999/xhtml">。应该是 w3.org/1999/xhtml">.
感谢您的帮助，Ronald91。我将其更改为 ng-app="ngdemo" 并且几乎可以正常工作。现在标签 ngRepeat 迭代“Providers”，但它不会迭代“Providers”内的数组。任何类型？
考虑到 stackoverflow 的问题格式，这实际上是另一个问题，但我需要查看提供者的数据结构才能最好地指导您。我首先想到的是 providers.someArray 中的提供者。
现在我看到我得到了一个“未捕获的对象”。在使用 ngResource 之前，我使用了以下代码：$scope.providers = data.$values
你使用的是什么版本的 Angular？

标签： angularjs rest ngresource

【解决方案1】：

尝试在Safari浏览器中调试。对我来说，它可以获得有关此错误的更多信息。就我而言，我使用angular-seed app 并将“myApp”模块重命名为“myNameOfAppApp”。我在Safari 收到此错误：

错误：[$injector:modulerr] 无法实例化模块 myApp 由于： [$injector:nomod] 模块“myApp”不可用！你要么模块名称拼写错误或忘记加载它。如果注册一个模块确保您将依赖项指定为第二个论据。

我尝试通过 'mayApp' 关键字查找，并在 index.html 中重命名后修复错误。

【讨论】：

对我来说，angular-truncate 在 bower update 期间从 dist/ 更改为 src/，只有 Safari 指向我，但 Chrome 没有。连咕噜声都无声无息地失败了。谢谢！
Firefox 也比 chrome 给你更多的反馈
Safari 是很好的建议。最后。用于 Safari :)

【解决方案2】：

为了使用$routeProvider，您需要包含（并声明为依赖项）ngRoute 模块。

请参阅 this answer 了解更多信息。

【讨论】：

我包含它并以这种方式声明为依赖项： angular.module('ngdemo', ['ngRoute', 'ngdemo.filters', 'ngdemo.services', 'ngdemo.directives', ' ngdemo.controllers'])..... 仍然得到未捕获的对象：/
你能发布整个错误信息吗？如果你能准备一个小提琴来证明这个问题，那将是最好的。您是否也可以尝试将服务作为对控制器的依赖项：angular.module('ngdemo.controllers', ['ngdemo.services']);