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

来源：互联网发布：吉首大学网络授课编辑：程序博客网时间：2024/05/01 21:44
<!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>
阅读全文
0 0