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

Question

定义URL路由后，出现以下错误-出于学习目的，从AngularJS书中的sportsStore应用程序开始。

错误：[$ injector：unpr]未知提供程序：$ templateRequestProvider <-$ templateRequest <-$ route <-ngViewDirective
错误：[$ injector：cdep]找到循环依赖项：ngViewDirective

我已经阅读了与此类错误相关的所有文章，并检查了angular.js和angular-route.js的版本是否相同（最后一个稳定版本）。 我还阅读了有关AngularJS API的文档，并确保此处描述的原因不是这种情况。

我不知道下一步该怎么做，因为我无法理解图中显示的浏览器开发人员工具中的错误。 请指出正确的方向。

这是app.html，其中定义了路由以显示特定视图：

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

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

Answer 1

您在加载angular-route.js文件之前编写routes 。 因此，您需要将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向我展示了解决方案->在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 个解决方案

解决方案1
2 2016-07-26 19:10:14

解决方案2
1 2016-07-26 19:05:54

解决方案3
1 已采纳 2016-07-26 20:35:13

解决方案4
-1 2016-07-26 18:57:42

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

问题描述

4 个解决方案

解决方案1 2 2016-07-26 19:10:14

解决方案2 1 2016-07-26 19:05:54

解决方案3 1 已采纳 2016-07-26 20:35:13

解决方案4 -1 2016-07-26 18:57:42

解决方案1
2 2016-07-26 19:10:14

解决方案2
1 2016-07-26 19:05:54

解决方案3
1 已采纳 2016-07-26 20:35:13

解决方案4
-1 2016-07-26 18:57:42