Verwenden von Inline-Vorlagen in AngularJS

82

Ich wollte eine Inline-Ansichtsvorlage laden.

Ich habe die Vorlage in ein Skript-Tag vom Typ eingewickelt text/ng-templateund die ID auf gesetzt temp1.html. und so sieht meine Modulkonfiguration aus

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

Es sagt mir , GET http://localhost:41685/temp1.html 404 (Not Found)in meiner Konsolenfenster bedeutet , dass es für eine Datei dieses Namens sucht.

Meine Frage lautet: Wie konfiguriere ich meine Routen für die Verwendung von Inline-Vorlagen?

Update: So sieht mein vom Server gerendertes DOM aus

<!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>
javascript angularjs Ody
quelle

Antworten:

112

Ody, Sie waren auf dem richtigen Weg. Das einzige Problem war, dass sich die Tags außerhalb des DOM-Elements befinden, für das die ng-appDirektive verwendet wird. Wenn Sie es in das <body ng-app="LearningApp">Element verschieben, sollten Inline-Vorlagen funktionieren.

Möglicherweise ist diese Frage auch relevant: Gibt es eine Möglichkeit, AngularJS-Ladepartien am Anfang und nicht bei Bedarf partiell zu machen?

pkozlowski.opensource
quelle
2
Ich verstehe jetzt, warum die meisten Tutorials es vorziehen, die ng-app-Direktive zum HTML-Element hinzuzufügen. Das liegt daran, dass alles, was mit dieser App / diesem Modul zu tun hat, im Bereich der ng-App liegen muss. Wenn Sie es also in das HTML-Tag einfügen, werden zukünftige Probleme wie diese vermieden
Ody
3
Dies muss in der Dokumentation erwähnt werden. Ich habe Stunden verloren und mich gefragt, warum diese 404 aufgetaucht sind ...
Rob Juurlink
31

Versuchen Sie, das ID-Attribut des Skriptelements zu verwenden, um den Namen der Vorlage festzulegen, die funktionieren soll.

<script type="text/ng-template" id="temp1.html">
   ... some template stuff
</script>
tschiela
quelle
Ich habe das gemacht. Hat nicht funktioniert. Ich vermute, dass meine Hauptseite eigentlich keine typische HTML-Datei ist. wie in Server / Controller
Ody
Warum Sie keine Vorlagendateien verwenden, ist in meiner Meinung klarer.
Tschiela
Ja, du hast recht. Diese Methode funktioniert gut, ist besser und alles. Ich möchte jedoch Anwendungen migrieren, die in älteren Frameworks wie Backbone geschrieben wurden und stark auf Inline-Vorlagen basieren. Deshalb wollte ich wissen, wie es im Winkel gemacht wird.
Ody