angular.js之路由实现
2016-05-12 20:37
776 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>route</title>
</head>
<style type="text/css">
div {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 600px;
border: 1px solid #aaaaaa;
}
.box_top {
width: 500px;
height: 100px;
background-color: #cccccc;
}
.box_top span {
line-height: 100px;
margin: 0 11%;
cursor: pointer;
}
</style>
<body ng-app="routedemo">
<div class="box">
<div class="box_top">
<span class="fir">第一页</span>
<span class="sec">第二页</span>
<span class="the">第三页</span>
</div>
<div ng-view>
</div>
</div>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script>
$(".fir").click(function(){
window.location="#fir";
});
$(".sec").click(function(){
window.location="#sec";
});
$(".the").click(function(){
window.location="#the";
});
var routeapp = angular.module("routedemo",['ngRoute']);
routeapp.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl:'111.html'
})
.when('/fir',{
templateUrl:'111.html'
})
.when('/sec',{
templateUrl:'ser.html'
})
.when('/the',{
templateUrl:'thr.html'
});
});
</script>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>route</title>
</head>
<style type="text/css">
div {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 600px;
border: 1px solid #aaaaaa;
}
.box_top {
width: 500px;
height: 100px;
background-color: #cccccc;
}
.box_top span {
line-height: 100px;
margin: 0 11%;
cursor: pointer;
}
</style>
<body ng-app="routedemo">
<div class="box">
<div class="box_top">
<span class="fir">第一页</span>
<span class="sec">第二页</span>
<span class="the">第三页</span>
</div>
<div ng-view>
</div>
</div>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script>
$(".fir").click(function(){
window.location="#fir";
});
$(".sec").click(function(){
window.location="#sec";
});
$(".the").click(function(){
window.location="#the";
});
var routeapp = angular.module("routedemo",['ngRoute']);
routeapp.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl:'111.html'
})
.when('/fir',{
templateUrl:'111.html'
})
.when('/sec',{
templateUrl:'ser.html'
})
.when('/the',{
templateUrl:'thr.html'
});
});
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 