Apakah ada cara untuk membuat AngularJS memuat parsial di awal dan tidak di saat dibutuhkan?

Saya memiliki pengaturan rute seperti ini:

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

Saya ingin dapat membuat angular untuk mengunduh parsial di awal dan bukan saat diminta.

Apa itu mungkin?

Ya, setidaknya ada 2 solusi untuk ini:

1. Gunakan scriptarahan ( http://docs.angularjs.org/api/ng.directive:script ) untuk meletakkan parsial Anda di HTML yang awalnya dimuat
2. Anda juga dapat mengisi $templateCache( http://docs.angularjs.org/api/ng.$templateCache ) dari JavaScript jika diperlukan (mungkin berdasarkan hasil $httppanggilan)

Jika Anda ingin menggunakan metode (2) untuk mengisi, $templateCacheAnda dapat melakukannya seperti ini:

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

Tentu saja konten template dapat berasal dari $httppanggilan:

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

Berikut adalah teknik-teknik tersebut: http://plnkr.co/edit/J6Y2dc?p=preview

Jika Anda menggunakan Grunt untuk membangun proyek Anda, ada sebuah plugin yang secara otomatis akan merakit parsial Anda menjadi modul Angular yang menawarkan $ templateCache. Anda dapat menggabungkan modul ini dengan sisa kode Anda dan memuat semuanya dari satu file saat startup.

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

Tambahkan tugas build untuk menggabungkan dan mendaftarkan parsial html Anda di Angular $templateCache. ( Jawaban ini adalah varian jawaban karlgold yang lebih rinci . )

Untuk grunt , gunakan grunt-angular-templates . Untuk tegukan , gunakan tegukan-angular-templatecache .

Berikut cuplikan konfigurasi / kode untuk diilustrasikan.

Contoh gruntfile.js:

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

Contoh gulpfile.js:

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 (file ini dibuat secara otomatis oleh tugas build)

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

Jika Anda membungkus setiap template dalam tag skrip, misalnya:

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

Gabungkan semua template menjadi 1 file besar. Jika menggunakan Visual Studio 2013, unduh Web esensial - ia menambahkan menu klik kanan untuk membuat Bundel HTML.

Tambahkan kode yang ditulis orang ini untuk mengubah $templatecachelayanan sudut - hanya sepotong kecil kode dan berfungsi: Vojta Jina's Gist

Itu $http.getyang harus diubah untuk menggunakan file bundel Anda:

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

Rute Anda templateUrlakan terlihat seperti ini:

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

Jika Anda menggunakan rel, Anda dapat menggunakan pipa aset untuk mengkompilasi dan mendorong semua templat haml / erb Anda menjadi modul templat yang dapat ditambahkan ke file application.js Anda. Checkout http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

Saya hanya menggunakan ecountuk melakukan pekerjaan untuk saya. ecodidukung oleh Sprockets secara default. Ini adalah singkatan untuk Embedded Coffeescript yang mengambil file eco dan mengkompilasi ke file template Javascript, dan file tersebut akan diperlakukan seperti file js lain yang Anda miliki di folder aset Anda.

Yang perlu Anda lakukan adalah membuat templat dengan ekstensi .jst.eco dan menulis beberapa kode html di sana, dan rel akan secara otomatis mengkompilasi dan menyajikan file dengan pipa aset, dan cara mengakses templat itu sangat mudah: di JST['path/to/file']({var: value});mana path/to/filedidasarkan pada jalur logis, jadi jika Anda memiliki file /assets/javascript/path/file.jst.eco, Anda dapat mengakses template diJST['path/file']()

Untuk membuatnya berfungsi dengan angularjs, Anda bisa meneruskannya ke atribut template alih-alih templateDir, dan itu akan mulai bekerja secara ajaib!

Anda dapat melewatkan $ state ke controller Anda dan kemudian ketika halaman memuat dan memanggil getter di controller Anda memanggil $ state.go ('index') atau bagian apa pun yang ingin Anda muat. Selesai

Metode lain adalah dengan menggunakan Cache Aplikasi HTML5 untuk mengunduh semua file sekaligus dan menyimpannya di cache browser. Tautan di atas mengandung lebih banyak informasi. Informasi berikut berasal dari artikel:

Ubah <html>tag Anda untuk menyertakan manifestatribut:

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

File manifes harus disajikan dengan tipe mime text/cache-manifest.

Manifes sederhana terlihat seperti ini:

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

Setelah aplikasi offline, aplikasi ini tetap di-cache hingga salah satu dari yang berikut terjadi:

1. Pengguna menghapus penyimpanan data browser mereka untuk situs Anda.
2. File manifes dimodifikasi. Catatan: memperbarui file yang tercantum dalam manifes tidak berarti browser akan men-cache ulang sumber daya itu. File manifes itu sendiri harus diubah.