Aagularjs路由切换跳转页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>路由跳转页面</title>
<!--
导入js和路由库文件
-->
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<!--
style样式
-->
<style>
.div{ width: 800px; height: 50px; background-color:aliceblue; padding-top: 25px;
padding-left: 50px; margin: auto; }
a{ text-decoration: none; color: red;}
.box{ width: 850px; height: 400px; background-color: #F0F8FF; margin: auto;
margin-top: 20px;}
</style>
<script type="text/javascript">
//将ngRoute注入到模块中
var app=angular.module("myapp",["ngRoute"]);
//把$routeProvider注入到config中，配置路由规则
app.config(["$routeProvider",function($routeProvider){
//配置路由规则，使用$routeProvite调用when方法
//when方法是切换页面的，有两个参数，一个是路径，一个是内容
$routeProvider
.when("/zhuye",{templateUrl:"div1.html"})
.when("/guanyu",{templateUrl:"div2.html"})
.when("/lianxi",{templateUrl:"div3.html"})
.otherwise({$redirectTo:"/zhuye"});
}])
</script>
</head>
<body ng-app="myapp">
<div class="div">
<tr>
<td><a href="#/my">我的站点</a></td>
<td><a href="#/zhuye" style="padding-left: 400px;">主页</a></td>
<td><a href="#/guanyu" style="padding-left: 30px;">关于我们</a></td>
<td><a href="#/lianxi" style="padding-left: 30px;">联系我们</a></td>
</tr>
</div>
<div ng-view>
</div>
</body>
</html>
//三个div界面
div1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div1</title>
<style>
.box{ width: 850px; height: 400px; background-color: #F0F8FF; margin: auto;
margin-top: 20px;}
</style>
</head>
<body>
<div class="box">
<h1 align="center" style="padding-top: 50px;">About Page</h1>
<p align="center">这里显示信息</p>
<p align="center">hello,this is about page</p>
<p align="center">hello hello</p>
<p align="center">如果您想了解更多关于我们
<span style="color: cornflowerblue;"><a href="div2.html">请告诉我们.</a></span></p>
<p align="center">如果您想要了解一个免费报价，请致电我们，或者通过
<span style="color: cornflowerblue ;"><a href="div3.html">询价.</a></span></p>
</div>
</body>
</html>
div2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div2</title>
<style>
.box{ width: 850px; height: 200px; background-color: #F0F8FF; margin: auto;
margin-top: 20px;}
</style>
</head>
<body>
<div class="box">
<h1 align="center" style="padding-top: 20px;">Home Page</h1>
<p align="center">这里Home页面</p>
<p align="center">hello,this is home page</p>
<p align="center">hello hello</p>
</div>
</body>
</html>
div3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div3</title>
<style>
.box{ width: 850px; height: 350px; background-color: #F0F8FF; margin: auto;
margin-top: 20px;}
</style>
</head>
<body>
<div class="box">
<h1 align="center" style="padding-top: 20px;">Home Page</h1>
<p align="center">这里显示消息</p>
<p align="center">hello,this is contact page</p>
<p align="center">hello hello</p>
<p align="center"><input type="text" value="Subject"></p>
<p align="center"><input type="text" value="Message"></p>
<p align="center"><input type="button" value="发送消息"></p>
</div>
</body>
</html>
主页