Utilizzo di modelli in linea in Angolare

Volevo caricare un modello di vista in linea.Utilizzo di modelli in linea in Angolare

Ho avvolto il modello in un tag script di tipo text/ng-template e impostato l'ID su temp1.html. ed ecco cosa il mio modulo di configurazione assomiglia

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

Mi GET http://localhost:41685/temp1.html 404 (Not Found) dice nella mia finestra della console che significa che sta cercando un file con quel nome.

La mia domanda è: come configuro i miei percorsi per utilizzare modelli in linea?

Aggiornamento: Ecco ciò che il mio server-rendered DOM sembra

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

fonte

2013-04-20 Ody

111

Ody, eri sulla strada giusta, l'unico problema era che i tag sono di fuori dell'elemento DOM su cui viene utilizzata la direttiva ng-app. Se lo sposti negli elementi <body ng-app="LearningApp">, i modelli in linea dovrebbero funzionare.

Si potrebbe anche trovare questa domanda rilevante: Is there a way to make AngularJS load partials in the beginning and not at when needed?

fonte

2013-04-20 21:00:13

Ha funzionato. Grazie mille – Ody

Ora vedo perché la maggior parte dei tutorial preferisce aggiungere la direttiva ng-app all'elemento html. Questo perché tutto ciò che è correlato a quell'app/modulo deve essere all'interno dell'ambito ng-app, quindi inserirlo nel tag html evita problemi futuri come questo – Ody

Questo è qualcosa che la documentazione deve menzionare. Ho perso ore a chiedermi perché quei 404 sono apparsi ... –

Prova Usa l'id-attributo dello script-elemento per impostare il nome del modello dovrebbe funzionare.

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

fonte

2013-04-20 20:22:22 tschiela

ho fatto. Non ha funzionato Sospetto il fatto che la mia pagina principale non sia in realtà un tipico file html. come in http: // server/controller/ – Ody

perché non si usano i file di modello, è più chiaro nel mio opionion. – tschiela

Sì, hai ragione. Quel metodo funziona bene, funziona meglio e tutto. Ma ho delle applicazioni che voglio migrare che sono state scritte in framework più datati come backbone e si basano molto su template in linea. Ecco perché volevo sapere come è fatto in modo angolare. – Ody

Utilizzo di modelli in linea in Angolare

risposta

Problemi correlati