Как отображать html-страницы различного содержимого в разделе содержимого главной страницы в зависимости от выбора меню - PullRequest
Новая
       5

Как отображать html-страницы различного содержимого в разделе содержимого главной страницы в зависимости от выбора меню

0 голосов
/ 21 мая 2018

Как я могу показать разные страницы контента в разделе макета контента главной страницы на основе выбора меню из заголовка.

Скажем, если я выберу О программе-> Миссия, я хочу показать HtmlPage1.html, скажем, если я выберуAbout-> Vision Я хочу показать HtmlPage2.html

Меню MyHeader в BasePage.html 

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-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 href="./" class="navbar-brand">Bootstrap Menu</a>
                </div>
                <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="HtmlPage1.html">Mission</a></li>
                                <li><a href="HtmlPage2.html">Vision</a></li>
                                <li><a href="#">Careers</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Products</a>
                        </li>
                        <li>
                            <a href="#">Services</a>
                        </li>
                        <li class="active">
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>

  </div>
 <div style="margin-top:100px; text-align:center;"> 
            **********************Main Content Here****************************

  </div>
  <div>

1 Ответ

0 голосов
/ 21 мая 2018

Вы должны использовать ngRoute (из angular-route модуля) для отображения контента с шаблонами / частями.Вам нужно будет добавить <div ng-view></div> вместо *Main Content Here* для загрузки ваших шаблонов.Этим частям не нужны никакие заголовки, такие как <!DOCTYPE html>, так как они вставляются в ваш HTML и отображаются.

Вот небольшая демонстрация: 

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "main.html"
    })
    .when("/page1", {
      templateUrl: "HtmlPage1.html"
    })
    .when("/page2", {
      templateUrl: "HtmlPage2.html"
    })
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

<body ng-app="myApp">

  <p><a href="#!/">Main</a></p>

  <ul>
    <li><a href="#!/page1">Mission</a></li>
    <li><a href="#!/page2">Vision</a></li>
  </ul>

  <div style="text-align:center;">
    <div ng-view></div>
  </div>


  <!-- These can be separate files in your directory -->
  <script type="text/ng-template" id="main.html">
    Main page
  </script>
  <script type="text/ng-template" id="HtmlPage1.html">
    Mission page
  </script>
  <script type="text/ng-template" id="HtmlPage2.html">
    Vision page
  </script>

</body>

</html>

В качестве альтернативы вы можете использовать ng-include (для верхних и нижних колонтитулов) или директивы (для небольших функций, таких как раздел входа в систему).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...