J'ai une configuration de route comme ceci:
var myApp = angular.module('myApp', []).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/landing', {
templateUrl: '/landing-partial',
controller: landingController
}).
when('/:wkspId/query', {
templateUrl: '/query-partial',
controller: queryController
}).
otherwise({
redirectTo: '/landing'
});
}]);
Je veux pouvoir faire que angularjs télécharge les partiels au début et non à la demande.
C'est possible?
Oui, il existe au moins 2 solutions pour cela:
script
( http://docs.angularjs.org/api/ng.directive:script ) pour placer vos partiels dans le code HTML initialement chargé.$templateCache
( http://docs.angularjs.org/api/ng.$templateCache ) à partir de JavaScript si nécessaire (éventuellement en fonction du résultat de l'appel $http
)Si vous souhaitez utiliser la méthode (2) pour renseigner $templateCache
, vous pouvez le faire comme suit:
$templateCache.put('second.html', '<b>Second</b> template');
Bien entendu, le contenu des modèles pourrait provenir d'un appel $http
:
$http.get('third.html', {cache:$templateCache});
Voici le plunker ces techniques: http://plnkr.co/edit/J6Y2dc?p=preview
Si vous utilisez Grunt pour construire votre projet, il existe un plugin qui assemblera automatiquement vos partiels dans un module angulaire qui amorce $ templateCache. Vous pouvez concaténer ce module avec le reste de votre code et charger tout depuis un fichier au démarrage.
Ajoutez une tâche de construction pour concaténer et enregistrer vos partiels HTML dans le code angulaire $templateCache
. (Cette réponse est une variante plus détaillée de la réponse de karlgold. )
Pour grunt, utilisez grunt-angular-templates . Pour gulp, utilisez gulp-angular-templatecache .
Vous trouverez ci-dessous des extraits de code/configuration à illustrer.
gruntfile.js Exemple:
ngtemplates: {
app: {
src: ['app/partials/**.html', 'app/views/**.html'],
dest: 'app/scripts/templates.js'
},
options: {
module: 'myModule'
}
}
gulpfile.js Exemple:
var templateCache = require('gulp-angular-templatecache');
var paths = ['app/partials/.html', 'app/views/.html'];
gulp.task('createTemplateCache', function () {
return gulp.src(paths)
.pipe(templateCache('templates.js', { module: 'myModule', root:'app/views'}))
.pipe(gulp.dest('app/scripts'));
});
templates.js (ce fichier est généré automatiquement par la tâche de construction)
$templateCache.put('app/views/main.html', "<div class=\"main\">\r"...
index.html
<script src="app/scripts/templates.js"></script>
<div ng-include ng-controller="main as vm" src="'app/views/main.html'"></div>
Si vous enveloppez chaque modèle dans une balise de script, par exemple:
<script id="about.html" type="text/ng-template">
<div>
<h3>About</h3>
This is the About page
Its cool!
</div>
</script>
Concaténer tous les modèles dans 1 grand fichier. Si vous utilisez Visual Studio 2013, téléchargez Web essentials. Il ajoute un menu contextuel pour créer un ensemble HTML.
Ajoutez le code que ce gars a écrit pour changer le service $templatecache
angulaire - ce n’est qu’un petit morceau de code et cela fonctionne: Vojta Jina's Gist
C'est le $http.get
qui devrait être changé pour utiliser votre fichier bundle:
allTplPromise = $http.get('templates/templateBundle.min.html').then(
Votre route templateUrl
devrait ressembler à ceci:
$routeProvider.when(
"/about", {
controller: "",
templateUrl: "about.html"
}
);
Si vous utilisez Rails, vous pouvez utiliser le pipeline d’actifs pour compiler et placer tous vos modèles haml/erb dans un module de modèle pouvant être ajouté au fichier application.js. Checkout http://minhajuddin.com/2013/04/28/angularjs-templates-and-Rails-with-eager-loading
Je viens d'utiliser eco
pour faire le travail pour moi .eco
est pris en charge par Sprockets par défaut. C'est un raccourci pour Embedded Coffeescript qui prend un fichier eco et le compile dans un fichier de modèle Javascript. Le fichier sera traité comme tout autre fichier js que vous avez dans votre dossier assets.
Tout ce que vous avez à faire est de créer un modèle avec l'extension .jst.eco et d'y écrire du code html. Rails compilera et servira automatiquement le fichier avec le pipeline d'actifs. Le moyen d'accéder au modèle est très simple: JST['path/to/file']({var: value});
où path/to/file
est basé sur le chemin logique, donc si vous avez un fichier dans /assets/javascript/path/file.jst.eco
, vous pouvez accéder au modèle à JST['path/file']()
Pour que cela fonctionne avec angularjs, vous pouvez le transférer dans l'attribut template au lieu de templateDir, et cela commencera à fonctionner comme par magie!
Vous pouvez passer $ state à votre contrôleur, puis lorsque la page est chargée et appelle le getter dans le contrôleur, vous appelez $ state.go ('index') ou le partiel que vous voulez charger. Terminé.