angleJsでリダイレクトする - div/main要素内のみ

ヘッダー、メインとフッターを持つhtmlページがある（私はmaterializeとangularJSを使用する）。私はいつもヘッダとフッタを同じままにしておきたいが、sidenavのリンクを押すと、メインの要素を別のhtmlページにしたい。 sidenavのinfoリンクを押して、ヘッダーとフッターを残したいとしましょうが、htmlの主要部分から別のページに移動します。 angleJsでリダイレクトする - div/main要素内のみ

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/> 
    <title>MyPage</title> 
    <!-- CSS --> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/> 
    <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/> 
</head> 

<body ng-app="myPage" ng-controller="mainCtrl"> 
    <header> 
    <ul id="sidenav" class="side-nav fixed light-blue lighten-1"> 
     <li><a id="page" class="white-text text-accent-1" href="#">Home</a> </li> 
     <br/><br/> 
     <li><a id="page1" class="white-text text-accent-1" href="#"><b>Info</b></a></li> 
     <li><a id="page2" class="white-text text-accent-1" href="#"><b>Another page</b></a></li> 
     <li><a id="page3" class="white-text text-accent-1" href="#"><b>Even one more page</b></a></li> 
    </ul> 
    </header> 

    <main> 
    <div id="main"> 
     <p> Some text for main page here </p> 
    </div> 
    </main> 

    <footer class="page-footer orange"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col l6 s12"> 
      <h5 class="white-text">About</h5> 
      <p class="grey-text text-lighten-4"> 
      About my company. 
      </p> 
     </div> 
     </div> 
    </div> 
    </footer> 


    <!-- Scripts--> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script src="js/materialize.js"></script> 
    <script src="controllers/mainCtrl.js"></script> 
</body> 
</html>

この

は本当に簡単なことかもしれませんが、私は前後に切り替えることができ、また、ヘッダーとフッターを維持する方法を発見していない：これは私がこれまで持っているものです。私はちょうど新しいHTMLページをリンクしようとしましたが、私は理想的ではないヘッダーとフッターをコピーする必要があります。私はおそらくsidenavを変更したい場合に編集しなければならない10-15のhtmlページを持つことを望んでいません。

出典

2016-04-09 user16655

あなたは、ルータを設定し、HTML要素の一部にng-viewディレクティブを配置する必要があります：

... 
</header> 
<div ng-view> 
    <main> 
     ... 
    </main> 
</div> 
<footer class="page-footer orange"> 
...

簡単なルーティング例：サイドバーのリンクを使用するよりも、あなたならば

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
     .when('/home', { 
     templateUrl: 'home.html', 
     controller: 'homeCtrl', 
    ); 
}]);

を

<a id="page" class="white-text text-accent-1" href="#/home">Home</a>

routeProviderはhome.htmlとをロードします定義されたエレメントとng-viewディレクティブとの間の

出典

2016-04-09 21:48:21 kabaehr

angleJsでリダイレクトする - div/main要素内のみ

答えて

関連する問題