Angularjs manual bootstrap -

-

i manually bootstrap angular app on dom load angular doesn't seem able bootstrap app when try wait until dom load 

 <body>  <div ng-app="myapp">   {{1 + 1}}  </div>  <script src="angular.js"></script>  <script type="text/javascript" src="delay.js"></script>  </body>

and here's delay.js

window.onload = function(){ console.log('reached 2') var myapp = angular.module('myapp',[]) }  console.log('reached 1')

the above code throws following error. 

reached 1  uncaught error: [$injector:modulerr] failed instantiate module myapp due to: error: [$injector:nomod] module 'myapp' not available! either misspelled module name or forgot load it. if registering module ensure specify th...<omitted>...0)  reached 2

after looking @ various other examples, bootstrapping seems work seamlessly when outside window.onload event this.

delay.js 

//this bootstrap works  angular.module('myapp',[]) console.log('reached 1')

not sure what's happening here, module not visible angular during onload callback ?

further following in delay.js fails

//still fails bootstrap      angular.element(document).ready(function(){     console.log('reached 2')     var myapp = angular.module('myapp',[])     })

even following fails work 

angular.element(document).ready(function(){ console.log('reached 2') angular.bootstrap(document,[myapp]) var myapp = angular.module('myapp',[]) })

or

angular.element(document).ready(function(){ console.log('reached 2') var myapp = angular.module('myapp',[]) angular.bootstrap(document,[myapp]) })

or 

angular.element(document).ready(function(){ angular.bootstrap(document.body.children[0],['myapp']) var myapp = angular.module('myapp',[]) console.log('reached 2') })

angularjs bootstraps automatically on domcontentloaded. event fires dom ready. means don't have manually bootstrap app if need dom being ready.

the window.onload event waits content loaded. includes scripts, images , other resources.

in case still want manually bootstrap on ready, how it:

angular.element(document).ready(function() {     angular.bootstrap(document, ['myapp']); });

angular.bootstrap create app on element specified. in case on document. means don't need have ng-app directive if manually bootstrap app. (please note first incorrectly assumed still need it.)

you can not have module declaration inside ready callback, because stated in developer guide:

"notice angular.bootstrap not create modules on fly. must create custom modules before pass them parameter."

here corrected fiddle shows ng-app isn't needed when manually bootstrapping: http://jsfiddle.net/yxaba/


Comments

  1. Simon Matthew21 March 2022 at 02:01

    This is so true, and In order to make use of the features of AngularJS, you need to hire an angular JS developers or a team of developers who have expertise in using this framework. Well, one can hire a professional freelancer from Eiliana.com, which is a global freelancing platform, and all the freelancers are highly skilled.

    ReplyDelete

Post a Comment

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

-
using jmockit 1.2 jar, trying mock string's length method getting unexpected invocation exception: failed: test java.lang.illegalstateexception: missing invocation mocked type @ point; please make sure such invocations appear after declaration of suitable mock field or parameter @ stringdemo.testa$1.<init>(testa.java:17) @ stringdemo.testa.test(testa.java:13) i using testng: @test public void test() throws exception { new expectations() { @mocked("length") string astring; { astring.length(); result = 2; } }; system.out.println(a.showa("test")); } } actual class a: public class { public static int showa(string str){ int a= str.length(); return a; } } this wrong way of recording expected results. shouldn't mock , record string's length() method, record showa() instead. here solution @suppresswarnings("unused...
Read more

ios - Can NSManagedObject conform to NSCoding -

-
i need transfer single object across device. right converting nsmanagedobject dictionary , archiving , sending nsdata. upon receiving unarchiving it. transfer nsmanagedobject archiving , unarchiving instead of creating intermediate data object. @interface test : nsmanagedobject<nscoding> @property (nonatomic, retain) nsstring * title; @end @implementation test @dynamic title; - (id)initwithcoder:(nscoder *)coder { self = [super init]; if (self) { self.title = [coder decodeobjectforkey:@"title"]; //<crash } return self; } - (void)encodewithcoder:(nscoder *)coder { [coder encodeobject:self.title forkey:@"title"]; } @end nsdata *archivedobjects = [nskeyedarchiver archiveddatawithrootobject:testobj]; nsdata *objectsdata = archivedobjects; if ([objectsdata length] > 0) { nsarray *objects = [nskeyedunarchiver unarchiveobjectwithdata:objectsdata]; } the problem above code is. crashes @ self.title in initwithcoder sa...
Read more

What is the difference between data design and data model(ERD) -

-
i have google question , find answer in day. know, data design many many table have list column,and mark pk , fk. why er-diagram have find this? data design process of designing database. main output of data design detailed logical data model of database. some people data design includes of needed logical , physical design choices , physical storage parameters needed generate design in data definition language. technically, database analysis, database analysts (dbas) trained do. while person can both data design , database analysis, these 2 different tasks. data design models data. database analysis takes model , applies 1 or more database engines (relational, hierarchical, nosql). a logical data model 1 of main outputs of data design. data model represented entity relationship diagram, or er diagram.
Read more