angular js order of execution

Question

I'm new to angular, I'm trying to define module inside one of js files, and I felt that angular is processing my dom right away, where the var app = angular.module("myApp", []); will be defined at a later stage inside Shell or one of it's modules.

I tried with regular script tag but had errors, and I assumed if I inject this later once my dom is ready and then I instantiate modules inside Shell. please guide.

Javascript

document.addEventListener("DOMContentLoaded", function(event) {
     inject();
     new Shell();
});

function inject() {
    var ng = document.createElement('script');
    ng.src = "js/api/angular.js";
    var scripts = document.getElementsByTagName('script')[0]; 
    scripts.parentNode.insertBefore(ng, scripts);
}

inside Shell

var app = angular.module("myApp", []);
        app.controller("MyController", function($scope) {
            $scope.author = {
                "name": "My name",
                "title": "Developer",
                "company": "my company"
            }
        });

my html is

 <div id="result" ng-app="myApp">
        <div ng-controller="MyController">
            <h1>{{author.name}}</h1>
            <p>{{author.title + ", " + author.company}}</p>
        </div>
    </div>

How should I address this that angular waits a bit before it lets me define my modules.

read docs on how to manually bootstrap angular

charlietfl
– charlietfl

2014-09-19 18:58:09 +00:00
Commented Sep 19, 2014 at 18:58 — charlietfl
– charlietfl, Commented Sep 19, 2014 at 18:58

Vadim · Accepted Answer · 2014-09-19 19:13:19Z

0

The problem is that angular also listens to DOMContentLoaded and once it is fired it looks for module called myApp, because you specified it in ng-app="myApp" directive. If you want to change this behaviour you should bootstrap angular yourself. In your case you need to remove ng-app="myApp" from your div and add angular.bootstrap(..., ['myApp']); to your Shell() constructor after you defined module and defined all services, directives, controllers and other module related stuff, since after module is bootstrapped you will not be able to do it any longer.

HTML

<div id="result" ng-cloak> 
    ...
</div>

Shell

var app = angular.module("myApp", []);
    app.controller("MyController", function($scope) {
      ...
    });

// <= Define here all module related stuff

angular.bootstrap(document.getElementById('result'), ['myApp']);

edited Sep 19, 2014 at 19:13

answered Sep 19, 2014 at 18:56

Vadim

8,7744 gold badges47 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2727195 Over a year ago

looks promising, let me try :)

Vadim Over a year ago

@user2727195 for sure :)

user2727195 Over a year ago

question, there's a side effect, I see the curly brackets/templates for a while before it gets replaced, is there a a feature in angular to tackle such effects

Vadim Over a year ago

try to place ng-cloak directive on your div. See docs.angularjs.org/api/ng/directive/ngCloak

user2727195 Over a year ago

please also look at this question stackoverflow.com/questions/25941124/…

Collectives™ on Stack Overflow

angular js order of execution

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related