<!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>
扫一扫
639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
