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

angular+angular-route路由+最上方一个标题+左侧有三个超链接+右侧点击想显示出来图片

2017-10-23 08:02 363 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
header{
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
background: blue;
color: #fff;
font-size: 30px;

}
li{
list-style: none;

}
.nav{
float: left;
width: 20%;
}
.nav li{
width: 100px;
height: 70px;
border: 1px solid#eee;
line-height:70px ;
text-align: center;

}
a{
text-decoration: none;
}
.content{
float: left;
}
.news{
background: red;
}
.content{
width: 70%;
}
.pic li{
float: left;
margin: 10px;
}

</style>
<script src="angular/angular.js"></script>
<script src="angular/angular-route.js"></script>
<script>
var myapp=angular.module("myapp",["ngRoute"]);
myapp.config(function($routeProvider){
console.log($routeProvider);
$routeProvider.when("/home",{
templateUrl:"pages/home.html",
controller:"homeCtrl"
}).when("/detail",{
templateUrl:"pages/detail.html",
controller:"detailCtrl"
}).when("/news",{
templateUrl:"pages/news.html"
}).when("/error",{
template:"<h2>发生错误了</h2>"
}).otherwise({
redirectTo:"/home"
});
/*定义默认的路由（重定向路由）*/
/*otherwise("/error")*/
});
myapp.controller("homeCtrl",function($scope,$http){
$scope.name="图片展示";
$http({
url:"package.json"
}).then(function (data) {
$scope.data=data.data;
})

});
myapp.controller("detailCtrl",function($scope,$timeout){
$scope.n=0;
$timeout(function(){
$scope.n++;
},2000)
})
</script>
</head>
<body ng-app="myapp">
<header>CC管理系统</header>
<div class="box">

<ul class="nav">
<li><a href="#home">首页</a></li>
<li><a href="#detail">详情页</a></li>
<li><a href="#news">新闻页</a></li>
</ul>
<div ng-view class="content">
</div>
</div>
</body>
</html>

home.html

<h2>{{name}}</h2>
<ul class="pic">
<li ng-repeat="item in data">
<!--<P>{{item.id}}</P>-->
<h2>{{item.title}}</h2>
<img ng-src="{{item.img}}">
</li>
</ul>

detail.html

<p>{{n}}</p>

news.html

<h2 class="news">这里是新闻页</h2>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航