AngularJS'de Satır İçi Şablonları Kullanma


82

Satır içi görünüm şablonu yüklemek istedim.

Şablonu türünde bir komut dosyası etiketi içine sardım text/ng-templateve kimliği olarak ayarladım temp1.html. ve işte modül yapılandırmam şöyle görünüyor

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

GET http://localhost:41685/temp1.html 404 (Not Found)Konsol penceremde bana bu isimde bir dosya aradığı anlamına geliyor.

Sorum: Yollarımı satır içi şablonları kullanacak şekilde nasıl yapılandırabilirim?

Güncelleme: İşte sunucu tarafından oluşturulan DOM'um nasıl görünüyor

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

Yanıtlar:


111

Ody, doğru yoldaydın, tek sorun etiketlerin direktifin kullanıldığı DOM öğesinin dışında olmasıydı ng-app. Öğeye taşırsanız <body ng-app="LearningApp">satır içi şablonlar çalışmalıdır.

Şu soruyu da alakalı bulabilirsiniz: AngularJS yüklemesini başlangıçta ve gerektiğinde değil de kısmi yapmanın bir yolu var mı?


2
Şimdi çoğu öğreticinin neden ng-app direktifini html öğesine eklemeyi tercih ettiğini anlıyorum. Bunun nedeni, o uygulama / modül ile ilgili herhangi bir şeyin ng-app kapsamında olması gerektiğidir, bu nedenle html etiketine koymak, bunun gibi gelecekteki sorunları önler
Ody

3
Bu, belgelerin bahsetmesi gereken bir şeydir. Bu 404'ün neden göründüğünü merak ederek saatlerimi kaybettim ...
Rob Juurlink

32

Şablon adının çalışması gerektiğini ayarlamak için script-Element'in id-Attribute'unu kullanmayı deneyin.

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

Ben bunu yaptım. İşe yaramadı. Ana sayfamın aslında tipik bir html dosyası olmadığından şüpheleniyorum. olarak sunucu / kontrolör
Ody

neden şablon dosyalarını kullanmıyorsunuz, bence bu daha açık.
tschiela

Evet, haklısın. Bu yöntem işe yarıyor, daha iyi performans gösteriyor. Ancak, omurga gibi eski çerçevelerde yazılmış ve büyük ölçüde satır içi şablonlara dayanan, taşımak istediğim uygulamalarım var. Bu yüzden açısal olarak nasıl yapıldığını bilmek istedim.
Ody
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.