2016-06-24 29 views
-2

私はブートストラップと角度jsを持つ管理アプリケーションを開発しています。ヘッダーにnavbarを使用しています。リンクごとに異なるページを読み込む必要があります。どのように各ページをロードして、Navbarを再読み込みする必要がありますか?ブートストラップで複数ページのためにnavbarを残して再ロードする方法

インデックスファイルのコードが添付されています。私は各ファイル(すべてのsite.html)にnavbarコードをコピーしました。私はこれが適切な解決策ではないことを知っています。私は知っているかもしれません、これを行うために利用できるオプションは何ですか?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title></title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script 
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script 
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
</head> 
<body> 

    <nav class="navbar navbar-default "> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#"> Radar </a> 
      </div> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="index.html">Dashboard</a></li> 
       <li><a href="pages/site1.html">site1</a></li> 
       <li><a href="pages/site2.html">site2</a></li> 
       <li><a href="pages/site3.html">site3</a></li> 
       <li><a href="pages/site4.html">site4</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#"><span class="glyphicon glyphicon-user"></span> 
         Hi Anand </a></li> 
       <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 
         Login</a></li> 
      </ul> 
     </div> 
    </nav> 


</body> 
</html> 
+0

? 。ネット? MVC? PHP? –

答えて

1

divを追加したコードでマスターページを作成できます。次に、他のページをdiv内に読み込みます。ジャバスクリプトの

...

<head> 
<title></title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script 
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script 
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
</head> 
<body> 

<nav class="navbar navbar-default "> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="#"> Radar </a> 
     </div> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="index.html">Dashboard</a></li> 
      <li><a href="pages/site1.html">site1</a></li> 
      <li><a href="pages/site2.html">site2</a></li> 
      <li><a href="pages/site3.html">site3</a></li> 
      <li><a href="pages/site4.html">site4</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> 
        Hi Anand </a></li> 
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 
        Login</a></li> 
     </ul> 
    </div> 
</nav> 

<div id="pagediv"> 

</div> 

例:

document.getElementById("pagediv").innerHTML='<object type="text/html" data="pages/site1.html" ></object>'; 
1

ヘッダを作成し、それにコントローラを取り付けます。ヘッダーの後には別のページのコンセントを置いてください。この方法では、すべてのリンクがコンセントにテンプレートをロードし、ヘッダーは再ロードされません。

1

uiルータを使用して状態を維持します。それは親の状態と子の状態の概念を持っています。あなたのコードで親はnavbarになり、子はsite.htmlのページになります。 したがって、すべてのサイトページに共通のnavbarがあります。使用しているどのような言語とフレームワーク

https://scotch.io/tutorials/angular-routing-using-ui-router

関連する問題