Question

我正在尝试在AngulaJS示例应用程序中实现路由，但不知何故它不起作用，它也没有抛出任何类型的错误。请帮帮我。我从最后一天完全被困在这里。

以下是代码详情：

的index.html

<!DOCTYPE html>
<html ng-app="AngularJS">
<head>
    <title>Index page</title>
    <meta charset="utf-8" />
    <link href="../Styles/Layout.css" rel="stylesheet" />
    <script src="../Scripts/Vendors/angular.js"></script>
    <script src="../Scripts/Vendors/angular-route.js"></script>
    <script src="../Scripts/app.js"></script>
    <script src="../Scripts/Controllers/Index.js"></script>    
</head>
<body>
    <table>
        <tr>
            <td colspan="2" class="header">
                <h2>Website header</h2>
            </td>
        </tr>
        <tr>
            <td class="leftMenu">
                <a href="#/Home">Home</a>
                <a href="#/Courses">Courses</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>

app.js

angular.module('AngularJS', ['ngRoute']);

Index.js

angular.module('AngularJS')
    .config(function ($routeProvider) {
        $routeProvider
            .when('/Home', {
                templateUrl: 'Templates/Home.html',
                controller: 'HomeController'
            })
            .when('/Courses', {
                templateUrl: 'Templates/Courses.html',
                controller: 'CoursesController'
            });
     })
     .controller('HomeController', function ($scope) {
        $scope.title = 'Home page';
     })
     .controller('CoursesController', function ($scope) {
        $scope.Courses = [
            'C', 'C++', 'C#', 'SQL Server', 'AngularJS', 'ASP.NET MVC'
        ];
    });

我在这里做错了什么？提前谢谢。

Answer 1

您的代码应该有效。检查是否添加了正确的angular.js和angular-route.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

Answer 2

在href中使用此代码

<td class="leftMenu">
    <a href="/#/Home">Home</a>
    <a href="/#/Courses">Courses</a>
</td>

你错过了一个正斜杠。

AngulaJS路由不起作用，它不会给我任何错误

2 个答案: