AngularJS ngRoute 404ページが見つかりません

私の見解がうまくいかない理由を理解しようとしています。私が依存関係を欠いているのか、まったく間違っているのか分かりません。AngularJS ngRoute 404ページが見つかりません

pycharmでプログラムを実行するとindex.htmlページが表示され、別のビューへのリンクの1つをクリックすると404ページが表示されません。

-lib
-css
-partials
-scripts

-index.html

誰でも見ることができます：私は私のプロジェクトフォルダの下にこれらのディレクトリを持っている

私が間違っていることは何ですか？ありがとうございました。

AngularJSのjsファイル：

var mainApp = angular.module('mainApp', []); 
    mainApp.config(['$routeProvider', 
     function ($routeProvider) { 
     $routeProvider 
      .when('/home', { 
       templateUrl: '/partials/home.html', 
       controller: 'controller_home' 
      }) 
      .when('/about', { 
       templateUrl: '/partials/about.html', 
       controller: 'controller_about' 
      }) 
      .when('/cart', { 
       templateUrl: 'partials/cart.html', 
       controller: 'controller_cart' 
      }) 
      .when('/contact', { 
       templateUrl: 'partials/contact.html', 
       controller: 'controller_contact' 
      }) 
      .when('/myAccount', { 
       templateUrl: 'partials/myAccount.html', 
       controller: 'controller_myAccount' 
      }) 
      .otherwise({ 
       redirectTo: '/partials/home' 
      }); 
    }]); 

mainApp.controller('controller_home', ['$scope', function controller_home($scope) { 
    $scope.message = "$scope.message : from controller_home"; 
}]) 
    .controller('controller_about', ['$scope', function controller_about($scope) { 
    $scope.message = "$scope.message : from controller_about"; 
}]) 
    .controller('controller_cart', ['$scope', function controller_cart($scope) { 
    $scope.message = 'this is the cart'; 
}]);

HTMLファイル：

<!DOCTYPE html> 
<html lang="en" ng-app="mainApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>My Webpage Title</title> 

    <!--Stylesheet index.css--> 
    <link rel="stylesheet" href="CSS/index.css" type="text/css"> 
    <link rel="stylesheet" href="CSS/animations.css" type="text/css"> 

    <script src="lib/angular.min.js"></script> 
    <script src="lib/angular-route.min.js"></script> 
    <script src="scripts/mainApp.js"></script> 
</head> 

<body> 
    <!--Site Header--> 
    <div class="header"> 
     <h1>Header to Page</h1> 
    </div> 

    <br> 

    <!--Site Navigation Bar--> 
    <div> 
     <a href="/home">Product</a> | 
     <a href="/cart">Cart</a> | 
     <a href="/about">About</a> | 
     <a href="/contact">Contact</a> | 
     <a href="/myAccount">My Account</a><br/> 
     <div ng-view></div> 
    </div> 

    <br> 

    <!--Site Footer--> 
    <footer class="footer"> 
     <br> 
     <br> 
     <br> 
    </footer> 

    <footer class="footer-disclaimer"> 
     <ul class="navbar"> 
      <li><a href="policy.html">Policy and Agreement</a></li> 
      <li><a href="privacy.html">Privacy Policy</a> </li> 
     </ul> 
    </footer> 
</body>

出典

2017-10-04 Freddy05

about.html、cart.html、contact.html、home.html、およびmyAccount.htmlは、いくつかのテキストを表示する簡単なのdivの持っている – Freddy05

Plunkerへのリンクを入れてください。 –

https://embed.plnkr.co/gVftUqYNfd3uwCtPAZaL/ – Freddy05

あなたが不足している依存関係ngRoute

var mainApp = angular.module('mainApp', ['ngRoute']);

はまたあなたのコントローラは

mainApp.controller('controller_home', ['$scope', function($scope) { 
    $scope.message = "$scope.message : from controller_home"; 
}]) 
mainApp.controller('controller_about', ['$scope', function($scope) { 
    $scope.message = "$scope.message : from controller_about"; 
}]) 
mainApp.controller('controller_cart', ['$scope', function($scope) { 
    $scope.message = 'this is the cart'; 
}]);

、あるべき

DEMO

出典

2017-10-04 17:54:42 Sajeetharan

ngRoute依存関係を追加した後でも同じエラーが表示されます。しかし、あなたの応答をありがとう。 – Freddy05

@ Freddy05デモを確認するhttps://plnkr.co/edit/tVeMwBbnzlB8EVVIhhN2?p=preview – Sajeetharan

ありがとう、私は自分のコードを削除し、問題を解決するために使用しています。 – Freddy05

AngularJS ngRoute 404ページが見つかりません

答えて

関連する問題