<!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">
.nav{
list-style-type: none;
padding-left: 10px;
}
.nav li{
float:left;
width: 80px;
}
.content{
clear: both;
background-color: gainsboro;
}
img{
width:120px;
height: 160px;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<ul class="nav">
<li><a href="#/home">首页</a></li>
<li><a href="#/computer">电脑</a></li>
<li><a href="#/printer">打印机</a></li>
<li><a href="#/news">新闻</a></li>
<li><a href="#/pics">图片</a></li>
<li><a href="#/other">其它</a></li>
</ul>
<!--html的显示区域-->
<div class="content" ng-view></div>
<!--<ol><li ng-repeat="x in news">{{x.title+" "+x.ctime}}</li></ol>-->
<!--<img ng-repeat="x in picdata" src="{{x}}"/>-->
<script type="text/javascript">
//1.查找模块，并将ngRoute路由模块添加进来
var app=angular.module("myapp",["ngRoute"]);
//2.设置控制器
app.controller("myctrl",function($scope,$http){
$http({
method:"GET",
url:"http://api.tianapi.com/tiyu/?key=48a7d7193e11bd2dd4a683b6e2f90a4f&num=15"
}).then(
function success(response){
//得到数据
$scope.newsdata=response.data.newslist;
},function error(response){
}
);
//网络图片的路径
$scope.picdata=[
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521689942713&di=a62590e2587af5c23dd8af2a798d831d&imgtype=0&src=http%3A%2F%2Fpic3.16pic.com%2F00%2F05%2F68%2F16pic_568031_b.jpg"
,"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521689942713&di=0576788e40afeffa25776e088bbe9923&imgtype=0&src=http%3A%2F%2Fc3.haibao.cn%2Fimg%2F600_0_100_0%2F1263437257.0297%2Fbigfiles%2F201002%2F1263437257.0297.jpg"
,"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521689942713&di=a71f3e266ce1dcd0a0bcd8c58d923393&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F203fb80e7bec54e716cd7a1eb2389b504fc26a88.jpg"
,"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521689942712&di=7d31c6cc89810187a71e00105d5471a8&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dcdf109df791ed21b79c92eed9d6eddae%2F1194b964034f78f0bd5302de7d310a55b3191c38.jpg"];
});
app.controller("mypicctrl",function($scope){
//网络图片的路径
$scope.picdata1=[
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521689942713&di=a62590e2587af5c23dd8af2a798d831d&imgtype=0&src=http%3A%2F%2Fpic3.16pic.com%2F00%2F05%2F68%2F16pic_568031_b.jpg"
,"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521689942713&di=0576788e40afeffa25776e088bbe9923&imgtype=0&src=http%3A%2F%2Fc3.haibao.cn%2Fimg%2F600_0_100_0%2F1263437257.0297%2Fbigfiles%2F201002%2F1263437257.0297.jpg"
,"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521689942713&di=a71f3e266ce1dcd0a0bcd8c58d923393&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F203fb80e7bec54e716cd7a1eb2389b504fc26a88.jpg"
,"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521689942712&di=7d31c6cc89810187a71e00105d5471a8&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dcdf109df791ed21b79c92eed9d6eddae%2F1194b964034f78f0bd5302de7d310a55b3191c38.jpg"];
});
//3.配置路由
//templateUrl:连接到另外的html文件
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/home",{template:"这是首页页面"})
.when("/computer",{template:"<h1>这是电脑页面</h1>"})
.when("/printer",{templateUrl:"printer.html"})
.when("/news",{template:"<ol><li ng-repeat='x in newsdata'>{{x.title+''+x.ctime}}</li></ol>"})
.when("/pics",{
template:"<img ng-repeat='x in picdata' src='{{x}}'/>",controller:"mypicctrl"}
)
.otherwise({redirectTo:"/home"});
}]);
</script>
</body>
</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">
.nav{
list-style-type: none;
padding-left: 10px;
}
.nav li{
float:left;
width: 80px;
}
.content{
clear: both;
background-color: gainsboro;
}
img{
width:120px;
height: 160px;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<ul class="nav">
<li><a href="#/home">首页</a></li>
<li><a href="#/computer">电脑</a></li>
<li><a href="#/printer">打印机</a></li>
<li><a href="#/news">新闻</a></li>
<li><a href="#/pics">图片</a></li>
<li><a href="#/other">其它</a></li>
</ul>
<!--html的显示区域-->
<div class="content" ng-view></div>
<!--<ol><li ng-repeat="x in news">{{x.title+" "+x.ctime}}</li></ol>-->
<!--<img ng-repeat="x in picdata" src="{{x}}"/>-->
<script type="text/javascript">
//1.查找模块，并将ngRoute路由模块添加进来
var app=angular.module("myapp",["ngRoute"]);
//2.设置控制器
app.controller("myctrl",function($scope,$http){
$http({
method:"GET",
url:"http://api.tianapi.com/tiyu/?key=48a7d7193e11bd2dd4a683b6e2f90a4f&num=15"
}).then(
function success(response){
//得到数据
$scope.newsdata=response.data.newslist;
},function error(response){
}
);
//网络图片的路径
$scope.picdata=[
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521689942713&di=a62590e2587af5c23dd8af2a798d831d&imgtype=0&src=http%3A%2F%2Fpic3.16pic.com%2F00%2F05%2F68%2F16pic_568031_b.jpg"
,"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521689942713&di=0576788e40afeffa25776e088bbe9923&imgtype=0&src=http%3A%2F%2Fc3.haibao.cn%2Fimg%2F600_0_100_0%2F1263437257.0297%2Fbigfiles%2F201002%2F1263437257.0297.jpg"
,"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521689942713&di=a71f3e266ce1dcd0a0bcd8c58d923393&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F203fb80e7bec54e716cd7a1eb2389b504fc26a88.jpg"
,"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521689942712&di=7d31c6cc89810187a71e00105d5471a8&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dcdf109df791ed21b79c92eed9d6eddae%2F1194b964034f78f0bd5302de7d310a55b3191c38.jpg"];
});
app.controller("mypicctrl",function($scope){
//网络图片的路径
$scope.picdata1=[
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521689942713&di=a62590e2587af5c23dd8af2a798d831d&imgtype=0&src=http%3A%2F%2Fpic3.16pic.com%2F00%2F05%2F68%2F16pic_568031_b.jpg"
,"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521689942713&di=0576788e40afeffa25776e088bbe9923&imgtype=0&src=http%3A%2F%2Fc3.haibao.cn%2Fimg%2F600_0_100_0%2F1263437257.0297%2Fbigfiles%2F201002%2F1263437257.0297.jpg"
,"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521689942713&di=a71f3e266ce1dcd0a0bcd8c58d923393&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F203fb80e7bec54e716cd7a1eb2389b504fc26a88.jpg"
,"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521689942712&di=7d31c6cc89810187a71e00105d5471a8&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dcdf109df791ed21b79c92eed9d6eddae%2F1194b964034f78f0bd5302de7d310a55b3191c38.jpg"];
});
//3.配置路由
//templateUrl:连接到另外的html文件
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/home",{template:"这是首页页面"})
.when("/computer",{template:"<h1>这是电脑页面</h1>"})
.when("/printer",{templateUrl:"printer.html"})
.when("/news",{template:"<ol><li ng-repeat='x in newsdata'>{{x.title+''+x.ctime}}</li></ol>"})
.when("/pics",{
template:"<img ng-repeat='x in picdata' src='{{x}}'/>",controller:"mypicctrl"}
)
.otherwise({redirectTo:"/home"});
}]);
</script>
</body>
</html>
721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
