Manually bootstrapping AngularJS and then getting the module

Question

Generally, I\'d do the following and there would be an ng-app in my HTML:

var myApp = angular.module(\"myApp\", []);

myApp.controller(\"AttributeCt         


        

Answer 1

Updated

They updated the documentation and now it reads like this

Each item in the array should be the name of a predefined module or a (DI annotated) function that will be invoked by the injector as a run block. See: {@link angular.module modules}

---

It seems a bug.

The way you implemented to retrieve the module is correct. Just quote it from the doc to make it clear since it may not be well-known.

When passed two or more arguments, a new module is created. If passed only one argument, an existing module (the name passed as the first argument to module) is retrieved.

For the problem you mentioned, long story short...

The bootstrap function calls createInjector with the module list ['ng', ['ngLocale', function(){...}] , 'myApp'] (the last one is the module you passed in)

function bootstrap(element, modules) {
    ...
    var injector = createInjector(modules);

Inside createInjector(), it calls loadModules for each module passed in

function createInjector(modulesToLoad) {
    forEach(loadModules(modulesToLoad), function(fn) { instanceInjector.invoke(fn || noop); });

And loadModules calls angularModule, which is initialized as angularModule = setupModuleLoader(window);, which creates the object window.angular.module

function loadModules(modulesToLoad){
    ....
    var moduleFn = angularModule(module); // triggers the error

The the error occurs, since angularModule takes 2nd parameter as requires. Without it, it will throws an exception on this line (line 1148) throw Error('No module: ' + name);

Reported: https://github.com/angular/angular.js/issues/3692

Answer 2

You cannot create a controller after you've bootstrapped the app. See the documentation for angular.bootstrap.

You should call angular.bootstrap() after you've loaded or defined your modules. You cannot add controllers, services, directives, etc after an application bootstraps.

Answer 3

I don't know if this is just in the example code you have here but:

angular.bootstrap($("#angularApp", ["myApp"]));

should be

angular.bootstrap($("#angularApp"), ["myApp"]);

Your code for retrieving the module should work.

Answer 4

Not sure if this counts as a bug or an implementation decision (albeit a seemingly poor one). Adding an empty array solves the undefined require problem that you were having and should solve your problem overall.

var app = angular.module("myApp", []); // create a module

app.controller("AttributeCtrl", function($scope) {
   $scope.master = { name: "some name"};
});`

Also, in your fiddle you call {{name}} which won't render. You should be calling {{master.name}}

---

Edit

Thank you all for the downvotes .. Here's a working example. Good luck!

http://plnkr.co/edit/UowJpWYc1UDryLLlC3Be?p=preview