Usando plantillas en línea en AngularJS

82

Quería cargar una plantilla de vista en línea.

Envolví la plantilla en una etiqueta de script de tipo text/ng-templatey establecí la identificación en temp1.html. y así es como se ve la configuración de mi módulo

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

Me dice GET http://localhost:41685/temp1.html 404 (Not Found)en la ventana de mi consola, lo que significa que está buscando un archivo con ese nombre.

Mi pregunta es: ¿Cómo configuro mis rutas para usar plantillas en línea?

Actualización: así es como se ve mi DOM renderizado por el servidor

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

Respuestas:

111

Ody, estaba en el camino correcto, el único problema era que las etiquetas están fuera del elemento DOM en el que ng-appse usa la directiva. Si lo mueve al <body ng-app="LearningApp">elemento, las plantillas en línea deberían funcionar.

También puede encontrar esta pregunta relevante: ¿Hay alguna manera de hacer que AngularJS cargue parciales al principio y no cuando sea necesario?

pkozlowski.opensource
fuente
2
Ahora veo por qué la mayoría de los tutoriales prefieren agregar la directiva ng-app al elemento html. Esto se debe a que todo lo que esté relacionado con esa aplicación / módulo debe estar dentro del alcance de la aplicación ng, por lo que ponerlo en la etiqueta html evita problemas futuros como este
Ody
3
Esto es algo que la documentación debe mencionar. Perdí horas preguntándome por qué aparecieron esos 404 ...
Rob Juurlink
32

Intente usar el atributo id del script-Element para establecer el nombre de la plantilla que debería funcionar.

<script type="text/ng-template" id="temp1.html">
   ... some template stuff
</script>
tschiela
fuente
Yo lo hice. No funcionó. Sospecho que mi página principal no es un archivo html típico. como en servidor / controlador
Ody
por qué no usa archivos de plantilla, es más claro en mi opinión.
tschiela
Si, tienes razón. Ese método funciona bien, funciona mejor y todo. Pero tengo aplicaciones que quiero migrar que fueron escritas en marcos más antiguos como backbone y dependen en gran medida de plantillas en línea. Por eso quería saber cómo se hace en angular.
Ody