路由不工作 Angular js

Question

我在 angularjs

中使用路由

我的目标是使用路由将页面路由到 index.html 页面。

当我单击主页和课程锚标记时，我希望包含相关文件 home.html 和 courses.html 的内容以加载到 ng-view 中，当我单击时它显示为空白.

控制台也没有错误，这让我很难理解。

我是 angularjs 的初学者。

如有任何疑问，请发表评论。

下面是 index.html

的代码

<!DOCTYPE html>
<html>
<head>
    </style>
</head> 
<body ng-app="myModule">
    <div>
        <h1>Indexpage</h1>
        <ul>
            <li>
                <a href="#/home">Home</a>
            </li>
            <li>
                <a href="#/courses">Courses</a>
            </li>
        </ul>
    </div>
    <div>
        <ng-view></ng-view>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script src="custom.js"></script>
</body>
</html>

下面是 home.html

的代码

<h1>
    {{ message }}
</h1>
<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

下面是 courses.html

的代码

<h1>
    {{ message }}
</h1>
<div>
    <ul>
        <li ng-repeat="course in courses">
            {{ course }}
        </li>
    </ul>
</div>

下面是 custom.js

的代码

var myApp = angular.module("myModule",["ngRoute"])
                   .config(function($routeProvider){
                       $routeProvider
                           .when("/home",{
                                templateURL : "Templates/home.html",
                                controller : "homeController"                         
                            })
                           .when("/courses",{
                                templateURL : "Templates/courses.html",
                                controller : "courseController"
                            });
                   })
                   .controller("homeController",function($scope){
                        $scope.message = "Home";
                   })
                   .controller("courseController",function($scope){
                        $scope.message = "Courses";
                        $scope.courses = ["PHP","JAVA","mysql","Oracle","javascript"];
                   }));

Answer 1

我做了 a plnkr，这让几件事变得显而易见：

您的 index.html 页面中的 HTML 无效：</style>
您的 JS 代码也无效：它有两个右括号而不是一个
修复该问题后，页面显示正常，但单击 link 不会按应有的方式加载主页或课程视图：页面保持未修改状态。

有两个原因，如plnkr所示：

link的URL应该是#!/home和#!/courses，而不是#/home和#/courses（见the documentation)
路由器配置中模板 URL 的正确属性是 templateUrl，而不是 templateURL（参见 the documentation）。

路由不工作 Angular js

Routing not working Angular js

angularjs

angular-routing