Html 将所有页面与主菜单页面集成_Html_Css_Angularjs

Html 将所有页面与主菜单页面集成

html css angularjs

Html 将所有页面与主菜单页面集成,html,css,angularjs,Html,Css,Angularjs,我想将所有页面集成到主页（index.html）中，在这里我创建了左侧面板，其中提供了所有页面链接。现在我想在灰色区域显示我的其他html页面。我可以把网页放入主页，但不适合空白区域。希望我清楚。提前谢谢你的帮助 index.html <!DOCTYPE html> <html ng-app="scotchApp"> <head> <title></title> <meta charset="utf-8" />

我想将所有页面集成到主页（index.html）中，在这里我创建了左侧面板，其中提供了所有页面链接。现在我想在灰色区域显示我的其他html页面。我可以把网页放入主页，但不适合空白区域。希望我清楚。提前谢谢你的帮助

index.html

<!DOCTYPE html>
<html ng-app="scotchApp">
<head>
    <title></title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <link href="index.css" rel="stylesheet" />
    <script src="app.js"></script>
</head>
<body ng-controller="mainController">

    <div class="navbar navbar-inverse navbar-fixed-left">
        <p>
            <br />
            <br />
        </p>
        <b><a class="navbar-brand" href="#" style="color:white">Administrator</a></b>
        <ul class="nav navbar-nav">
            <li><a href="#Header">Header Details</a></li>
            <li><a href="#ReportDetails">Report Details</a></li>
            <li><a href="#ProjectIDCreation">Project ID Creation</a></li>
            <li><a href="#">Display all submission for verify</a></li>
        </ul>

        <b><a class="navbar-brand" href="#" style="color:white">User</a></b>
        <ul class="nav navbar-nav">
            <li><a href="#">Timesheet Information</a></li>

        </ul>
    </div>

    <div class="navbar navbar-inverse navbar-fixed-top">

        <ul id="login_signup">
            <li><a href="#" id="login_link">Login <span>&#x25c0;</span></a></li>
            <li><a href="#" id="sign_link">SignUp <span>&#x25c0;</span></a></li>
        </ul>
    </div>

    <div class="pull-right">
        <div ng-view></div>
    </div>
</body>
</html>

app.js

// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function ($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/Header', {
            templateUrl: '/Header.html',
            controller: 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl: 'pages/about.html',
            controller: 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl: 'pages/contact.html',
            controller: 'contactController'
        });
});

我必须设置正确的页边距才能将页面放置在正确的位置。

你能为其他任何页面发布html吗？如果你能为此创建一个Plnkr，那就太好了。@Manish因为代码会很长，所以我没有添加其他html代码。在这里找到小提琴[链接]["我需要另一个HTML页面在空白区域显示。@初学者，你想在空白区域中显示你的其他HTML。这取决于你的路由URL和你在JS中提供的映射。如果你试图点击URL，比如……/页眉，那么Health.html将显示在你有NG VeWHAW的DIV中。看一看，你需要为身体提供适当的高度和宽度，将你的视线放在容器内，并提供适当的高度和宽度margins@Manish是的，你说得对。我必须添加正确的页边空白。现在开始工作：）

// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function ($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/Header', {
            templateUrl: '/Header.html',
            controller: 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl: 'pages/about.html',
            controller: 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl: 'pages/contact.html',
            controller: 'contactController'
        });
});