Angular JS Route 不起作用（简单示例）答案

【问题标题】：Angular JS Route not working (Simple Example)Angular JS Route 不起作用（简单示例）
【发布时间】：2017-09-28 17:43:22
【问题描述】：

我是 AngularJS 的初学者并尝试使用路由，但由于某种原因它不起作用并且特殊字符也出现在 URL 中。文件如下：

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"];
        })

我使用的所有代码都与教程相同，但不知道错误是什么！帮助将不胜感激。谢谢

【问题讨论】：

确切的错误是什么？
"ngRoute" 不起作用，URL 类似于 file:///C:/Users/SHARY%20MALIK/Desktop/Angular%20JS/Files/project/index.html#!/#% 2Fcourses

标签： javascript angularjs angular-ui-router

【解决方案1】：

默认情况下，hashPrefix 在ngRoute 中为!，因此您的所有网址都应在其网址中包含!。这意味着您的 URL 应该有 #!/，尽管只有 #/。

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

更好的方法是从 URL 中完全删除 !。您需要在应用程序的配置阶段使用$locationProvider 将hashPrefix 设置为''(empty)。

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

【讨论】：

感谢您的回答，！添加 $locationProvider.hashPrefix(''); 后消失但是 ngRoute 仍然无法正常工作。我的系统有问题吗？