我已经在head中添加了angular-route.js文件。下面提到的ang jed码存在于angroute.js文件中.html代码是用index.html文件编写的。我已经创建了两个html文件查看名为1> course.html和2> student.html的文件夹 我不知道为什么,但网址链接似乎是这样的 - http://127.0.0.1:57420/index.html#!/index.html
<!DOCTYPE html>
<html lang="en" ng-app="module">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="angular-1.6.5/angular.js" type="text/javascript">
</script>
<script src="angular-1.6.5/angular-route.js" type="text/javascript">
</script>
<script src="angroute.js" type="text/javascript"></script>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
.menu{
background-color: #26292c;
color: aqua;
float: left;
width: 20%;
height: 650px;
}
.details{
background-color: bisque;
float: right;
width: 80%;
height: 650px
}
.main{
display:block;
}
</style>
</head>
<body>
<div class="main">
<div class="menu" ng-controller="hey">
<ol>
<li><a href="#/course">Course</a></li>
<li> <a href="#/student">Student</a></li>
</ol>
</div>
<div class="details">
<ng-view></ng-view>
</div>
</div>
</body>
</html>
var myap=angular.module("module",['ngRoute']);
myap.config(function($routeProvider){
$routeProvider.when("/course",{
templateUrl:"view/course.html",
controller:"coursecontroller"
})
.when("/student",{
templateUrl:"view/student.html",
controller:"studentcontroller"
}) .otherwise({
redirectTo: '/index.html'
})
}).controller("coursecontroller",function($scope){
$scope.heading="Course page";
})
.controller("studentcontroller",function($scope){
$scope.heading="student Page";
})
myap.controller("hey",function($scope){
$scope.heading="hi";
})