用AngularJS路由实现web站点的页面

来源：互联网发布：成都杜甫草堂美食知乎编辑：程序博客网时间：2024/06/14 01:00

<!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>

<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">

<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>

阅读全文

0 0