Angular.js e Require.Js

Question

Sto studiando Angular.js e Require.js al momento. Ho riscontrato un problema qui mentre sto usando questi due insieme. Per esempio nel mio html ho qualcosa di molto semplice come {{3 + 3}}. Ho scoperto che questo sarà valutato solo 6 secondi dopo che tutto è stato caricato. L'utente può vedere chiaramente l'intero processo. Ma questo non va bene per me. Non voglio il ritardo qui. Qualcuno può spiegare perché è successo? È perché sto facendo il bootstrap manualmente.

Questo è il mio main.js per richiedere e il mio codice di bootstrap.

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

Acclamazioni

Answer 1

Come si sta caricando alcune dipendenze con require.js prima bootstraping l'angolare, all'utente devono aspettare per tutti quei file da completamente caricati prima all'avvio dell'applicazione. E poiché HTML viene caricato prima degli script, il contenuto non elaborato viene reso visibile all'utente per un po 'di tempo.

Se non si desidera che l'utente visualizzi il contenuto dell'elemento HTML prima che venga elaborato da angolare, utilizzare la direttiva ngCloak creata appositamente. Dai un'occhiata a questa voce della documentazione: http://docs.angularjs.org/api/ng.directive:ngCloak. Questa direttiva imposta lo stile dell'elemento in modo che sia inizialmente nascosto e quando i bootstrap angolari e termina l'elaborazione dello stile dell'elemento HTML viene reimpostato su visibile, mostrando quindi solo l'HTML compilato.

Aggiornamento:

Ma, come la soluzione di cui sopra non funziona subito nel tuo caso (perché lo script libreria angolare avrebbe dovuto essere caricato prima che il corpo del modello - da inserire nel documento di head), si dovrebbe inoltre includere le seguenti styling nella sezione head del documento:

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

Questo è ciò che aggiunge i angolare di stili di pagina dopo essere stato caricato.

Un'altra soluzione sarebbe quella di non inserire le {{ }} binding direttamente all'interno dei corpi elementi, ma utilizzando ng-bind, ng-bind-template e ng-bind-html-unsafe direttive invece. Si possono trovare le loro descrizioni qui:

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