2016-10-07 5 views
1

が見つかりませんURL私はindex.htmlのパスがProjectName/index.htmlで、私の他htmlファイルがprojectName/templates/xxx.htmlであり、私のscript.jsパスがindex.html .MYベースreferneceラインと同じですシンプルAngularJSプロジェクトを作成しました<base href="/Projectname/">ですが、ページをリフレッシュすると、ページが見つかりませんでした。エラーです。 ホームページと生徒のページをリロードするとエラーが発生します。がエラー

Myindex.htmlコード

 <!DOCTYPE html> 
     <html ng-app="myModule"> 
     <head> 
     <meta charset="UTF-8"> 
     <title>Insert title here</title> 
     <base href="/routing/"> 
     <script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script> 
<script type="text/javascript" 
src="script.js"></script> 
</head> 
    <body> 
    <table style=""> 
     <tr style="background-color: gray;"> 
     <th colspan="2" class="header"><h1>Header</h1></th> 

    </tr> 
    <tr> 
     <td class="leftMenu" style="background-color: #cecece;"><a 
      href="home">Home</a> <a href="courses">Courses</a> <a 
      href="students">Students</a></td> 
     <td class="mainContent" colspan="2" 
      style="background-color: lightgray;"><ng-view></ng-view>        </td> 
    </tr> 
    <tr style="background-color: gray;"> 
     <td colspan="2" class="footer"><b>Website Footer</b></td> 
</table> 
</body> 
</html> 

マイscript.js

 var app = angular 
    .module("myModule", [ "ngRoute" ]) 
    .config(function($routeProvider, $locationProvider) { 
     $routeProvider.when("/home", { 
      templateUrl : "Templates/home.html", 
      controller : "homeController" 
     }).when("/courses", { 
      templateUrl : "Templates/courses.html", 
      controller : "coursesController" 
     }).when("/students", { 
      templateUrl : "Templates/students.html", 
      controller : "studentsController" 
     }).when("/students/:id", { 
      templateUrl : "Templates/studentDetails.html", 
      controller : "studentDetailsController" 
     }).otherwise({ 
      redirectTo : "/home" 
     }) 
     $locationProvider.html5Mode(true); 
    }) 
    .controller("homeController", function($scope) { 
     $scope.message = "Home page"; 
    }) 
    .controller("coursesController", function($scope) { 
     $scope.courses = [ "c#", "Android", "Java", "Html", "PHP" ]; 
    }) 
    .controller(
      "studentsController", 
      function($scope, $http) { 
       $http 
         .get(
           "http://localhost/angulartest/services/api.php?list") 
         .then(function(response) { 
          $scope.students = response.data; 
         }); 
      }) 
    .controller(
      "studentDetailsController", 
      function($scope, $http, $routeParams) { 
       $http(
         { 
          url : "http://localhost/angulartest/services/api.php", 
          method : "get", 
          params : { 
           id : $routeParams.id 
          } 
         }).then(function(response) { 
        $scope.student = response.data; 
        $scope.message = "student details"; 
        console.log($scope.student); 
       }) 
      }); 

のNd home.htmlのような私の他のhtmlファイル、students.htmlは/パスプロジェクト名/テンプレートでテンプレートフォルダに用意されていxxx.html

+0

どのページを更新しましたか?あなたはどのページにいますか? plsは質問にいくつかの詳細を追加します。 – Sravan

+0

[Reloading the page]の重複した可能性がありますAngularJS HTML5モードで間違ったGETリクエスト](http://stackoverflow.com/questions/16569841/reloading-the-page-gives-wrong-get-request-with-angularjs-html5-モード) – Brian

答えて

1

指定したベースhrefと指定されたURLが異なります。ProjectnameとProjectNameの大文字と小文字の区別が重要です。

また、ページを更新するときにURLを書き換える必要があります。新しいGETリクエストがサーバーに生成され、サーバーは角度が定義されたルートを認識しないため、404が発生します。

+0

私はprojectanmeの大文字を説明できます@Brian – user3860618

+0

'で指定されたURLは' ProjectName/index.html' URLとは異なりますので、大文字と小文字が区別されます/ ProjectName isn ' t/ProjectNameと同じ/ Projectname /のベースhrefを指定すると、/ ProjectName /にファイルが格納されていると404が発生する可能性があります。 – Brian

+0

私はちょうどprojectNameとしてサンプル名を与えていますが、大文字と小文字を区別せずに指定しましたdifferenec – user3860618

0
<IfModule mod_rewrite.c> 
RewriteEngine On 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteCond %{REQUEST_FILENAME} !-l 
RewriteRule .* index.html [L] 
</IfModule> 
+0

このコードスニペットは質問を解決するかもしれませんが[説明を含む](http://meta.stackexchange.com/questions/114762/explaining -entirely-code-based-answers)は、あなたの投稿の質を向上させるのに本当に役立ちます。将来読者の質問に答えていることを覚えておいてください。そうした人々はあなたのコード提案の理由を知らないかもしれません。 – andreas