可以先学习anjularjs的路由 也有ng-view href定义链接
给定一个 demo
index.html
<html lang="en" data-ng-app="myApp"><head> <meta charset="UTF-8"> <title></title> <script src="http://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script> <script src="http://cdn.bootcss.com/angular-ui-router/1.0.0-beta.1/angular-ui-router.min.js"></script> <style> ul{ padding:0; } li{ list-style: none; float: left; margin-right: 20px;; } .cf{ clear: both; } .content{ border:1px solid black; display: block; width:100%; min-height: 600px; margin-top: 50px;; } a.menu{ margin-right:100px; } </style> <script> angular.module('myApp',['ui.router']); angular.module('myApp').config(function($urlRouterProvider,$stateProvider){ $urlRouterProvider.otherwise('/first'); $stateProvider .state('first',{ url:'/first', template:'<h1>first</h1>' }) .state('second',{ abstract:true, url:'/second', template:'<h1>second head</h1><a class="menu" ui-sref="second.a">a</a><a class="menu" ui-sref="second.b">b</a> <hr><ui-view></ui-view><hr><h1>second footer</h1>' }) .state('second.a',{ url:'/a', template:'a' }) .state('second.b',{ url:'/b', template:'b' }) .state('third',{ url:'/third', template:'third <ul> <li ng-repeat="item in list">{{item}}</li></ul>', controller:function($scope,$http){ var array = []; for(var i=0;i<100;i++) { if (i % 3==0) array.push(i); } $scope.list = array; } }) }) </script></head><body> <header>header</header> <ul> <li><a href="" ui-sref="first">First</a></li> <li><a href="" ui-sref="second.a">Second</a></li> <li><a href="" ui-sref="third">Third</a></li> </ul> <p class="cf"></p> <ui-view class="content"></ui-view> <footer> footer </footer></body></html>
v1.html
<html lang="en" data-ng-app="myApp"><head><meta charset="UTF-8"><title>测试</title><script src="http://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script><script src="http://cdn.bootcss.com/angular-ui-router/1.0.0-beta.1/angular-ui-router.min.js"></script><style>li{list-style: none;float: left;margin-left: 20px;;}.box{border:1px solid black;display: block;width:100%;min-height: 200px;margin-top: 50px;;}</style><script>angular.module('myApp',['ui.router']);angular.module('myApp').config(function($urlRouterProvider,$stateProvider){$urlRouterProvider.otherwise('/first');$stateProvider.state('first',{url:'/first',template:'<p>填充洞，点击导航栏的A ，实际是路由first控制</p>'}).state('second',{abstract: true,url:'/second',templateUrl:'v4.html'}).state('second.aa',{url:'/aa',views:{"view1":{template:'<h3>第一个洞口</h3>'},"view2":{template:'<h3>第二个洞口</h3>'}}}).state('second.bb',{url:'/bb',views:{"view1":{template:'<h3>bb洞口【第一个】</h3>'},"view2":{template:'<h3>bb洞口【第二个】</h3>'}}}).state('third',{//要和链接名对应//url:'/hahah',指的是在页面加载时 地址栏的自定义路径url:'/third',//建议 url定义语义化template:'hello'}).state('fourth',{url:'/fourth',templateUrl:'v2.html'// 洞的内容 从网页渲染过来}).state('fifth',{abstract: true,// 这里不是true的话 在网页中ui-sref定义为这里 若为true的话 ui-sref定义为这里的话不会进入// 要定义为他的下级url:'/fifth',templateUrl:'v3.html'}).state('fifth.a',{url:'/a',template:'<p>洞口1内容是a</p>'}).state('fifth.b',{url:'/b',template:'<p>洞口2内容是b</p>'}).state('sixth',{url:'/sixth',template:'<h3>20以内能被3整除的数据有：</h3><br><ul> <li ng-repeat="item in list">{{item}}</li></ul>',controller:function($scope,$http){var cxf=[];for(var i=0;i<20;i++){if(i%3==0) cxf.push(i)}$scope.list=cxf;}})})</script></head><body><h1>router-test</h1><div class="nav"><ul><li><a href="" ui-sref="first">A</a></li><li><a href="" ui-sref="second.aa">B</a></li><li><a href="" ui-sref="third">C</a></li><li><a href="" ui-sref="fourth">D</a></li><li><a href="" ui-sref="fifth.a">E</a></li><li><a href="" ui-sref="sixth">F</a></li></ul></div><div class="box" ui-view></div><p>上面是个动态的洞口</p></body></html>
v2.html
<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><span>这是v2.html 同时也是洞中信息</span></body></html>
v3.html
<html lang="en"><head> <meta charset="UTF-8"> <title>洞中洞</title></head><body><h3>一个洞</h3><div class="nav"> <ul> <li><a href="" ui-sref="fifth.a">洞口1</a></li> <!--要完全和路由相同 父路由 子路由--> <li><a href="" ui-sref="fifth.b">洞口2</a></li> </ul></div><div class="box" ui-view></div><p>洞中洞</p></body></html>
v4.html
<!--更改file->setting->file Encoding 改为utf-8--><!--这样就避免和 v2.html一样 还要写一般网页格式了--><h2>两个洞</h2><a href="" ui-sref="second.aa">洞口A</a><a href="" ui-sref="second.bb">洞口B</a><div ui-view="view1"></div><div ui-view="view2"></div>
2012
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
