AngularJS Error：[$ injector：unpr]不明なプロバイダ

URLルートを定義した後、以下のエラーが表示されます。

エラー：[$インジェクター：UNPR]不明プロバイダ：$ templateRequestProvider < - $ templateRequest < - $ルート< - ngViewDirective
エラー：[$インジェクター：のcDEP]が見つかり循環依存関係：ngViewDirective

このタイプのエラーに関連する投稿をすべて読んだので、angular.jsとangular-route.jsのバージョンが同じ（最後の安定版）であることを確認しました。私はAngularJS APIのドキュメントも読んでおり、そこに記載されている原因が問題ではないことを確認しました。

画像に表示されているブラウザの開発者ツールのエラーを理解することができないため、次に何をするべきか分かりません。私に正しい方向を指摘してください。私は別のエラーを持っているコードを変更することなく

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

：ここ

は、ルートが特定のビューを表示するように定義されるapp.htmlあります。これはとても奇妙です：

出典

2016-07-26 Dan Romulus

内のビューの前に「/」を削除するために循環参照があなたの主な問題である、あなたがお互いに依存して2つのコンポーネントがあります。問題を見つけるためにあなたの他のjsを見る必要があります。 – KreepN

ルートを追加する前に作業していたので、他のjsファイルとは何の関係もないと思います。 –

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

出典

2016-07-26 20:35:13

変更あなたのルートプロバイダーのためのあなたの構文、あなただけの必要がある1つ$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

出典

2016-07-26 18:57:42 Alejandro

私はあなたに言ったことをしました - >私はまだ同じエラーがあります –

本当ですが、これは彼の問題の修正ではありません。 – KreepN

移動を

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

を '頭部'の最後まで挿入すると、角度が発生し、ngRouteはまだ読み込まれません。「body」の下にスクリプトを保存する方が良い

出典

2016-07-26 19:05:54 uamanager

これを試しました - > 3つ以上のエラー –

これらのエラーでスクリーンショットを提供できますか？ – uamanager

ちょうど数分pls –

angular-route.jsファイルをロードする前にroutesを書き込んでください。したがってを<script></script>の間に移動する必要があります。

これが問題を解決します。

出典

2016-07-26 19:10:14

それは本のミスでなければならないファイルを読み込んだ後にルートを定義する構文を私に示すことができますか？ –

@DanRomulus更新されました（確認を待っていますが、承認されていれば少し表示されるはずです） – Jay

@DanRomulus詳しくは、Javascriptが同期して実行されています。 ngRouteやcustomFiltersのような、これらのサービスをすべて注入しようとしているのは、あなたがあなたのルートを宣言したスクリプトの後にインポートされているからです。あなたのHTMLにそれらのライブラリがあるだけでどこでも利用できるというわけではないので、あなたは順番に実行する必要があります。他の人に言われているように、レンダリングをブロックしないように、実際にはあなたのスクリプトはすべてあなたの体の最後にあるべきですが、それはまったく別の問題です。 – Jay

AngularJS Error：[$ injector：unpr]不明なプロバイダ

答えて

関連する問題