2017-10-04 12 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