Question

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

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

Answer 1

默认hashPrefix !为ngRoute，因此您的所有网址都应在其网址中!。这意味着，只有#!/，您的网址才能#/。

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

更好的方法是从URL中彻底摆脱!。您需要在应用程序的配置阶段使用hashPrefix将''设置为$locationProvider（空）。

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

Angular JS Route无法正常工作（简单示例）

1 个答案: