标签:angular uil monitor 指定 src url color acea each
文件结构:
- index.html
- app.js
- monitoring.html
- page1.html
- page2.html
- search.html
index.html (第一个路由)
1 <script type="text/javascript" src="jsLib/angular.js"></script> 2 <script type="text/javascript" src="jsLib/angular-ui-router.js"></script> 3 4 <a ui-sref="monitoring">monitoring</a> 5 <a ui-sref="seach">seach</a> 6 7 <div ui-view></div>
app.js
1 var faceApp = angular.module(‘faceApp‘,[‘ui.router‘]); 2 faceApp.config(function($stateProvider, $uilRouterProvider){ 3 $urlRouterProvider.otherwise(‘/monitoring‘) ; 4 5 $stateProvider 6 .state(‘monitoring‘,{ 7 url: ‘/monitoring‘, 8 templateUrl: ‘pages/monitoring.html‘, 9 controller: function($state) { 10 $state.go(‘monitoring.page1‘)//默认显示出第一个tab 11 } 12 }) 13 .state(‘monitoring.page1‘,{ 14 url: ‘/page1‘, 15 templateUrl: ‘pages/page1.html‘, 16 controller: ‘Page1Ctrl‘ 17 }) 18 .state(‘monitoring.page2‘,{ 19 url: ‘/page2‘, 20 templateUrl: ‘pages/page2.html‘, 21 controller: ‘Page2Ctrl‘ 22 }) 23 .state(‘search‘,{ 24 url: ‘/search‘, 25 templateUrl: ‘pages/search.html‘, 26 controller: ‘SearchCtrl‘ 27 }) 28 });
monitoring.html (添加第二个路由,第二级路由,嵌套在第一级路由中)
1 <a ui-sref=".page1">monitoring</a> 2 <a ui-sref=".page2">seach</a> 3 4 <div ui-view></div>
ui-router 视图嵌套时指定二级视图显示默认页面:
当跳转到 monitoring 页面时,monitoring 中的页面默认为空,要点击了导航才能插入模板,需要使用 $state.go()来指向某个路由(代码如上)
标签:angular uil monitor 指定 src url color acea each
原文地址:http://www.cnblogs.com/miny-simp/p/7762873.html