Angular JS Route不起作用（簡單示例）

我是AngularJS的初學者，嘗試使用路由，但由於某種原因，其工作原理和特殊字符也出現在URL中。文件如下：
Angular JS Route不起作用（簡單示例）

的Index.html

<html ng-app="myRouteApp" lang="ens"> 
    <head> 
     <title>Angular Route Project</title> 
     <script src="../js/angular.js"></script> 
     <script src="../js/angular-route.js"></script> 
     <script src="../js/script2.js"></script> 
     <link href="style.css" rel="stylesheet" /> 
    </head> 
    <body> 
     <table style="Font-Family: Arial;"> 
      <tr> 
       <td colspan="2" class="header"> 
        <h1>WEBSITE HEADER</h1> 
       </td> 
      </tr> 
      <tr> 
       <td class="leftMenu"> 
        <a href="#/home">Home</a> 
        <a href="#/courses">Courses</a> 
        <a href="#/students">Students</a> 
       </td> 
       <td class="mainContent"> 
        <ng-view></ng-view> 
       </td> 
      </tr> 
      <tr> 
       <td colspan="2" class="footer"> 
        <h5>WEBSITE FOOTER</h5> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

script2.js

var app = angular.module("myRouteApp", ["ngRoute"]) 
       .config(function($routeProvider){ 
        $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" 
          }) 
       }) 
     .controller("homeController", function($scope){ 
      $scope.message = "Home Page"; 
     }) 
     .controller("coursesController", function($scope){ 
      $scope.courses = ["PHP", "JAVA", "C#", "C"]; 
     }) 
     .controller("studentsController", function($scope){ 
      $scope.students = ["ALI", "Usama", "Usman", "Omer"]; 
     })

所有的代碼我使用相同的教程，但不知道是什麼錯誤！幫助將不勝感激。感謝

來源

2017-09-28 Shaheryar Yousaf

什麼是確切的錯誤？ –

「ngRoute」不起作用，網址類似於 file：/// C：/Users/SHARY%20MALIK/Desktop/Angular%20JS/Files/project/index.html#！/＃％2Fcourses –

默認hashPrefix是ngRoute!，所以你的所有網址應該有內部!的網址。這意味着您的網址只能使用#!/，只能使用。

<td class="leftMenu"> 
    <a href="#!/home">Home</a> 
    <a href="#!/courses">Courses</a> 
    <a href="#!/students">Students</a> 
</td>

更好的方式是徹底的從URL擺脫!。您需要使用$locationProvider內部配置階段的應用程序將hashPrefix設置爲''（空）。

app.config(['$locationProvider', function($locationProvider){ 
    $locationProvider.hashPrefix(''); 
}])

來源

2017-09-28 17:47:35

感謝您的回答，！在添加$ locationProvider.hashPrefix（''）後消失。但ngRoute仍然無法正常工作。我的系統有問題嗎？ –

Angular JS Route不起作用（簡單示例）

回答

相關問題