angular+angular-route路由+最上方一个标题+左侧有三个超链接+右侧点击想显示出来图片
2017-09-13 19:14
423 查看
<!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>
相关文章推荐
- angular+angular-route路由+最上方一个标题+左侧有三个超链接+右侧点击想显示出来图片
- 在pc端四个小图标显示,在手机端,只有一个小图标,点击小图标,四个小图标出来,再点击,四个小图片隐藏?
- 点击右侧标题左侧变换图片
- react native开发:实现点击左侧选择项,右侧显示内容的功能
- android ImageView实现图片浏览器(点击左侧显示上一张,点击右侧显示下一张)
- 12-13(显示csdn大本营那种的一个大标题下有好多的子类)从数据库读出来(如图)
- 【阅读】《Head First jQuery》第二章——选择器与方法(一个点击图片页面显示文字的小例子)
- angular框架中,使用FileReader时,图片预览,会出现上传图片后,再点击上传图片才显示
- 每天一个JavaScript实例-点击图片显示大图添加鼠标操作
- 鼠标放到超链接上有图片悬浮显示出来离开则消失
- 分享一个jquery插件:实现类似淘宝上鼠标经过图片右侧显示大图的效果
- 用JavaScript实现点击左侧列表右侧显示列表内容的方法
- 练习:创建一个按钮,点击一次,则创建一个<input type="text"><input> 点击三次按钮,应该有三个输入框被创建出来。
- 如何完成在一个图片中,点击不同区域显示不同的结果
- GridView的最后固定显示一个增加图片,点击图片动态增加内容item
- 用android做的一个简单的点击按钮显示图片的程序
- TabSpec.setIndicator图片标题只能显示一个的解决办法
- 又一个jquery轮播效果,焦点图,带数字显示序号,这个可以添加对应标题在图片上,支持主流浏览器
- 自己写了一个把文章标题从数据库中读出,并且赋值给一个数组,最后通过smarty循环显示出来
- 鼠标放到超链接上有图片悬浮显示出来离开则消失