Question

我想将我的页面拆分为垂直导航栏部分（左侧）和主要内容区域（右侧），并将部分视图（对应于不同的导航选项）显示在＆中＃34;主＆＃34;内容区域。到目前为止，我的部分视图＆＃34; ResourceDashboard.html＆＃34;显示在导航栏下方，而不是右侧。

这是我的垂直导航栏：

<nav class="navbar navbar-default" role="navigation">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Home</a>
    </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
            <li><a ui-sref="resourceDashboard">Resource Dashboard</a></li>
            <li><a class="navbar-brand" href="#">Availability</a></li>

            </li>
        </ul>
    </div>
</nav>

我想将下面的div指定为主要内容区域，并在用户选择时将不同的部分视图注入此区域：

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

这是我的整个index.html：

<!doctype html>
<html lang="en" ng-app="TaskManager">
<head>
    <meta charset="utf-8" />
    <title>Task Manager</title>
    <link href="themes/bootstrap.min.css" rel="stylesheet" />
    <link href="themes/default-theme/ej.widgets.all.min.css" rel="stylesheet" />
    <link href="themes/default.css" rel="stylesheet" />
    <link href="themes/default-responsive.css" rel="stylesheet" />
    <link href="themes/responsive-css/ej.responsive.css" rel="stylesheet" />

    <link href="themes/navbarStyle.css" rel="stylesheet" />


    <script src="scripts/angular.min.js"></script>
    <script src="scripts/jquery-1.10.2.min.js"></script>
    <script src="scripts/jsrender.min.js"></script>
    <script src="scripts/jquery.globalize.min.js"></script>
    <script src="scripts/ej.web.all.min.js"></script>
    <script src="scripts/jsondata.min.js"></script>
    <script src="scripts/jsondata.min.js"></script>
    <script src="scripts/ej.widget.angular.min.js"></script>
    <script src="scripts/properties.js" type="text/javascript"></script>

    <script src="scripts/angular-ui-router.min.js"></script>

    <script src="scripts/bootstrap.min.js"></script>

    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/controllers/resourceDashboardController.js"></script>

</head>
<body>



<nav class="navbar navbar-default" role="navigation">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Home</a>
    </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
            <li><a ui-sref="resourceDashboard">Resource Dashboard</a></li>
            <li><a class="navbar-brand" href="#">Availability</a></li>

            </li>
        </ul>
    </div>
</nav>



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

</body>

</html>

这是我的ui-router东西：

angular.module('TaskManager', ['ejangular','ui.router'])

    .config(function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');
        $stateProvider
            .state('index', {
                url: '/',
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
            })
            .state('resourceDashboard', {
                url: '/resourceDashboard',
                templateUrl: 'views/ResourceDashboard.html',
                controller: 'ResourceDashboardController'
            })
    });

如何完成此双面板布局

如何使用垂直导航栏与ui-router结合将部分放入主内容区域

0 个答案: