Question

我在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

Answer 1

您需要删除开头＆＃34; /＆＃34;。它在PC浏览器上进行模拟时效果非常完美，在iOS上运行良好，但仅在Android情况下才会失败。

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

Answer 2

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

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

2 个答案: