Redirect mit angularJs - aber nur innerhalb div/main Element

Ich habe eine HTML-Seite mit einer Kopf-, Haupt- und Fußzeile (ich verwende materialize und angularJS). Ich möchte immer, dass die Kopf- und Fußzeile gleich bleiben, aber wenn ich Links im sideinav drücke, möchte ich, dass das Hauptelement eine andere HTML-Seite ist. Nehmen wir an, ich drücke den Info-Link im Sideinav, ich möchte, dass die Kopf- und Fußzeile erhalten bleiben, aber ich bewege mich vom Hauptteil des HTML zu einer anderen Seite. Das ist, was ich habe, so weit:Redirect mit angularJs - aber nur innerhalb div/main Element

<!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>

Dies könnte einfach sein, aber ich habe nicht herausgefunden, wie die Lage sein, hin und her zu wechseln, und hält auch die Kopf- und Fußzeile. Ich habe versucht, die neue HTML-Seite einfach zu verlinken, aber dann muss ich über die Kopf- und Fußzeile kopieren, was nicht ideal ist. Ich möchte nicht 10-15 Seiten haben, die ich bearbeiten muss, wenn ich zum Beispiel das Sitenav ändern möchte.

Quelle

2016-04-09 user16655

Sie haben einen Router einzurichten und legte eine ng-view Richtlinie über einige Ihrer HTML-Elemente:

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

einfaches Routing-Beispiel:

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

Wenn Sie als verwenden Sidebar Link

Der routeProvider lädt Ihre home.html und homeCtrl zwischen dem definierten Element mit der ng-view Direktive

Quelle

2016-04-09 21:48:21 kabaehr

Redirect mit angularJs - aber nur innerhalb div/main Element

Antwort

Verwandte Themen