web-dev-qa-db-fra.com

Existe-t-il un moyen de rendre AngularJS des charges partielles au début et non au moment voulu?

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?

angularjs
190
Ranjith Ramachandra

Oui, il existe au moins 2 solutions pour cela:

  1. Utilisez la directive script ( http://docs.angularjs.org/api/ng.directive:script ) pour placer vos partiels dans le code HTML initialement chargé.
  2. Vous pouvez également entrer $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

269
pkozlowski.opensource

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.

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

25
karlgold

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>
15
James Lawruk

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"
            }
        );
11
Simon Dowdeswell

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

2
Khaja Minhajuddin

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!

0
Pencilcheck

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é.

0
rj905