zoukankan      html  css  js  c++  java
  • angular-ui-router 多视图

    文件结构:

    - 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()来指向某个路由(代码如上)

    【二级视图默认页面】:若二级实图有自己的控制器,可以将二级视图的主页面和第一个子页面设置为同一个控制器,来达到设置默认页面的方法。

    $stateProvider
            .state('page',{
                url: '/page',
                templateUrl: 'pages/page.html',
                controller: 'PageCtrl'
            })
            .state('page.page1',{
                url: '/page1',
                templateUrl: 'pages/page1.html',
                controller: 'PageCtrl'
            })
            .state('page.page2',{
                url: '/page2',
                templateUrl: 'pages/page2.html',
                controller: 'Page2Ctrl'
            })
  • 相关阅读:
    并发编程之多线程(理论部分)
    基于TCP和UDP的socket
    ajax笔记 显示出所城市名称 ShowCity.aspx Html代码
    蒸饭的纱布
    ajax 笔记--不刷新实现简单的留言版 guestBook
    从表的第几条取到第几条记录
    在asp.net添加数据到XML里去
    ajax 笔记-- 写了一个不用刷新就能实现--用户名验证的例子
    今天生日
    ajax 笔记不用刷新实现数据的分页显示
  • 原文地址:https://www.cnblogs.com/miny-simp/p/7762873.html
Copyright © 2011-2022 走看看