angularjs+bootstrap+SpringMVC+Spring+mybatis+maven--ui.router路由一

华瀚漠
2023-12-01

ssm框架搭建以后会发布如何搭建,主要讲讲如何使用ui.rounter

  1. 引入ui-rounter.js
<script src="../../framework/angular-1.5.6/angular.js"></script>
<script src="../../js/config.js"></script>
<script src="../../js/controller.js"></script>
<script src="../../js/directives.js"></script>
<script src="../../js/filters.js"></script>
<script src="../../js/services.js"></script>
<script src="../../framework/angular-ui-router.js"></script>
  1. 准备html页面,在首页中添加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en" ng-app="process_app">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>首页</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    name="viewport">
<!-- Bootstrap 3.3.5  css-->
<link rel="stylesheet"
    href="../../framework/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome 4.5.0 font-->
<link rel="stylesheet"
    href="../../adminlte/fonts-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
    href="../../adminlte/ionicons-master/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../adminlte/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. We have chosen the skin-blue for this starter
        page. However, you can choose any other skin. Make sure you
        apply the skin class to the body tag so the changes take effect.
  -->
<link rel="stylesheet"
    href="../../adminlte/dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->


<!-- jQuery 2.2.3 -->
<script src="../../adminlte/dist/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../../framework/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="../../adminlte/dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../adminlte/dist/js/demo.js"></script>
<!-- angular js -->
<script src="../../framework/angular-1.5.6/angular.js"></script>
<script src="../../js/config.js"></script>
<script src="../../js/controller.js"></script>
<script src="../../js/directives.js"></script>
<script src="../../js/filters.js"></script>
<script src="../../js/services.js"></script>
<script src="../../framework/angular-ui-router.js"></script>

