Angular.js und Require.Js

Question

Ich studiere Angular.js und Require.js im Moment. Ich bin hier auf ein Problem gestoßen, während ich diese beiden zusammen benutze. Zum Beispiel in meinem HTML habe ich etwas sehr einfaches wie {{3 + 3}}. Ich fand heraus, dass dies nur bis zu 6 Sekunden nach dem Laden alles ausgewertet wird. Der Benutzer kann den gesamten Prozess deutlich sehen. Aber das ist nicht gut für mich. Ich will die Verzögerung hier nicht. Kann jemand erklären, warum das passiert ist? Liegt daran, dass ich manuell Bootstrap mache.

Das ist mein main.js für require und meinen Bootstrap-Code.

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

Prost

Answer 1

Wie Sie einige Abhängigkeiten mit require.js sind geladen, bevor bootstraping die Winkel, Benutzer müssen warten, für alle diese Dateien vollständig vor der Anwendung beginnt geladen werden. Und weil HTML zuerst vor Ihren Skripten geladen wird, wird der rohe Inhalt für eine Weile für den Benutzer sichtbar gemacht.

Wenn Sie nicht möchten, dass der Benutzer den Inhalt Ihres HTML-Elements sieht, bevor es von eckigen verarbeitet wird, verwenden Sie die Anweisung ngCloak, die nur dafür gemacht wird. Werfen Sie einen Blick auf diesen Eintrag der Dokumentation: http://docs.angularjs.org/api/ng.directive:ngCloak. Diese Direktive legt den Stil des Elements fest, so dass es anfänglich ausgeblendet ist und wenn der eckige Bootstrap und die Verarbeitung des Stils des HTML-Elements wieder sichtbar gemacht werden und somit nur das kompilierte HTML angezeigt wird.

Update:

Aber wie die obige Lösung nicht sofort in Ihrem Fall (weil Winkel Bibliothek Skript würde vor dem Schablonenkörper geladen werden müssen - in Dokuments head aufgenommen werden), sollten Sie zusätzlich die folgende Styling im head Abschnitt des Dokuments gehört:

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

Dies ist, was auf Seite Stile Winkel anhängen nach geladen.

Doch wäre eine andere Lösung nicht die {{ }} Bindungen direkt in Elemente die Körper einfügen werden, sondern ng-bind, ng-bind-template und ng-bind-html-unsafe Direktiven.

http://docs.angularjs.org/api/ng.directive:ngBind http://docs.angularjs.org/api/ng.directive:ngBindTemplate http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe