I am currently trying to setup a new AngularJS project using RequireJS. I have started with the angularjs-requirejs-seed project. I have done one project in the past using angular/require, but I have yet to be able to get it working with the "NG_DEFER_BOOTSTRAP" way.
Here is my main.js file,
'use strict';
require.config({
paths: {
jquery: "bower_ponents/jquery/dist/jquery",
angular: "bower_ponents/angular/angular",
angularRoute: "bower_ponents/angular-route/angular-route.min",
angularMocks: "bower_ponents/angular-mocks/angular-mocks.min",
text: "bower_ponents/requirejs-text/text",
pApp: "ponents/app",
},
shim: {
'angular' : {'exports' : 'angular'},
'angularRoute': ['angular'],
'angularMocks': {
deps:['angular'],
'exports':'angular.mock'
}
},
priority: [
"angular"
]
});
//.2.1/docs/guide/bootstrap#overview_deferred-bootstrap
window.name = "NG_DEFER_BOOTSTRAP!";
require([
'angular',
'pApp/app'
], function(angular, app) {
var $html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function() {
angular.resumeBootstrap([app['name']]);
});
});
When I run this I get an error undefined is not a function on the resumeBoostrap line. When I debug the app and set a breakpoint on the resumeBootstrap line, I find that angular is missing the resumeBootstrap method. However the window.name is showing NG_DEFER_BOOTSTRAP properly. Also, if I remove the resumeBoostrap method and just do angular.bootstrap then the app works which tells me everything else is fine.
Here is my html file,
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<h1>AngularJS + RequireJS</h1>
<ul class="menu">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>
<div ng-view></div>
<script data-main="main" src="bower_ponents/requirejs/require.js"></script>
</body>
</html>
I am currently trying to setup a new AngularJS project using RequireJS. I have started with the angularjs-requirejs-seed project. I have done one project in the past using angular/require, but I have yet to be able to get it working with the "NG_DEFER_BOOTSTRAP" way.
Here is my main.js file,
'use strict';
require.config({
paths: {
jquery: "bower_ponents/jquery/dist/jquery",
angular: "bower_ponents/angular/angular",
angularRoute: "bower_ponents/angular-route/angular-route.min",
angularMocks: "bower_ponents/angular-mocks/angular-mocks.min",
text: "bower_ponents/requirejs-text/text",
pApp: "ponents/app",
},
shim: {
'angular' : {'exports' : 'angular'},
'angularRoute': ['angular'],
'angularMocks': {
deps:['angular'],
'exports':'angular.mock'
}
},
priority: [
"angular"
]
});
//http://code.angularjs/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap
window.name = "NG_DEFER_BOOTSTRAP!";
require([
'angular',
'pApp/app'
], function(angular, app) {
var $html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function() {
angular.resumeBootstrap([app['name']]);
});
});
When I run this I get an error undefined is not a function on the resumeBoostrap line. When I debug the app and set a breakpoint on the resumeBootstrap line, I find that angular is missing the resumeBootstrap method. However the window.name is showing NG_DEFER_BOOTSTRAP properly. Also, if I remove the resumeBoostrap method and just do angular.bootstrap then the app works which tells me everything else is fine.
Here is my html file,
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy./">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<h1>AngularJS + RequireJS</h1>
<ul class="menu">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>
<div ng-view></div>
<script data-main="main" src="bower_ponents/requirejs/require.js"></script>
</body>
</html>
3 Answers
Reset to default 6According to angular documentation for bootstrap:
If window.name contains prefix NG_DEFER_BOOTSTRAP! when angular.bootstrap is called, the bootstrap process will be paused until angular.resumeBootstrap() is called.
angular.resumeBootstrap() takes an optional array of modules that should be added to the original list of modules that the app was about to be bootstrapped with.
Here is my snippet to defer angular initializtion in requirejs application:
window.name = "NG_DEFER_BOOTSTRAP!";
define(['angular', 'domReady', 'app'], function(ng, domReady){
domReady(function(document){
ng.bootstrap(document, ['app']);
ng.resumeBootstrap();
})
});
I have spent quite some time on this one. The issue is caused by the lazy definition of the resumeBootstrap method. The angular.js detects dom ready via JQLite. When the document loads, it triggers a method which defines the resumeBootstrap method. The problem is that you cannot enforce processing order between domready and JQLite ready, if domready already fulfills your dependency before the method gets defined, you are in trouble.
The workaround is to enforce javascript to execute all event handlers before your resumeBootstrap invocation. I've used the setTimeout method to do so, e.g.: setTimeout(angular.resumeBootstrap, 0).
http://javascript.info/tutorial/events-and-timing-depth#the-settimeout-func-0-trick
Hope it helped!
This is an old question but i ran into this need for a (semi-)legacy application. Instead of using the DOM Ready event or any settimeout() shenanigans I checked the source code and found this undocumented feature: https://github./angular/angular.js/blob/master/src/Angular.js#L1853
if (isFunction(angular.resumeDeferredBootstrap)) {
angular.resumeDeferredBootstrap();
}This was added in this mit: https://github./angular/angular.js/mit/c69caa7beee4e920f8f587eb3e943be99864a14f. As this is undocumented you should use it at your own risk, but I doubt anything will change as angularjs has been in LTS for a while now.
This code will run if the bootstrap process was deferred and therefore be the perfect hook function to place your angular.resumeBootstrap() call in.
And example:
angular.resumeDeferredBootstrap = function () {
// perform actions that need to happen before bootstrapping here
angular.resumeBootstrap();
// you could also do some async work in here and make sure bootstrapping happens after
someAsyncFunctionThatReturnsAPromise().then(function () {
angular.resumeBootstrap();
});
};