</head>
<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">

        <!-- Main Header -->
        <header class="main-header"> <!-- Logo --> <a
            href="index2.html" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>P</b>eck</span> <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>风</b>中思絮</span>
        </a> <!-- Header Navbar --> <nav class="navbar navbar-static-top"
            role="navigation"> <!-- Sidebar toggle button--> <a href="#"
            class="sidebar-toggle" data-toggle="offcanvas" role="button"> <span
            class="sr-only">Toggle navigation</span>
        </a> <!-- Navbar Right Menu -->
        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
                <!-- Messages: style can be found in dropdown.less-->
                <li class="dropdown messages-menu">
                    <!-- Menu toggle button --> <a href="#" class="dropdown-toggle"
                    data-toggle="dropdown"> <i class="fa fa-envelope-o"></i> <span
                        class="label label-success">4</span>
                </a>
                    <ul class="dropdown-menu">
                        <li class="header">You have 4 messages</li>
                        <li>
                            <!-- inner menu: contains the messages -->
                            <ul class="menu">
                                <li>
                                    <!-- start message --> <a href="#">
                                        <div class="pull-left">
                                            <!-- User Image -->
                                            <img src="../../adminlte/dist/img/user2-160x160.jpg"
                                                class="img-circle" alt="User Image">
                                        </div> <!-- Message title and timestamp -->
                                        <h4>
                                            Support Team <small><i class="fa fa-clock-o"></i> 5
                                                mins</small>
                                        </h4> <!-- The message -->
                                        <p>Why not buy a new awesome theme?</p>
                                </a>
                                </li>
                                <!-- end message -->
                            </ul> <!-- /.menu -->
                        </li>
                        <li class="footer"><a href="#">See All Messages</a></li>
                    </ul>
                </li>
                <!-- /.messages-menu -->

                <!-- Notifications Menu -->
                <li class="dropdown notifications-menu">
                    <!-- Menu toggle button --> <a href="#" class="dropdown-toggle"
                    data-toggle="dropdown"> <i class="fa fa-bell-o"></i> <span
                        class="label label-warning">10</span>
                </a>
                    <ul class="dropdown-menu">
                        <li class="header">You have 10 notifications</li>
                        <li>
                            <!-- Inner Menu: contains the notifications -->
                            <ul class="menu">
                                <li>
                                    <!-- start notification --> <a href="#"> <i
                                        class="fa fa-users text-aqua"></i> 5 new members joined today
                                </a>
                                </li>
                                <!-- end notification -->
                            </ul>
                        </li>
                        <li class="footer"><a href="#">View all</a></li>
                    </ul>
                </li>
                <!-- Tasks Menu -->
                <li class="dropdown tasks-menu">
                    <!-- Menu Toggle Button --> <a href="#" class="dropdown-toggle"
                    data-toggle="dropdown"> <i class="fa fa-flag-o"></i> <span
                        class="label label-danger">9</span>
                </a>
                    <ul class="dropdown-menu">
                        <li class="header">You have 9 tasks</li>
                        <li>
                            <!-- Inner menu: contains the tasks -->
                            <ul class="menu">
                                <li>
                                    <!-- Task item --> <a href="#"> <!-- Task title and progress text -->
                                        <h3>
                                            Design some buttons <small class="pull-right">20%</small>
                                        </h3> <!-- The progress bar -->
                                        <div class="progress xs">
                                            <!-- Change the css width attribute to simulate progress -->
                                            <div class="progress-bar progress-bar-aqua"
                                                style="width: 20%" role="progressbar" aria-valuenow="20"
                                                aria-valuemin="0" aria-valuemax="100">
                                                <span class="sr-only">20% Complete</span>
                                            </div>
                                        </div>
                                </a>
                                </li>
                                <!-- end task item -->
                            </ul>
                        </li>
                        <li class="footer"><a href="#">View all tasks</a></li>
                    </ul>
                </li>
                <!-- User Account Menu -->
                <li class="dropdown user user-menu">
                    <!-- Menu Toggle Button --> <a href="#" class="dropdown-toggle"
                    data-toggle="dropdown"> <!-- The user image in the navbar--> <img
                        src="../../adminlte/dist/img/user2-160x160.jpg" class="user-image"
                        alt="User Image"> <!-- hidden-xs hides the username on small devices so only the image appears. -->
                        <span class="hidden-xs">Alexander Pierce</span>
                </a>
                    <ul class="dropdown-menu">
                        <!-- The user image in the menu -->
                        <li class="user-header"><img
                            src="../../adminlte/dist/img/user2-160x160.jpg"
                            class="img-circle" alt="User Image">

                            <p>
                                Alexander Pierce - Web Developer <small>Member since
                                    Nov. 2012</small>
                            </p></li>
                        <!-- Menu Body -->
                        <li class="user-body">
                            <div class="row">
                                <div class="col-xs-4 text-center">
                                    <a href="#">Followers</a>
                                </div>
                                <div class="col-xs-4 text-center">
                                    <a href="#">Sales</a>
                                </div>
                                <div class="col-xs-4 text-center">
                                    <a href="#">Friends</a>
                                </div>
                            </div> <!-- /.row -->
                        </li>
                        <!-- Menu Footer-->
                        <li class="user-footer">
                            <div class="pull-left">
                                <a href="#" class="btn btn-default btn-flat">Profile</a>
                            </div>
                            <div class="pull-right">
                                <a href="#" class="btn btn-default btn-flat">Sign out</a>
                            </div>
                        </li>
                    </ul>
                </li>
                <!-- Control Sidebar Toggle Button -->
                <li><a href="#" data-toggle="control-sidebar"><i
                        class="fa fa-gears"></i></a></li>
            </ul>
        </div>
        </nav> </header>
        <!-- Left side column. contains the logo and sidebar -->
        <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar"> <!-- Sidebar user panel (optional) -->
        <div class="user-panel">
            <div class="pull-left image">
                <img src="../../adminlte/dist/img/user2-160x160.jpg"
                    class="img-circle" alt="User Image">
            </div>
            <div class="pull-left info">
                <p>Alexander Pierce</p>
                <!-- Status -->
                <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
            </div>
        </div>

        <!-- search form (Optional) -->
        <form action="#" method="get" class="sidebar-form">
            <div class="input-group">
                <input type="text" name="q" class="form-control"
                    placeholder="Search..."> <span class="input-group-btn">
                    <button type="submit" name="search" id="search-btn"
                        class="btn btn-flat">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
        </form>
        <!-- /.search form --> <!-- Sidebar Menu -->

        <div ui-view="menu"></div>





        <!-- /.sidebar-menu --> </section> <!-- /.sidebar --> </aside>

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
            <h1>
                Page Header <small>Optional description</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
                <li class="active">Here</li>
            </ol>
            </section>

            <!-- Main content -->

            <div ui-view="content" class="content"></div>



            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->

        <!-- Main Footer -->
        <footer class="main-footer"> <!-- To the right -->
        <div class="pull-right hidden-xs">Anything you want</div>
        <!-- Default to the left --> <strong>Copyright &copy; 2016 <a
            href="#">Company</a>.
        </strong> All rights reserved. </footer>

        <!-- Control Sidebar -->
        <aside class="control-sidebar control-sidebar-dark"> <!-- Create the tabs -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">

            <li class="active"><a href="#control-sidebar-home-tab"
                data-toggle="tab"><i class="fa fa-home"></i></a></li>
            <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i
                    class="fa fa-gears"></i></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <!-- Home tab content -->
            <div class="tab-pane active" id="control-sidebar-home-tab">
                <h3 class="control-sidebar-heading">Recent Activity</h3>
                <ul class="control-sidebar-menu">
                    <li><a href="javascript::;"> <i
                            class="menu-icon fa fa-birthday-cake bg-red"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

                                <p>Will be 23 on April 24th</p>
                            </div>
                    </a></li>
                </ul>
                <!-- /.control-sidebar-menu -->

                <h3 class="control-sidebar-heading">Tasks Progress</h3>
                <ul class="control-sidebar-menu">
                    <li><a href="javascript::;">
                            <h4 class="control-sidebar-subheading">
                                Custom Template Design <span class="pull-right-container">
                                    <span class="label label-danger pull-right">70%</span>
                                </span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
                            </div>
                    </a></li>
                </ul>
                <!-- /.control-sidebar-menu -->

            </div>
            <!-- /.tab-pane -->
            <!-- Stats tab content -->
            <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab
                Content</div>
            <!-- /.tab-pane -->
            <!-- Settings tab content -->
            <div class="tab-pane" id="control-sidebar-settings-tab">
                <form method="post">
                    <h3 class="control-sidebar-heading">General Settings</h3>

                    <div class="form-group">
                        <label class="control-sidebar-subheading"> Report panel
                            usage <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>Some information about this general settings option</p>
                    </div>
                    <!-- /.form-group -->
                </form>
            </div>
            <!-- /.tab-pane -->
        </div>
        </aside>

        <!-- /.control-sidebar -->
        <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
        <div class="control-sidebar-bg"></div>
    </div>
    <!-- ./wrapper -->

    <!-- REQUIRED JS SCRIPTS -->

