Korzystanie z szablonów wbudowanych w AngularJS

82

Chciałem załadować szablon widoku wbudowanego.

Owinąłem szablon w tag typu script text/ng-templatei ustawiłem identyfikator na temp1.html. a oto jak wygląda moja konfiguracja modułu

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

Mówi mi GET http://localhost:41685/temp1.html 404 (Not Found)w oknie konsoli, co oznacza, że ​​szuka pliku o tej nazwie.

Moje pytanie brzmi: Jak skonfigurować moje trasy, aby używały wbudowanych szablonów?

Aktualizacja: tak wygląda mój model DOM renderowany na serwerze

<!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
źródło

Odpowiedzi:

111

Ody, byłeś na dobrej drodze, jedynym problemem było to, że tagi znajdują się poza elementem DOM, w którym ng-appużyto dyrektywy. Jeśli przeniesiesz go do <body ng-app="LearningApp">elementu, szablony liniowe powinny działać.

Możesz również uznać to pytanie za istotne: Czy istnieje sposób, aby obciążenie AngularJS było częściowe na początku, a nie w razie potrzeby?

pkozlowski.opensource
źródło
2
Teraz rozumiem, dlaczego większość samouczków woli dodać dyrektywę ng-app do elementu html. Dzieje się tak, ponieważ wszystko, co jest związane z tą aplikacją / modułem, musi znajdować się w zakresie ng-app, dlatego umieszczenie go w tagu html pozwala uniknąć przyszłych problemów, takich jak ten
Ody
3
Jest to coś, o czym musi wspomnieć dokumentacja. Straciłem godziny zastanawiając się, dlaczego pojawiły się te 404 ...
Rob Juurlink
32

Spróbuj użyć atrybutu id elementu skryptu, aby ustawić nazwę szablonu, która powinna działać.

<script type="text/ng-template" id="temp1.html">
   ... some template stuff
</script>
tschiela
źródło
Ja to zrobiłem. Nie udało się. Podejrzewam, że moja strona główna właściwie nie jest typowym plikiem html. jak w serwerze / kontrolerze
Ody
dlaczego nie używasz plików szablonów, moim zdaniem jest to bardziej jasne.
tschiela
Tak, masz rację. Ta metoda działa dobrze, działa lepiej i wszystko. Ale mam aplikacje, które chcę migrować, które zostały napisane w starszych frameworkach, takich jak szkielet, i w dużym stopniu opierają się na szablonach wbudowanych. Dlatego chciałem wiedzieć, jak to się robi pod kątem.
Ody