Gibt es eine Möglichkeit, AngularJS am Anfang partiell zu laden und nicht bei Bedarf?

Ich habe ein Routen-Setup wie folgt:

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'
        });
}]);

Ich möchte in der Lage sein, Angularjs dazu zu bringen, beide Partials am Anfang und nicht auf Anfrage herunterzuladen.

Ist es möglich?

Ja, dafür gibt es mindestens 2 Lösungen:

1. Verwenden Sie die scriptDirektive ( http://docs.angularjs.org/api/ng.directive:script ), um Ihre Partials in den ursprünglich geladenen HTML-Code einzufügen
2. Bei Bedarf können Sie auch $templateCache( http://docs.angularjs.org/api/ng.$templateCache ) JavaScript eingeben (möglicherweise basierend auf dem Ergebnis des $httpAufrufs).

Wenn Sie die Methode (2) zum Ausfüllen verwenden möchten, $templateCachekönnen Sie dies folgendermaßen tun:

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

Natürlich könnte der Inhalt der Vorlagen von einem $httpAnruf stammen:

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

Hier ist der Plunker dieser Techniken: http://plnkr.co/edit/J6Y2dc?p=preview

Wenn Sie Grunt zum Erstellen Ihres Projekts verwenden, gibt es ein Plugin, das Ihre Partials automatisch zu einem Angular-Modul zusammenfügt, das $ templateCache vorbereitet. Sie können dieses Modul mit dem Rest Ihres Codes verketten und beim Start alles aus einer Datei laden.

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

Fügen Sie eine Build-Aufgabe hinzu, um Ihre HTML-Partials im Angular zu verketten und zu registrieren $templateCache. ( Diese Antwort ist eine detailliertere Variante von Karlgolds Antwort. )

Für Grunzen , verwenden Grunzen-Winkel-Vorlagen . Verwenden Sie für gulp gulp-angle-templatecache .

Unten finden Sie Konfigurations- / Code-Schnipsel zur Veranschaulichung.

gruntfile.js Beispiel:

ngtemplates: {
  app: {                
    src: ['app/partials/**.html', 'app/views/**.html'],
    dest: 'app/scripts/templates.js'
  },
  options: {
    module: 'myModule'
  }
}

gulpfile.js Beispiel:

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 (diese Datei wird von der Build-Task automatisch generiert)

$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>

Wenn Sie jede Vorlage in ein Skript-Tag einschließen, z.

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

Verketten Sie alle Vorlagen zu einer großen Datei. Wenn Sie Visual Studio 2013 verwenden, laden Sie Web Essentials herunter. Es wird ein Kontextmenü hinzugefügt, um ein HTML-Bundle zu erstellen.

Fügen Sie den Code hinzu, den dieser Typ geschrieben hat, um den Winkeldienst zu ändern $templatecache- es ist nur ein kleines Stück Code und es funktioniert: Vojta Jinas Kern

Es ist das $http.get, was geändert werden sollte, um Ihre Bundle-Datei zu verwenden:

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

Ihre Routen templateUrlsollten folgendermaßen aussehen:

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

Wenn Sie Rails verwenden, können Sie mithilfe der Asset-Pipeline alle Ihre haml / erb-Vorlagen kompilieren und in ein Vorlagenmodul verschieben, das an die Datei application.js angehängt werden kann. Kasse http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

Ich ecomache den Job nur für mich. ecowird standardmäßig von Sprockets unterstützt. Es ist eine Abkürzung für Embedded Coffeescript, bei der eine Öko-Datei in eine Javascript-Vorlagendatei kompiliert wird. Die Datei wird wie alle anderen JS-Dateien behandelt, die sich in Ihrem Assets-Ordner befinden.

Alles, was Sie tun müssen, ist, eine Vorlage mit der Erweiterung .jst.eco zu erstellen und dort HTML-Code zu schreiben. Rails kompiliert und liefert die Datei automatisch mit der Assets-Pipeline. Der Zugriff auf die Vorlage ist sehr einfach: JST['path/to/file']({var: value});wo path/to/filebasiert auf dem logischen Pfad. Wenn Sie also eine Datei haben /assets/javascript/path/file.jst.eco, können Sie unter auf die Vorlage zugreifenJST['path/file']()

Damit es mit anglejs funktioniert, können Sie es anstelle von templateDir an das Template-Attribut übergeben, und es funktioniert auf magische Weise!

Sie können $ state an Ihren Controller übergeben. Wenn die Seite geladen und der Getter im Controller aufgerufen wird, rufen Sie $ state.go ('index') oder einen beliebigen Teil auf, den Sie laden möchten. Getan.

Eine andere Methode ist die Verwendung von HTML5 Application Cache zum Download alle Dateien einmal und halten sie in den Cache des Browsers. Der obige Link enthält viel mehr Informationen. Die folgenden Informationen stammen aus dem Artikel:

Ändern Sie Ihr <html>Tag so, dass es ein manifestAttribut enthält:

<html manifest="http://www.example.com/example.mf">

Eine Manifestdatei muss mit dem MIME-Typ bereitgestellt werden text/cache-manifest .

Ein einfaches Manifest sieht ungefähr so ​​aus:

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

Sobald eine Anwendung offline ist, bleibt sie zwischengespeichert, bis eine der folgenden Aktionen ausgeführt wird:

1. Der Benutzer löscht den Datenspeicher seines Browsers für Ihre Site.
2. Die Manifestdatei wird geändert. Hinweis: Das Aktualisieren einer im Manifest aufgelisteten Datei bedeutet nicht, dass der Browser diese Ressource erneut zwischenspeichert. Die Manifestdatei selbst muss geändert werden.