angularjs - instalar - hacer un formulario en angular

¿Hay alguna manera de cargar plantillas al usar el enrutamiento AngularJS?

Question

Después de cargar la aplicación angular, necesito que algunas de las plantillas estén disponibles sin conexión.

Algo como esto sería ideal:

$routeProvider
.when(''/p1'', {
controller: controller1,
templateUrl: ''Template1.html'',
preload: true
})

Answer 1

Creo que tengo una solución ligeramente mejorada para este problema basada en el enfoque de Raman Savitski, pero carga las plantillas de forma selectiva. En realidad, permite la sintaxis original que se solicitó de esta manera:

$routeProvider.when(''/p1'', { controller: controller1, templateUrl: ''Template1.html'', preload: true })

Esto le permite decorar su ruta y no tener que preocuparse de actualizar otra configuración de precarga en otro lugar.

Aquí está el código que se ejecuta al inicio:

angular.module(''MyApp'', []).run([
''$route'', ''$templateCache'', ''$http'', (function ($route, $templateCache, $http) {
var url;
for (var i in $route.routes) {
if ($route.routes[i].preload) {
if (url = $route.routes[i].templateUrl) {
$http.get(url, { cache: $templateCache });
}
}
}
})
]);

Answer 2

Esto es una adición a la respuesta de @gargc.

Si no desea utilizar la etiqueta del script para especificar su plantilla, y desea cargar plantillas desde archivos, puede hacer algo como esto:

 myApp.run(function ($templateCache, $http) {
$http.get(''Template1.html'', { cache: $templateCache });
});
myApp.config(function ($locationProvider, $routeProvider) {
$routeProvider.when(''/p1'', { templateUrl: ''Template1.html'' })
});

Answer 3

Hay un servicio de caché de plantilla : $templateCache que se puede usar para cargar plantillas en un módulo de JavaScript.

Por ejemplo, tomado de los documentos:

var myApp = angular.module(''myApp'', []);
myApp.run(function($templateCache) {
$templateCache.put(''templateId.html'', ''This is the content of the template'');
});

Incluso hay una tarea de grunt para pregenerar un módulo de javascript desde archivos html: grunt-angular-templates

Otra forma, quizás menos flexible, es usar plantillas en línea , por ejemplo, tener una etiqueta de script como esta en su index.html:

<script type="text/ng-template" id="templates/Template1.html">template content</script>

significa que la plantilla se puede abordar más adelante de la misma manera que una url real en la configuración de su ruta ( templateUrl: ''templates/Template1.html'' )

Answer 4

Precarga todas las plantillas definidas en las rutas del módulo.

angular.module(''MyApp'', [])
.run(function ($templateCache, $route, $http) {
var url;
for(var i in $route.routes)
{
if (url = $route.routes[i].templateUrl)
{
$http.get(url, {cache: $templateCache});
}
}
})

Answer 5

si envuelve cada plantilla en una etiqueta de secuencia de comandos, por ejemplo:

<script id="about.html" type="text/ng-template">
<div>
<h3>About</h3>
This is the About page
Its cool!
</div>
</script>

Concatenar todas las plantillas en 1 archivo grande. Si usa Visual Studio 2013, descargue los elementos esenciales de la Web: agrega un menú de clic derecho para crear un paquete de HTML

Agregue el código que este tipo escribió para cambiar el servicio angular $ templatecache, es solo un pequeño código y funciona :-)

https://gist.github.com/vojtajina/3354046

Tus rutas templateUrl deberían verse así:

 $routeProvider.when(
"/about", {
controller: "",
templateUrl: "about.html"
}
);