Verwenden von Inline-Vorlagen in AngularJS

Lesezeit: 3 Minuten

Benutzer-Avatar
Ody

Ich wollte eine Inline-Ansichtsvorlage laden.

Ich habe die Vorlage in ein script-Tag vom Typ gepackt text/ng-template und setze die id auf 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 meinem Konsolenfenster, was bedeutet, dass es nach einer Datei mit diesem Namen sucht.

Meine Frage ist: Wie konfiguriere ich meine Routen, um Inline-Vorlagen zu verwenden?

Update: So sieht mein vom Server gerendertes DOM aus

<!DOCTYPE html>
<html>
<head>
    <script src="https://stackoverflow.com/Scripts/angular.js"></script>
    <link href="http://stackoverflow.com/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>

Benutzer-Avatar
pkozlowski.opensource

Ody, du warst auf dem richtigen Weg, das einzige Problem war, dass die Tags sind außen des DOM-Elements, auf dem die ng-app Richtlinie verwendet wird. Wenn Sie es in die verschieben <body ng-app="LearningApp"> Element-Inline-Vorlagen sollten funktionieren.

Möglicherweise finden Sie auch diese Frage relevant: Gibt es eine Möglichkeit, AngularJS dazu zu bringen, Teile am Anfang zu laden und nicht bei Bedarf?

  • Ich verstehe jetzt, warum die meisten Tutorials es vorziehen, die Direktive ng-app zum HTML-Element hinzuzufügen. Das liegt daran, dass alles, was sich auf diese App/dieses Modul bezieht, innerhalb des ng-app-Bereichs liegen muss, daher vermeidet das Einfügen in das HTML-Tag zukünftige Probleme wie dieses

    – Odie

    21. April 2013 um 9:20 Uhr

  • Dies ist etwas, was die Dokumentation erwähnen muss. Ich habe Stunden damit verbracht, mich zu fragen, warum diese 404 aufgetaucht sind …

    – Rob Juurlink

    2. Dezember 2013 um 22:20 Uhr

Versuchen Sie, das id-Attribut des script-Elements zu verwenden, um den Namen der Vorlage festzulegen, sollte funktionieren.

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

  • Ich habe das gemacht. Hat nicht funktioniert. Ich vermute, dass meine Hauptseite eigentlich keine typische HTML-Datei ist. wie in Server/Controller

    – Odie

    20. April 2013 um 20:37 Uhr

  • Warum Sie keine Vorlagendateien verwenden, ist meiner Meinung nach klarer.

    – tschiela

    20. April 2013 um 20:44 Uhr

  • Ja, du hast recht. Diese Methode funktioniert gut, führt besser und alle. Aber ich habe Anwendungen, die ich migrieren möchte, die in älteren Frameworks wie Backbone geschrieben wurden und stark auf Inline-Vorlagen angewiesen sind. Deshalb wollte ich wissen, wie es in eckig gemacht wird.

    – Odie

    20. April 2013 um 20:50 Uhr


1134000cookie-checkVerwenden von Inline-Vorlagen in AngularJS

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy