javascript - Angular JS 路由不起作用(简单示例)-6ren

javascript - Angular JS 路由不起作用(简单示例)

转载作者：行者123 更新时间：2023-11-28 17:46:54

24

4

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

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

最佳答案

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

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

关于javascript - Angular JS 路由不起作用(简单示例)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46475339/

24

4

0

文章推荐： html - Css - 在图像周围环绕文本然后在断点处重新定位

文章推荐： Python ctypes 和指针作为函数参数

文章推荐： ios - 奇怪的模态视图 Controller NSException 错误

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

javascript - Angular JS 路由不起作用(简单示例)