angularjs - Angular.js and Require.Js -


i studying angular.js , require.js @ moment. encountered issue here while using 2 together. example in html have simple {{3+3}}. found out evaluated 6 few seconds after loaded. user can see whole process. not me. not want delay here. can explain why happened? because doing manually bootstrap.

this main.js require , 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']);   }); });

cheers

as you're loading dependencies require.js before bootstraping angular, user have wait files loaded before application starts. , because html loaded first before scripts, it's raw content made visible user while.

if don't wan't user see content of html element before it's processed angular, use ngcloak directive made this. take @ entry of documentation: http://docs.angularjs.org/api/ng.directive:ngcloak. directive sets element's style it's hidden , when angular bootstraps , finishes processing html element's style set visible, showing compiled html.

update:

but above solution won't work straightaway in case (because angular library script have loaded before template body — included in document's head), should additionally include following styling in head section of document:

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

this angular appends page styles after being loaded.

yet solution not insert {{ }} bindings directly inside elements' bodies, using ng-bind, ng-bind-template , ng-bind-html-unsafe directives instead. can find 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


Comments

Post a Comment

Popular posts from this blog

.htaccess - First slash is removed after domain when entering a webpage in the browser -

sometimes when hit address of webpage in browser, removes first slash after domain. examples: www.mywebsite.com/scripts/script_6.php -> trying load www.mywebsite.comscripts/script_6.php www.mywebsite.com/test.php -> trying load www.mywebsite.comtest.php after entering again, loads page. a .htaccess settings must wrong: rewritebase / errordocument 404 http://www.mywebsite.com/oops.php errordocument 401 /notallowed.php rewriteengine on # turn on rewriting engine #gzip <ifmodule mod_deflate.c> addoutputfilterbytype deflate text/text text/html text/plain text/xml text/css application/x- javascript application/javascript </ifmodule> #end gzip rewritecond %{http_host} ^mywebsite\.com rewriterule ^(.*)$ http://www.mywebsite.com$1 [r=permanent,l] directoryindex index6.php rewriterule ^termsofuse/?$ termsofuse.php [nc,l] # handle requests "adpolicy" rewriterule ^privacy-policy/?$ privacy-policy.php [nc,l] # handle requ...
Read more

Automatically create pages in phpfox -

i have array of information of places , wanna use them create multiple pages in phpfox site. first tried manually insert data in phpfox database (in tables of phpfox_pages , phpfox_pages_text ). the page shown in site when opening it's link, site says: the page looking cannot found. do know other tables should manipulate make work? or know plugin phpfox same? thanks, solved ( @purefan guide): "pages" has user if take @ phpfox_user table, you'll found out how fetch new records on that. there 2 ambiguous fields in table ( password & password_salt ). can use script create values fields: <?php function generaterandomstring() { $length = 164; $characters = '-_0123456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz'; $randomstring = ''; ($i = 0; $i < $length; $i++) { $randomstring .= $characters[rand(0, strlen($characters) - 1)]; } return $randomstring; } $ssalt = '';...
Read more

c# - Farseer ContactListener is not working -

i'm using farseer in xna project, have trouble contactlistener. created class contactlistener these 2 error messages , don't know how fix problems. the type or namespace name 'contactlistener' not found (are missing using directive or assembly reference?) the type or namespace name 'contactimpulse' not found (are missing using directive or assembly reference?) what wrong contactlistener class? class mycontactlistener: contactlistener { void begincontact(contact contact) { /* handle begin event */ } void endcontact(contact contact) { /* handle end event */ } void presolve(contact contact, ref manifold oldmanifold) { fixture fixturea = contact.fixturea; fixture fixtureb = contact.fixtureb; if (fixtureb.collisioncategories == category.cat10) { contact.enabled = false; } } void postsolve(contact contact, ref contactimpulse impulse) { /* handle post-solve event */ } }...
Read more