Y a-t-il un moyen de faire AngularJS charger partiels au début et non au cas de besoin ?

Question

J’ai une configuration de voie comme ceci :

Je veux être en mesure de faire les angularjs à télécharger les deux partiels au début et non lorsque demandé.

Est-ce possible ?

Answer 1

Oui, il y a au moins 2 solutions pour ceci:

1. Utiliser l' script directive (http://docs.angularjs.org/api/ng.directive:script) pour mettre votre partiels dans le initialement chargée HTML
2. Vous pouvez également remplir $templateCache (http://docs.angularjs.org/api/ng.$templateCache) à partir de JavaScript si nécessaire (éventuellement sur la base des résultats de l' $http appel)

Si vous souhaitez utilisez la méthode (2) de remplissage en $templateCache vous pouvez le faire comme ceci:

$templateCache.put('second.html', '<b>Second</b> template');

Bien sûr, les modèles de contenu pourrait venir d'un $http appel:

$http.get('third.html', {cache:$templateCache});

Voici la plunker ces techniques: http://plnkr.co/edit/J6Y2dc?p=preview

Answer 2

Si vous utilisez Grunt pour construire votre projet, il y a un plugin qui rassemblera automatiquement vos partiels dans un module angulaire que nombres premiers $templateCache. Vous pouvez concaténer ce module avec le reste de votre code et charger tout à partir d’un fichier au démarrage.

https://npmjs.org/package/grunt-html2js

Answer 3

Si vous enveloppez chaque modèle dans une balise 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 en 1 grand fichier. Si vous utilisez Visual Studio 2013, Web de téléchargement essentials - il ajoute un menu du clic droit pour créer un HTML Bundle.

Ajoutez le code que ce gars a écrit pour modifier l'angle d' $templatecache service - n'est qu'un petit morceau de code et ça fonctionne: Vojta Jina est Essentiel

Sa l' $http.get qui devrait être modifiée afin d'utiliser votre faisceau de fichier:

allTplPromise = $http.get('templates/templateBundle.min.html').then(

Vos itinéraires templateUrl devrait ressembler à ceci:

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

Answer 4

Si vous utilisez des rails, vous pouvez utiliser le pipeline actif pour compiler et pousser tous vos modèles de haml/erb dans un module de modèle qui peut être ajouté à votre fichier application.js. Caisse http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

Answer 5

Je viens de l'utiliser eco pour faire le travail pour moi. eco est pris en charge par les Pignons par défaut. C'est une abréviation pour l'Embarqué Coffeescript qui prend un éco fichier et de les compiler en Javascript modèle de fichier, et le fichier sera traité comme tout autre js fichiers que vous avez dans votre dossier des actifs.

Tout ce que vous devez faire est de créer un modèle avec extension .jst.eco et écrire du code html dans les il y, et des rails de compiler automatiquement et servir le fichier avec les actifs de pipeline, et de la façon d'accéder au modèle est vraiment facile: JST['path/to/file']({var: value}); où path/to/file est basé sur le chemin logique, donc si vous avez des fichiers dans /assets/javascript/path/file.jst.eco, vous pouvez accéder au modèle en JST['path/file']()

Pour le faire fonctionner avec angularjs, vous pouvez le passer dans l'attribut de modèle au lieu de templateDir, et il va commencer à travailler comme par magie!