Использование встроенных шаблонов в AngularJS

82

Я хотел загрузить шаблон встроенного представления.

Я заключил шаблон в тег скрипта типа text/ng-templateи установил для идентификатора значение temp1.html. и вот как выглядит конфигурация моего модуля

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) в окне консоли, что означает поиск файла с таким именем.

Мой вопрос: как мне настроить мои маршруты для использования встроенных шаблонов?

Обновление: вот как выглядит моя DOM, отрисованная на сервере

<!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
источник

Ответы:

111

Оди, вы были на правильном пути, единственная проблема заключалась в том, что теги находятся за пределами элемента DOM, в котором используется ng-appдиректива. Если вы переместите его в <body ng-app="LearningApp">элемент, встроенные шаблоны должны работать.

Вы также можете найти этот вопрос актуальным: есть ли способ заставить AngularJS загружать частичные файлы в начале, а не при необходимости?

pkozlowski.opensource
источник
2
Теперь я понимаю, почему большинство руководств предпочитают добавлять директиву ng-app в элемент html. Это потому, что все, что связано с этим приложением / модулем, должно находиться в области действия ng-app, поэтому размещение его в теге html позволяет избежать подобных проблем в будущем
Оди
3
Это должно быть упомянуто в документации. Я потерял часы, задаваясь вопросом, почему появились эти 404 ...
Роб Юурлинк 02
32

Попробуйте использовать атрибут id элемента сценария, чтобы установить имя шаблона, который должен работать.

<script type="text/ng-template" id="temp1.html">
   ... some template stuff
</script>
Tschiela
источник
Я это сделал. Не сработало. Я подозреваю, что моя главная страница на самом деле не является типичным html файлом. как в сервере / контроллере
Ody
Почему вы не используете файлы шаблонов, это более понятно, на мой взгляд.
tschiela
Да, ты прав. Этот метод работает хорошо, работает лучше и все такое. Но у меня есть приложения, которые я хочу перенести, которые были написаны на более старых фреймворках, таких как backbone, и в значительной степени полагаются на встроенные шаблоны. Вот почему я хотел узнать, как это делается в angular.
Ody