AngularJS 应用程序出现奇怪的路由错误答案

【问题标题】：Strange Routing error with AngularJS appAngularJS 应用程序出现奇怪的路由错误
【发布时间】：2014-12-25 14:44:47
【问题描述】：

我在 AngularJS 应用程序上实现简单的路由配置时遇到了困难。

这是我的 HTML 文件：

<html data-ng-app="sportsStore">
    <head>
        <title>Sports Store</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css" />
        <script src="http://code.jquery.com/jquery-2.1.1.min.js" type="application/javascript"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="application/javascript"></script>
        <script src="https://code.angularjs.org/1.3.0/angular.min.js" type="application/javascript"></script>
        <script src="https://code.angularjs.org/1.3.0/angular-route.min.js" type="application/javascript"></script>
        <script type="application/javascript">
            angular.module('sportsStore', ['customFilters', 'cart', 'ngRoute'])
            .config(function ($routeProvider) {
                $routeProvider.when('/checkout', {
                    templateUrl: '/views/checkoutSummary.html'
                });
                $routeProvider.when('/products', {
                    templateUrl: '/views/productList.html'
                });
                $routeProvider.otherwise({
                    templateUrl: '/views/productList.html'
                });
            });
        </script>
        <script src="controllers/sportsStore.js" type="application/javascript"></script>
        <script src="controllers/productListControllers.js" type="application/javascript"></script>
        <script src="components/cart/cart.js" type="application/javascript"></script>
        <script src="filters/customFilters.js" type="application/javascript"></script>
    </head>
    <body data-ng-controller="sportsStoreCtrl">
        <div class="navbar navbar-inverse">
            <a class="navbar-brand" href="#">SPORTS STORE</a>
            <cart-summary/>
        </div>
        <div class="alert alert-danger" data-ng-show="data.error">
            Error ({{data.error.status}}). The product data was not loaded.
            <a href="/index.html" class="alert-link">Click here to try again</a>
        </div>
        <ng-view />
    </body>
</html>

如果我从路由提供程序中删除所有路由配置，则不会引发错误，但是一旦我将它们添加回来，浏览器控制台上就会出现此错误：

Error: [$compile:tpload] http://errors.angularjs.org/1.3.0/$compile/tpload?p0=%2Fviews%2FproductList.html
y/<@https://code.angularjs.org/1.3.0/angular.min.js:6:409
g@https://code.angularjs.org/1.3.0/angular.min.js:133:480
f/<@https://code.angularjs.org/1.3.0/angular.min.js:109:261
Ke/this.$get</h.prototype.$eval@https://code.angularjs.org/1.3.0/angular.min.js:123:128
Ke/this.$get</h.prototype.$digest@https://code.angularjs.org/1.3.0/angular.min.js:120:212
Ke/this.$get</h.prototype.$apply@https://code.angularjs.org/1.3.0/angular.min.js:123:404
rc/d/<@https://code.angularjs.org/1.3.0/angular.min.js:18:99
e@https://code.angularjs.org/1.3.0/angular.min.js:36:447
rc/d@https://code.angularjs.org/1.3.0/angular.min.js:18:81
rc@https://code.angularjs.org/1.3.0/angular.min.js:18:309
Ed@https://code.angularjs.org/1.3.0/angular.min.js:17:137
@https://code.angularjs.org/1.3.0/angular.min.js:246:98
n.Callbacks/j@http://code.jquery.com/jquery-2.1.1.min.js:2:26852
n.Callbacks/k.fireWith@http://code.jquery.com/jquery-2.1.1.min.js:2:27661
.ready@http://code.jquery.com/jquery-2.1.1.min.js:2:29482
I@http://code.jquery.com/jquery-2.1.1.min.js:2:29656

https://code.angularjs.org/1.3.0/angular.min.js
Line 101

又出现一个错误：

[object XrayWrapper [object DOMException]]
https://code.angularjs.org/1.3.0/angular.min.js
Line 101

但是当点击它获取更多信息时，一条消息阻止了我：

NS_ERROR_DOM_BAD_URI: Access to restricted URI denied

【问题讨论】：

标签： javascript html angularjs web url-routing

【解决方案1】：

您需要删除开头的“/”。当您在 PC 浏览器上进行模拟时，它可以完美运行，并且在 iOS 上也可以正常运行，但只有在 Android 上才会失败。

其次，确保文件名和路径正确。

【讨论】：

我的意思是，删除“/”将使其在所有平台上都能完美运行。您当前的代码将无法在 Android 平台上运行（以“/”开头）。
非常感谢您的解决方案。让我卡了很长时间。

【解决方案2】：

找不到文件“/views/checkoutSummary.html”。确保路径正确。

【讨论】：

该文件确实存在（与productSummary.html相同），我必须传递绝对路径吗？
实际上，我认为它没有找到 /views/productList.html （errors.angularjs.org/1.3.0/$compile/… 在错误的第一行。）根据文档docs.angularjs.org/error/$compile/tpload 它发生在找不到模板。 “要解决此错误，请确保模板的 URL 拼写正确并解析为正确的绝对 URL。Chrome 开发人员工具也可能有助于确定请求失败的原因。”