</body>
</html>
  1. menu .html
<ul class="sidebar-menu">
<!--    <li class="header">HEADER</li> -->
    <!-- Optionally, you can add icons to the links -->
    <li class="active"><a href="#"><i class="fa fa-link"></i> <span>我的日历</span></a></li>
    <li><a href="#"><i class="fa fa-link"></i> <span>Another
                Link</span></a></li>
    <li class="treeview"><a href="#"><i class="fa fa-link"></i> <span>我的邮箱</span>
            <span class="pull-right-container"> <i
                class="fa fa-angle-left pull-right"></i>
        </span> </a>
        <ul class="treeview-menu">
            <li><a href="#">发送邮件</a></li>
            <li><a href="#">收取邮件</a></li>
        </ul></li>
</ul>
  1. 500.html
<p>An exception occurs on this Operation.</p>
<p>
    <b>这是内容.</b>
</p>
  1. config.js

代码解释:当进入index界面时,路由会在浏览器地址后面添加500如:然后读取相应界面,功能类似与Titles的框架,html相当于公共模板页,根据.state(‘)(类似switch) 不同的值,读取相应不同页面

file:///D:/EclipseWorkspace/process-demo/src/main/webapp/WEB-INF/views/index.html#/500
var processApp=angular.module('process_app', ['ui.router']);
processApp.config(function ($stateProvider, $urlRouterProvider) {
     $urlRouterProvider.otherwise('/500');
        $stateProvider.state('500',{
            url:'/500',
            views:{
                'content':{
                    templateUrl:"/tpls/500.html",
                    //controller:'homeCtrl'
                },'menu':{
                    templateUrl:'/tpls/menu.html',
                    //controller:'indexTreeCtrl'
                }
            }
        })
    });
 类似资料: