Angular.js and Require.Js

Question

I am studying Angular.js and Require.js at the moment. I ran into a problem here while I use these two together. For example, in my html, I have something very simple, like {{3 + 3}}. I found out that this will be evaluated only 6 seconds after everything has been downloaded. The user can clearly see the whole process. But that is not good for me. I do not want to linger here. Can someone explain why this happened? This is because I am doing a manual download.

This is my main.js for the request and my 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']); }); }); 

Greetings

Answer 1

When you download some dependencies with require.js before downloading angular, the user needs to wait until all these files are fully downloaded before the application starts. And since HTML is loaded first before your scripts, its raw content becomes visible to the user for a while.

If you do not want the user to view the contents of your HTML element before processing it using angular, use the ngCloak directive, which was created just for that. Take a look at this documentation entry: http://docs.angularjs.org/api/ng.directive:ngCloak . This directive sets the style of the element so that it is initially hidden, and when angular loads and finishes processing the style of the HTML element, it returns back to the visible, thus only compiled HTML is displayed.

Update:

But since the above solution will not work immediately in your case (since the angular script library must be loaded before the template body is included in the head document), you must additionally include the following style in the head section of your document:

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

This is what angular adds to page styles after loading.

Another solution is to not embed the {{ }} bindings directly in the element bodies, but instead use the ng-bind , ng-bind-template and ng-bind-html-unsafe . You can find their descriptions here:

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