AngularJs ile yönlendirin - ancak sadece div/main öğesinin içinde

Bir üstbilgi, ana ve altbilgiye sahip bir html sayfam var (ben materialize ve angularJS kullanıyorum). Her zaman üstbilgi ve altbilginin aynı kalmasını istiyorum, ancak sidenav'daki bağlantılara bastığımda ana öğenin başka bir html sayfası olmasını istiyorum. Sidenav'daki bilgi bağlantısına bastığımı, üstbilgi ve altbilginin kalmasını istiyorum, ancak html'nin ana kısmından başka bir sayfaya geçiyorum. AngularJs ile yönlendirin - ancak sadece div/main öğesinin içinde

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

gerçekten kolay olabilir, ama ben ileri geri geçiş yapabilmek ve ayrıca üstbilgi ve altbilgi tutmak için nasıl bulamadı: Bu defa ne var. Yeni html sayfasını bağlamayı denedim, ancak daha sonra üstbilgi ve altbilgiyi kopyalamam gerekiyor, bu da ideal değil. Örneğin sidenav'u değiştirmek istersem düzenlemek zorunda olduğum 10-15 html sayfalara sahip olmak istemiyorum.

kaynak

2016-04-09 user16655

Bir yönlendirici kurup html elemanlarının bazı bir ng-view direktifini koymak zorunda:

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

basit yönlendirme örnek: kenar çubuğu linki kullanınız daha sen ise

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 ve yönergesi

ile tanımlanan öğe arasında

kaynak

2016-04-09 21:48:21 kabaehr

AngularJs ile yönlendirin - ancak sadece div/main öğesinin içinde

cevap

İlgili konular