<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>路由</title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular-route.js" type="text/javascript" charset="utf-8"></script>
<!--
页面应用:只有一个页面的应用
路由可以实现页面的切换
注意:
路由要在angular后面导入,因为路由依赖于angular
-->
<style type="text/css">
.bottom{
list-style: none;
float: left;
}
.bottom li{
float: left;
background: blue;
padding: 5px;
margin: 5px;
}
.bottom li a{
color: white;
text-decoration: none;
}
</style>
</head>
<body ng-app="myApp">
<!--
ng-view 页面显示的容器
-->
<div ng-view>
</div>
<ul class="bottom">
<li><a href="#/">主页</a></li>
<li><a href="#/lianxi">联系人</a></li>
<li><a href="#/wode">我的</a></li>
</ul>
<script type="text/javascript">
//参数1,应用的名字 参数2 依赖注入的列表,需要将路由对象传入 ngRoute
var mo = angular.module("myApp",["ngRoute"]);
//配置
mo.config(function($routeProvider){
//template 简单的显示文本
/*$routeProvider.when("/",{template:"我是主页"});
$routeProvider.when("/lianxi",{template:"联系人"});
$routeProvider.when("/wode",{template:"我的"});*/
//如果要显示页面,使用"templateUrl
$routeProvider.when("/",{templateUrl:"zhuye.html"});
$routeProvider.when("/lianxi",{templateUrl:"lianxi.html"});
$routeProvider.when("/wode",{templateUrl:"wode.html"});
// $routeProvider.when().when().when();
});
</script>
</body>
</html>
AngualrJs--实现Web站点页面跳转
最新推荐文章于 2024-05-15 03:18:31 发布