2016-07-08 25 views
5

Angular js konusunda yeniyim ve html snippet'lerini önyükleme şablonu yardımıyla bir html sayfası içine yerleştirmek için Angular js kullanmaya çalışıyorum.Angular js kullanarak Html sayfasını katıştırma

This index.html ve mainmenu.html Her ikisi de aynı klasörde benim manimenu.html

<!-- Navigation --> 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Start Bootstrap</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a href="#">About</a> 
       </li> 
       <li> 
        <a href="#">Services</a> 
       </li> 
       <li> 
        <a href="#">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

benim index.html

<body > 
    <div ng-app=""> 
    <div ng-include="mainmenu.html"></div> 


     <!-- Page Content --> 
      <div class="container"> 

     <div class="row"> 
      <div class="col-lg-12 text-center"> 
       <h1>Starter Template</h1> 
       <p class="lead">Complete with pre-defined file paths that you won't have to change!</p> 

      </div> 
     </div> 
    <!-- /.row --> 

    </div> 
<!-- /.container --> 
</div> 
    <!-- jQuery Version 1.11.1 --> 
    <script src="js/jquery.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
</body> 

olduğunu. Ancak mainmenu.html, index.html'nin içinde gösterilmiyor. Herkes bana bu bu

+0

Bir plunker oluştur – Sajeetharan

cevap

4

.try çözmeye yardımcı veya

<div ng-include src="'mainmenu.html'"></div> 

http://stackoverflow.com/questions/13943471/angularjs-ng-include 
+0

Teşekkürler Sa E .. :) – Raj

+0

hoş geldiniz sevgili dostum :) - –

5

aşağıdaki bağlantıyı ödeme lütfen bilir Eğer kaçırdığını Tüm Şablonunuza referans etrafında tırnak olduğunu. Tırnak olmadan, bir ifade olarak değerlendirilir. URL'ye değerlendiren documentation

açısal ifade From

<div ng-include="'mainmenu.html'"></div> 

. Kaynak bir dizge sabiti ise, tek tırnak içine aldığınızdan emin olun, örn. src = " 'myPartialTemplate.html'".