2017-10-04 155 views
0

我一直在試圖弄清爲什麼我的視圖無法正常工作。我不確定我是否缺少依賴關係,或者只是有一些簡單的錯誤。AngularJS ngRoute 404找不到頁面

當我通過pycharm運行程序時顯示index.html頁面,當我點擊其中一個鏈接到不同的視圖時,它顯示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> 
+0

about.html,cart.html,contact.html,home.html的,和myAccount.html有簡單的div,顯示一些文字 – Freddy05

+0

請把一個鏈接到Plunker ... –

+0

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

回答

0

你缺少依賴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

+0

在我添加ngRoute依賴項後,我仍然收到相同的錯誤。儘管謝謝你的回覆。 – Freddy05

+0

@ Freddy05檢查演示https://plnkr.co/edit/tVeMwBbnzlB8EVVIhhN2?p=preview – Sajeetharan

+0

非常感謝你,我剝去了我的代碼並使用你的問題來解決問題。 – Freddy05