Angular中嵌套路由ui-router

来源：互联网发布：网络大专毕业自我鉴定编辑：程序博客网时间：2024/05/19 13:09

是anjularjs中的嵌套路由 ui-view是定义洞的接口 ui-sref是用来链接到路由 是href的变形

可以先学习anjularjs的路由也有ng-view href定义链接

给定一个 demo

index.html

<!DOCTYPE html><htmllang="en"data-ng-app="myApp"><head><metacharset="UTF-8"><title></title><scriptsrc="http://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script><scriptsrc="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><ahref=""ui-sref="first">First</a></li><li><ahref=""ui-sref="second.a">Second</a></li><li><ahref=""ui-sref="third">Third</a></li></ul><pclass="cf"></p><ui-viewclass="content"></ui-view><footer> footer </footer></body></html>

v1.html

<!doctype html><htmllang="en"data-ng-app="myApp"><head><metacharset="UTF-8"><title>测试</title><scriptsrc="http://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script><scriptsrc="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><divclass="nav"><ul><li><ahref=""ui-sref="first">A</a></li><li><ahref=""ui-sref="second.aa">B</a></li><li><ahref=""ui-sref="third">C</a></li><li><ahref=""ui-sref="fourth">D</a></li><li><ahref=""ui-sref="fifth.a">E</a></li><li><ahref=""ui-sref="sixth">F</a></li></ul></div><divclass="box"ui-view></div><p>上面是个动态的洞口</p></body></html>

v2.html

<!doctype html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body><span>这是v2.html 同时也是洞中信息</span></body></html>

v3.html

<!doctype html><htmllang="en"><head><metacharset="UTF-8"><title>洞中洞</title></head><body><h3>一个洞</h3><divclass="nav"><ul><li><ahref=""ui-sref="fifth.a">洞口1</a></li><li><ahref=""ui-sref="fifth.b">洞口2</a></li></ul></div><divclass="box"ui-view></div><p>洞中洞</p></body></html>

v4.html

<h2>两个洞</h2><ahref=""ui-sref="second.aa">洞口A</a><ahref=""ui-sref="second.bb">洞口B</a><divui-view="view1"></div><divui-view="view2"></div>

阅读全文

0 0