Korzystanie z szablonów wbudowanych w Angular

Chciałem załadować wbudowany szablon widoku.Korzystanie z szablonów wbudowanych w Angular

Zawinęłem szablon w tagu skryptu typu text/ng-template i ustawiłem go na temp1.html. i oto co mój moduł konfiguracyjny wygląda

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 moim oknie konsoli, co oznacza, że szuka pliku o tej nazwie.

Moje pytanie brzmi: Jak skonfigurować trasy do korzystania z szablonów wbudowanych?

Aktualizacja: Oto, co mój serwer-renderowane DOM wygląda

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

Źródło

2013-04-20 Ody

111

Ody, byłaś na właściwej drodze, jedynym problemem było to, że znaczniki są poza elementu DOM, w którym stosowana jest dyrektywa ng-app. Jeśli przeniesiesz go do elementu <body ng-app="LearningApp">, szablonowe szablony powinny działać.

Można również znaleźć na to pytanie dotyczy: Is there a way to make AngularJS load partials in the beginning and not at when needed?

Źródło

2013-04-20 21:00:13

Zadziałało. Wielkie dzięki – Ody

Teraz widzę, dlaczego większość samouczków woli dodać dyrektywę ng-app do elementu html. Dzieje się tak dlatego, że wszystko, co jest związane z tą aplikacją/modułem, musi znajdować się w zasięgu ng-app, dlatego umieszczenie go w znaczniku html pozwala uniknąć przyszłych problemów, takich jak ta – Ody

Jest to coś, o czym musi wspomnieć dokumentacja. Straciłem godziny zastanawiając się, dlaczego pojawiły się te 404 ... –

Spróbuj użyć Id-atrybut script-Element ustawić nazwę szablonu powinna działać.

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

Źródło

2013-04-20 20:22:22 tschiela

to zrobiłem. Nie działa. Podejrzewam, że moja strona główna nie jest typowym plikiem html. jak w http: // server/controller/ – Ody

, dlaczego nie używasz plików szablonów, jest to bardziej jasne w moim opionion. – 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 opierają się głównie na szablonach wbudowanych. Dlatego chciałem wiedzieć, jak to się robi pod kątem. – Ody

Korzystanie z szablonów wbudowanych w Angular

Odpowiedz

Powiązane problemy