2013-04-20 22 views
79

Satır içi görünüm şablonu yüklemek istedim.Inline Şablonlarını Köşede Kullanma

Şablonu text/ng-template türünde bir komut dosyası etiketine ekledim ve kimliği temp1.html olarak ayarlayın. ve burada O bu isimde bir dosya arıyor yani benim konsol penceresinde bana GET http://localhost:41685/temp1.html 404 (Not Found) söyler

learningApp.config(function ($routeProvider) { 
    $routeProvider 
     .when("/first",{ controller: "SimpleController", templateUrl: "temp1.html"}) 
     .when("/second", {controller: "SimpleController", templateUrl: "temp2.html"}) 
     .otherwise({redirectTo : "/first"}); 
}); 

gibi benim modül yapılandırma görünüyor budur.

Soruma: Satır içi şablonları kullanmak için yollarımı nasıl yapılandırabilirim?

Güncelleme: İşte

<!DOCTYPE html> 
<html> 
<head> 
    <script src="/Scripts/angular.js"></script> 
    <link href="/Content/bootstrap.css" rel="stylesheet"/> 
</head> 
<body> 
    <div class="container">  
    <h2>Getting Started with Angular</h2> 
    <div class="row"> 
     <div class="panel" ng-app="LearningApp"> 
      <div ng-view></div> 
     </div> 
    </div> 

<script type="text/ng-template" id="temp1.html"> 
    <div class="view"> 
     <h2>First View</h2> 
     <p> 
      Search:<input type="text" ng-model="filterText" /> 
     </p> 
     <ul class="nav nav-pills"> 
      <li ng-repeat="cust in customers | orderBy:'name' | filter: filterText "><a href="#">{{cust.name}} - {{cust.school}}</a></li> 
     </ul> 
    </div> 
</script> 

<script type="text/ng-template" id="temp2.html"> 
    <div class="view"> 
     <h2>Second View</h2> 
     <p> 
      Search:<input type="text" ng-model="filterText" /> 
     </p> 
     <ul class="nav nav-pills"> 
      <li ng-repeat="cust in customers | orderBy:'name' | filter: filterText "><a href= "#">{{cust.name}} - {{cust.school}}</a></li> 
     </ul> 
    </div> 
</script> 
    </div> 
    <script src="/Scripts/jquery-1.9.1.js"></script> 
    <script src="/Scripts/bootstrap.js"></script> 
    <script src="/Scripts/app/LearningApp.js"></script> 
</body> 
</html> 

cevap

111

Ody, doğru yolda olduğumuzu, tek sorun etiketleri ng-app yönergesi üzerinde kullanıldığı DOM öğesinin dışında olduklarını oldu. <body ng-app="LearningApp"> öğeye taşırsanız, satır içi şablonlar çalışmalıdır. Is there a way to make AngularJS load partials in the beginning and not at when needed?

+0

Çalıştı. Teşekkürler – Ody

+2

Şimdi çoğu öğreticinin ng-app yönergesini html öğesine eklemeyi tercih ettiğini görüyorum. Çünkü bu uygulama/modülle ilgili olan herhangi bir şey ng-app kapsamı içinde olmalı, dolayısıyla html etiketine koymak, bu gibi problemleri önler. Bu, – Ody

+2

Bu, belgelerin bahsetmesi gereken bir şeydir. O 404'ün neden ortaya çıktığını merak ettim. –

31

şablonun adı çalışmalıdır ayarlamak için komut-Element id-Özellik kullanmak deneyin gibi benim sunucu-render DOM görünüyor budur.

<script type="text/ng-template" id="temp1.html"> 
    ... some template stuff 
</script> 
+0

ben yaptım:

Ayrıca, ilgili bu soruyu bulabilir. Çalışmadı. Ana sayfamın aslında normal bir html dosyası olmadığından şüpheleniyorum. http: // server/controller/ – Ody

+0

'da neden şablon dosyalarını kullanmıyorsunuz, opionyonumda daha net. – tschiela

+0

Evet haklısın. Bu yöntem iyi çalışıyor, daha iyi ve daha iyi performans gösteriyor. Ancak, taşınmak istediğim, omurga gibi eski çerçevelerde yazılan ve büyük oranda satır içi şablonlara dayanan uygulamalarım var. Bu yüzden açısal olarak nasıl yapıldığını bilmek istedim. – Ody