I have seen two different ways to start up AngularJS:
First can someone tell me if these are both the same?
I also see the following code:
var TodoApp = angular.module('TodoApp', ['ngResource']);
Does the code above have to have been loaded before I can issue the angular.bootstrap command?
Directive* ng:app can be used to auto-bootstrap the application.
One can place multiple ng-app directives inside HTML but only the first one will be used to bootstrap the app, while others will be ignored. The element at which the first ng:app directive is found becomes the 'root' of the AngularJS application (this is where the $rootScope gets attached).
[using ng:app] Angular initializes automatically upon DOMContentLoaded event ...
*Although ng:app is used similarly to other directives, it's not part of the ng module and it is not defined the same way other Angular directives are defined.
On the other hand, with manual bootstrapping you may initialise multiple distinct Angular apps inside the same page.
Examples of when you'd need to do this include using script loaders or the need to perform an operation before Angular compiles a page.
So if you want to use a script loader such as RequireJS, than, in RequireJS runner method, you will want to initialise your angular app by calling angular.bootstrap(....
Angular.bootstrap command lets you specify the module dependencies as a second parameter. The signature of the function is:
angular.bootstrap(element[, modules]);
When you want to bootstrap the app manually than you have to specify the name of your main angular module inside the dependency array (the second parameter to angular.bootstrap call):
// You define your app module:
angular.module('myApp', []);
// Then you specify your app module as a dependency to angular.bootstrap:
angular.bootstrap(element, ['myApp']);
Also, manual bootstrapping lets you do some pre-processing and configuring outside the angular before initialising your angular app.
To answer the second part of your question: Yes, you need to load and execute your modules before you can reference them in call to angular.bootstrap.
angular.module('TodoApp', ['ngResource']);
angular.bootstrap(document, ['TodoApp']);
Those both lines are the same (assuming you have ng-app on your body element).
You sould do in this order:
Note, after calling bootstrap you can't define new modules (at least for now, as there is no dynamic module loading and lazy loading). This is because there is several steps of loading AngularJS application - configure and run. And after run there is not possible to run configure steps of other modules.
