您的位置：首页 > Web前端 > AngularJS

angularjs路由小案例

2017-05-30 20:50 274 查看

一.点击不同导航链接显示不同的界面，但是不去页面跳转

   （路由的原理就是通过锚点来完成的）

效果图：（关键代码已用红色渲染）



代码：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">

.content {
width: 960px;
margin: 0 auto;
}
nav {

height: 30px;
margin: 40px auto;
background-color: black;
border-radius: 8px;
}
li,a{
margin: 0;
padding: 0;
list-style: none;

}
li {
display: inline-block;
}
a {
display: block;
text-align: center;
width: 100px;
height: 30px;
line-height: 30px;
text-decoration: none;
color: white;
}
a:hover{
background-color: #aaa;
}
footer {
background-color: black;
width: 100%;
height: 200px;
}
</style>
</head>
<body ng-app="app">
<nav class="content">
<ul>
<li><a href="#/index">主页</a></li>
<li><a href="#/view">展示</a></li>
<li><a href="#/login">登录</a></li>
</ul>
</nav>
<div class="content">
<div ng-view="">
</div>

</div>
<script src=js/angular.min.js></script>
<script src=js/angular-route.min.js></script>
<script type="text/javascript">
var app = angular.module('app',['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/index',{
templateUrl:'tem.html',
controller:'indexctrl'
}).when('/view',{
template:'你好这是展示界面'
}).when('/login',{
templateUrl:'s.html',//点击登录的跳转界面
controller:'loginctrl'//给s.html指定控制器
}).otherwise({
templateUrl:'tem.html'
})
;
}]);
app.controller('indexctrl',['$scope','$http','$routeParams',function($scope,$http,$routeParams){
console.log($routeParams);
}]);
app.controller('loginctrl',['$scope','$http',function($scope,$http){
$http({
url:'stars.php',//去后台获取相关数据
}).success(function(info){
$scope.name = info[0].name;//处理返回的数据
});
}]);
</script>
</body>
</html>

stars.php:
<?php
$result =  file_get_contents('stars.json');
echo $result;
?>


stars.json:
[
{
"name": "王力宏",
"photo": "./images/wlh.jpg",
"ablum": "<<改变自已>>",
"age": 39,
"sex": "男"
},
{
"name": "王力宏",
"photo": "./images/wlh.jpg",
"ablum": "<<改变自已>>",
"age": 39,
"sex": "男"
},
{
"name": "王力宏",
"photo": "./images/wlh.jpg",
"ablum": "<<改变自已>>",
"age": 39,
"sex": "男"
},
{
"name": "王力宏",
"photo": "./images/wlh.jpg",
"ablum": "<<改变自已>>",
"age": 39,
"sex": "男"
}
]

二:网易云音乐小案例
效果图:



index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音乐列表</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
ol {
padding-top: 0;
margin: 0;
min-height: 400px;
border:1px solid #ccc;
}
ol li {
line-height: 40px;
}
ol li:hover{
background-color: #ccc;
}
.music {
width: 600px;
margin: 100px auto;

}
.music nav {
height: 40px;
background-color: #000;
display: flex;
}
.music nav a {
flex:1;
text-align: center;
line-height: 40px;
text-decoration: none;
color:#fff;
}
.music nav a:hover {
background-color: rgba(255,255,255,0.5);
}
</style>
</head>
<body ng-app="Music">

<div class="music">
<nav>
<!-- 后端会说明需要什么类型参数 -->
<!-- 需要一个类型id 1，2，3，4 -->
<!-- 1表示流行，2表示华语-->
<a href="#/1">流行</a>
<a href="#/2">华语</a>
<a href="#/3">欧美</a>
<a href="#/4">日韩</a>
</nav>
<ol>
<div ng-view="">

</div>
</ol>
</div>

<script src="../../js/angular.min.js"></script>
<script src="../../js/angular-route.min.js"></script>
<script>
var Music = angular.module('Music',['ngRoute']);
Music.config(['$routeProvider',function($routeProvider) {
//通过后台数据分析实现不同界面主要是通过传参
$routeProvider.when('/:id',{
templateUrl:'../views/list.html',
controller:'musictrl'
});

}]);
Music.controller('musictrl',['$scope','$http','$routeParams',function($scope,$http,$routeParams){
//
var id = $routeParams.id;
$http({
url:'list.php',
params:{
pid:id //后台需要pid,1或2或3或4
}
}).success(function(info){
$scope.lists = info;
});

}]);
</script>
</body>
</html>

list.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音乐列表</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
ol {
padding-top: 0;
margin: 0;
min-height: 400px;
border:1px solid #ccc;
}
ol li {
line-height: 40px;
}
ol li:hover{
background-color: #ccc;
}
.music {
width: 600px;
margin: 100px auto;

}
.music nav {
height: 40px;
background-color: #000;
display: flex;
}
.music nav a {
flex:1;
text-align: center;
line-height: 40px;
text-decoration: none;
color:#fff;
}
.music nav a:hover {
background-color: rgba(255,255,255,0.5);
}
</style>
</head>
<body ng-app="Music">

<div class="music">
<nav>
<!-- 后端会说明需要什么类型参数 -->
<!-- 需要一个类型id 1，2，3，4 -->
<!-- 1表示流行，2表示华语-->
<a href="#/1">流行</a>
<a href="#/2">华语</a>
<a href="#/3">欧美</a>
<a href="#/4">日韩</a>
</nav>
&l
4000
t;ol>
<div ng-view="">

</div>
</ol>
</div>

<script src="../../js/angular.min.js"></script>
<script src="../../js/angular-route.min.js"></script>
<script>
var Music = angular.module('Music',['ngRoute']);
Music.config(['$routeProvider',function($routeProvider) {
//通过后台数据分析实现不同界面主要是通过传参
$routeProvider.when('/:id',{
templateUrl:'../views/list.html',
controller:'musictrl'
});

}]);
Music.controller('musictrl',['$scope','$http','$routeParams',function($scope,$http,$routeParams){
//
var id = $routeParams.id;
$http({
url:'list.php',
params:{
pid:id  //后台需要pid,1或2或3或4
}
}).success(function(info){
// console.log(info);
$scope.lists = info;
});

}]);
</script>
</body>
</html>
list.html:
<li ng-repeat="x in lists">{{x.text}}</li>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  angularjs路由实现转发案例
相关文章推荐
新的分享
章节导航