AngularJS yükünü kısmi yapmanın bir yolu var mı, gerektiğinde değil mi?

Ben böyle bir rota kurulumu var:

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

İstendiğinde değil, başlangıçta hem kısmi indirmeye angularjs yapmak istiyorum.

Mümkün mü?

Evet, bunun için en az 2 çözüm var:

1. Kısmenlerinizi ilk yüklenen HTML'ye koymak için script( http://docs.angularjs.org/api/ng.directive:script ) yönergesini kullanın
2. Gerekirse JavaScript'ten de $templateCache( http://docs.angularjs.org/api/ng.$templateCache ) doldurabilirsiniz (muhtemelen $httparamanın sonucuna göre )

Doldurmak için yöntem (2) kullanmak $templateCacheisterseniz bunu şu şekilde yapabilirsiniz:

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

Elbette şablon içeriği bir $httpçağrıdan gelebilir :

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

İşte bu teknikler plunker: http://plnkr.co/edit/J6Y2dc?p=preview

Projenizi oluşturmak için Grunt'u kullanırsanız, kısmi öğelerinizi otomatik olarak $ templateCache'i başlatan bir Açısal modülde birleştirecek bir eklenti vardır. Bu modülü kodunuzun geri kalanıyla birleştirebilir ve başlangıçta her şeyi tek bir dosyadan yükleyebilirsiniz.

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

Birleştirme görevi ekleyin ve html parçalarınızı Açısal olarak kaydedin $templateCache. ( Bu cevap, karlgold'un cevabının daha ayrıntılı bir çeşididir . )

İçin homurtu , kullanmak hırıltı-açısal-şablonları . İçin yudum , kullanım yudum-açısal templatecache .

Aşağıda açıklanacak yapılandırma / kod parçacıkları verilmiştir.

gruntfile.js Örnek:

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

gulpfile.js Örnek:

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 (bu dosya oluşturma görevi tarafından otomatik olarak oluşturulur)

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

Her şablonu bir komut dosyası etiketine sarırsanız, örneğin:

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

Tüm şablonları 1 büyük dosyada birleştirin. Visual Studio 2013 kullanıyorsanız, Web gereksinimlerini indirin - HTML Paketi oluşturmak için sağ tıklama menüsü ekler.

Bu adamın açısal $templatecachehizmeti değiştirmek için yazdığı kodu ekleyin - sadece küçük bir kod parçası ve işe yarıyor: Vojta Jina'nın Gist'i

Onun $http.getiçin paket dosyasını kullanmak için değişmesi gerektiğini:

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

Rotalarınız şu templateUrlşekilde görünmelidir:

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

Raylar kullanırsanız, tüm haml / erb şablonlarınızı derlemek ve application.js dosyanıza eklenebilecek bir şablon modülüne itmek için varlık boru hattını kullanabilirsiniz. Ödeme http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

Sadece ecoişi benim için yapıyorum. ecovarsayılan olarak Sprockets tarafından desteklenir. Bir eko dosyası alan ve bir Javascript şablon dosyasına derleyen Gömülü Coffeescript için bir kısayol ve dosya varlıklar klasörünüzde bulunan diğer js dosyaları gibi ele alınacaktır.

Tek yapmanız gereken .jst.eco uzantılı bir şablon oluşturmak ve oraya bazı html kodu yazmaktır ve raylar dosyayı otomatik olarak derler ve varlıklar boru hattıyla sunar ve şablona erişmenin yolu gerçekten kolaydır: JST['path/to/file']({var: value});nerede path/to/filemantıksal yola dayalı olduğundan, dosyada /assets/javascript/path/file.jst.ecovarsa, aşağıdaki şablona erişebilirsinizJST['path/file']()

Angularjs ile çalışmasını sağlamak için, templateDir yerine template özelliğine aktarabilirsiniz ve sihirli bir şekilde çalışmaya başlayacaktır!

Kontrol cihazınıza $ durumunu iletebilir ve ardından sayfa kontrolöre alıcıyı yükleyip çağırdığında $ state.go ('index') veya yüklemek istediğiniz kısmi olarak adlandırırsınız. Bitti.

Başka bir yöntem, tüm dosyaları bir kez indirmek ve tarayıcının önbelleğinde tutmak için HTML5'in Uygulama Önbelleğini kullanmaktır . Yukarıdaki link daha fazla bilgi içermektedir. Aşağıdaki bilgiler makaleden alınmıştır:

<html>Etiketinizi bir manifestözellik içerecek şekilde değiştirin :

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

Bir manifest dosyası mime tipi ile sunulmalıdır text/cache-manifest.

Basit bir manifest şöyle görünür:

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

Bir uygulama çevrimdışı olduğunda, aşağıdakilerden biri gerçekleşene kadar önbelleğe alınmış olarak kalır:

1. Kullanıcı, sitenizin tarayıcısının veri depolama alanını temizler.
2. Manifest dosyası değiştirildi. Not: Manifest'te listelenen bir dosyayı güncellemek, tarayıcının bu kaynağı yeniden önbelleğe alacağı anlamına gelmez. Manifest dosyasının kendisi değiştirilmelidir.