angularjs路由 - 不工作

我試圖在Visual Studio中的代碼以及崇高的文本，沒有錯誤顯示在開發人員工具，但當我嘗試注入任何其他HTML頁面爲前home.html它沒有更新頁面。這裏是我已經參考的代碼。地址欄是這樣的：http://localhost:63928/Index.html#!#%2Fhome而在網上的教程我只是學習包括/＃家酒吧angularjs路由 - 不工作

這裏的index.html：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Demo"> 
<head> 
    <title></title> 
    <script src="Scripts/angular.min.js"></script> 
    <script src="Scripts/angular-route.min.js"></script> 
    <link href="Styles.css" rel="stylesheet" /> 
    <script src="Scripts/Script.js"></script> 
</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"> 
       <b>Website Footer</b> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

我styles.css的

.header { 
    width: 800px; 
    height: 80px; 
    text-align: center; 
    background-color: #BDBDBD; 
} 

.footer { 
    background-color: #BDBDBD; 
    text-align: center; 
} 

.leftmenu { 
    height: 500px; 
    background-color: #D8D8D8; 
    width: 150px; 
} 

.maincontent { 
    height: 500px; 
    background-color: #E6E6E6; 
    width: 650px; 
} 

a { 
    display: block; 
    padding: 5px 
}

的script.js

/// <reference path="angular.min.js" /> 

var app = angular 
    .module("Demo", ["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 = ["C#", "VB.NET", "ASP.NET", "SQL Server"]; 
    }) 
    .controller("studentsController", function ($scope, $http) { 
     $scope.students = ["Chiku", "Veeru", "ASHA", "SAchin"]; 
    })

和home.html的包括：

<h1>{{message}}</h1> 


courses.html : 


<h1>Courses we offer</h1> 
<ul> 
    <li ng-repeat="course in courses"> 
     {{course}} 
    </li> 
</ul>

students.html

<h1>List of Students</h1> 
<ul> 
    <li ng-repeat="student in students"> 
     {{student}} 
    </li> 
</ul>

如果有人能findout任何錯誤都會被感謝幫助我。

來源

2017-07-31 Harshit Agarwal

什麼是你正在使用的角度JS的版本？ –

我沒有改變，只是檢查你的角度角路徑版本是否匹配。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script> 
<script src="https://code.angularjs.org/1.2.0rc1/angular-route.js"></script>

DEMO

來源

2017-07-31 18:29:21 Sajeetharan

我沒有讓你。我的角度版本和角度路線版本是不同的還是什麼？ –

angularjs路由 - 不工作

回答

相關問題