Angular.js ve Require.Js

Question

Angular.js ve Require.js üzerinde şu an çalışıyorum. Bu ikisini birlikte kullanırken bir sorunla karşılaştım. Örneğin htmlimde {{3 + 3}} gibi çok basit bir şeye sahibim. Bunu, her şey yüklendikten sonra sadece 6 saniye içinde değerlendirileceğini öğrendim. Kullanıcı tüm süreci açıkça görebilir. Ama bu benim için iyi değil. Gecikmeyi burada istemiyorum. Birisi bunun neden olduğunu açıklayabilir mi? Bu, el ile bootstrap yapıyorum çünkü.

Bu, boot.js kodumun ve benim bootstrap kodumun benim için.

require.config({ 
    paths: { 
    jquery: 'lib/jquery/jquery-1.9.1.min', 
    bootstrap: 'lib/bootstrap/bootstrap.min', 
    angular: 'lib/angular/angular.min' 
    }, 
    baseUrl: '/Scripts', 
    shim: { 
    'angular': { 'exports': 'angular' }, 
    'bootstrap': { deps: ['jquery'] } 
    }, 
    priority: [ 
    'angular' 
    ] 
}); 

require(['angular', 'app/admin/app.admin', 'app/admin/app.admin.routes', 'app/admin/index/index', 'app/admin/app.admin.directives'], function (angular, app) { 
    'use strict'; 
    angular.element(document).ready(function() { 
    angular.bootstrap(document, ['app.admin']); 
    }); 
}); 

Alkış

Answer 1

Eğer köşeli, kullanıcıyı ön yükleme öncesi require.js bazı bağımlılıkları yüklüyoruz gibi tüm bu dosyalar tamamen uygulama başlamadan önce yüklenecek için beklemek zorunda. HTML, komut dosyalarınızdan önce yüklendiğinden, işlenmemiş içeriği bir süreliğine kullanıcı tarafından görünür hale getirilir.

Kullanıcı, açısal olarak işlenmeden önce HTML öğenizin içeriğini görmüyorsa, bunun için yapılmış olan ngCloak yönergesini kullanın. Dökümanın bu girişine bir göz atın: http://docs.angularjs.org/api/ng.directive:ngCloak. Bu yönerge, öğenin stilini başlangıçta gizlenecek şekilde ayarlar ve açısal önyükleme ve bitirme işlemlerini gerçekleştirdiğinde, HTML öğesinin stili görünür olacak şekilde ayarlanır, böylece yalnızca derlenen HTML'yi gösterir.

Güncelleme:

Ama senin için kaldırdık çalışmaz yukarıdaki çözüm olarak (açısal kütüphane komut şablon gövdesinden önce yüklenmesi gerekir, çünkü - Belge en head dahil edilmesi), ek olarak gerektiği belgenizin head bölümünde aşağıdaki stil içerir:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak 
{ 
    display: none; 
} 

Bu açısal yüklendikten sonra sayfa stilleri ekler şeydir.

Henüz başka çözüm elemanların organları içine doğrudan {{ }} bağlamaları eklemek değil olurdu, ancak bunun yerine ng-bind, ng-bind-template ve ng-bind-html-unsafe direktifleri kullanarak. Burada onların açıklamalarını bulabilirsiniz: http://docs.angularjs.org/api/ng.directive:ngBindTemplate http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe