82 votes

Utilisation de modèles en ligne dans Angular

J'ai voulu charger une vue intégrée de modèle.

J'ai enveloppé le modèle dans une balise de script de type text/ng-template et de définir l'identifiant de temp1.html. et voici ce que mon module config ressemble

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

Il me dit GET http://localhost:41685/temp1.html 404 (Not Found) dans ma fenêtre de la console ce qui signifie qu'il est à la recherche d'un fichier de ce nom.

Ma Question est: Comment puis-je configurer mes itinéraires pour utiliser inline modèles?

Mise à jour: Voici ce que mon serveur de rendu de DOM ressemble

<!DOCTYPE html>
<html>
<head>
    <script src="/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>

111voto

pkozlowski.opensource Points 52557

Ody, vous étiez sur la bonne voie, le seul problème était que les balises étaient en dehors de l'élément DOM sur lequel la directive ng-app est utilisée. Si vous le déplacez vers les modèles en ligne d'élément <body ng-app="LearningApp"> devrait fonctionner.

Vous pouvez également trouver cette question pertinente: Existe - t-il un moyen de faire en sorte que AngularJS charge les partiels au début et non au moment voulu?

33voto

tschiela Points 1526

Essayez d’utiliser l’attribut id du script-Element pour définir le nom du modèle qui devrait fonctionner.

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X