Angular.js i Require.Js

Question

Obecnie studiuję Angular.js i Require.js. Napotkałem problem tutaj, gdy używam tych dwóch razem. Na przykład w moim html mam coś bardzo prostego, jak {{3 + 3}}. Dowiedziałem się, że zostanie to ocenione na 6 kilka sekund po załadowaniu wszystkiego. Użytkownik może wyraźnie zobaczyć cały proces. Ale to nie jest dobre dla mnie. Nie chcę tego opóźnienia. Czy ktoś może wyjaśnić, dlaczego tak się stało? Czy to dlatego, że robię ręcznie bootstrap.

To jest mój main.js dla potrzeb i mój kod 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']); 
    }); 
}); 

Cheers

Answer 1

jak jesteś załadunek pewne zależności z require.js przed bootstraping kątową, użytkownik musi czekać na te wszystkie pliki, które mają być całkowicie załadowany przed uruchomieniem aplikacji. A ponieważ kod HTML jest ładowany najpierw przed skryptami, jego zawartość jest przez pewien czas widoczna dla użytkownika.

Jeśli nie chcesz, aby użytkownik zobaczył zawartość Twojego elementu HTML przed przetworzeniem przez ustawienie kątowe, użyj dyrektywy ngCloak, która została stworzona właśnie w tym celu. Spójrz na ten wpis dokumentacji: http://docs.angularjs.org/api/ng.directive:ngCloak. Ta dyrektywa ustawia styl elementu tak, aby był on początkowo ukryty, a gdy kątowe ładowanie początkowe i zakończenie przetwarzania stylu elementu HTML zostanie przywrócone do stanu widocznego, w ten sposób zostanie wyświetlony tylko skompilowany kod HTML.

Aktualizacja:

Ale jak wyżej rozwiązania nie będą działać od razu w twoim przypadku (bo kanciasty skrypt biblioteka musiałaby być ładowany przed organem szablonu - być zawarte w dokumencie na head), należy dodatkowo zawierać następujące stylizacji w sekcji head dokumentu:

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

to co kątowy dołącza do stylów strony po załadowaniu.

Jeszcze innym rozwiązaniem byłoby, aby nie wkładać {{ }} powiązania bezpośrednio wewnątrz organów elementów, ale przy użyciu ng-bind, ng-bind-template i ng-bind-html-unsafe zamiast dyrektyw. Można znaleźć ich opisy tutaj:

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