Question

在定义URL路由后，我收到以下所示的错误 - 按照AngularJS书中的sportsStore应用程序进行学习。

错误：[$ injector：unpr]未知提供者：$ templateRequestProvider＆lt; - $ templateRequest＆lt; - $ route＆lt; - ngViewDirective
错误：[$ injector：cdep]找到循环依赖项：ngViewDirective

我已经阅读了与此类错误相关的所有帖子，并检查了angular.js和angular-route.js的版本是否相同（最后一个稳定版本）。我还阅读了AngularJS API上的文档，并确保其中描述的原因并非如此。

我不知道接下来该做什么，因为我无法理解图片中显示的浏览器开发者工具的错误。请指出正确的方向。

以下是定义路径以显示特定视图的app.html：

＆＃13;

<!DOCTYPE html>
<html ng-app="sportsStore">

<head>
  <title>SportsStore</title>
  <script src="angular.js"></script>
  <link href="bootstrap.css" rel="stylesheet" />
  <link href="bootstrap-theme.css" rel="stylesheet" />
  <script>
    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"></script>
  <script src="filters/customFilters.js"></script>
  <script src="controllers/productListControllers.js"></script>
  <script src="components/cart/cart.js"></script>
  <script src="ngmodules/angular-route.js"></script>
</head>

<body ng-controller="sportsStoreCtrl">
  <div class="navbar navbar-inverse">
    <a class="navbar-brand" href="#">SPORTS STORE</a>
    <cart-summary />
  </div>

  <div class="alert alert-danger" ng-show="data.error">
    Error ({{data.error.status}}). The product data was not loaded.
    <a href="/app.html" class="alert-link">Click here to try again</a>
  </div>
  <ng-view />
</body>

</html>

＆＃13;

在不更改代码的情况下，我有另一个错误。这太奇怪了：

Answer 1

在加载routes文件之前编写angular-route.js。因此，您需要将routes移至<script></script>之间。

这将解决您的问题。

Answer 2

移动

<script>
    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>

到'head'的末尾，导致angular和ngRoute仍未加载。最好将脚本保留在“body”的底部

Answer 3

@uamanager向我展示了解决方案 - ＆gt;在templateUrl中的视图之前删除'/'

<script>
    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>

Answer 4

更改路由提供商的语法，只需要一个$routeProvider

$routeProvider
    .when('/Book/:bookId', {
        templateUrl: 'book.html',
        controller: 'BookController',    
   })
   .when('/Book/:bookId/ch/:chapterId', {
       templateUrl: 'chapter.html',
       controller: 'ChapterController'
  });

查看此codepen https://codepen.io/CarterTsai/pen/tfjqu

AngularJS错误：[$ injector：unpr]未知提供者

4 个答案: