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("AttributeCtrl", function ($scope) {
    $scope.master = {
        name: "some name"
    };
});

However, I need to manually bootstrap angular because I'm only using it in a part of my app that is loaded via jQuery's $.load(). If I do the following:

main.js - this is where the page I want to use angular on is being pulled in

$("#form").load(contextPath + url, params, function() {
    angular.bootstrap($("#angularApp"));
});

And then the page being pulled in has it's own javascript:

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

This works, however, ideally, I'd like my controllers to be scoped at the module level. So I modified the above code like so

main.js

$("#form").load(contextPath + url, params, function() {
    angular.bootstrap($("#angularApp", ["myApp"]));
});

and then...

var app = angular.module("myApp"); // retrieve a module

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

Retrieving the module this way doesn't seem to work, though. Am I doing something wrong?

Are you getting a module not found message? Is the module declaration and controller factory being run before the bootstrap function call? — BoxerBucks
– BoxerBucks, Commented May 14, 2013 at 14:13
@gregg Just give you the update. They updated the documentation to make it clear. They said you can only pass in predefined modules. Hope it helps. github.com/angular/angular.js/issues/3692 — zs2020
– zs2020, Commented Sep 5, 2013 at 14:43
How can you guarantee the time that it takes to do the load to the time you try and reference the module that the module was bootstrapped at that point? — Jeremy Reed
– Jeremy Reed, Commented Nov 7, 2013 at 6:17

flup · Accepted Answer · 2015-07-14 00:04:03Z

3

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.

answered Jul 14, 2015 at 0:04

flup

27.2k8 gold badges56 silver badges75 bronze badges

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

Comments

Jussi Kosunen · Accepted Answer · 2013-08-21 18:17:19Z

1

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.

answered Aug 21, 2013 at 18:17

Jussi Kosunen

8,2973 gold badges30 silver badges34 bronze badges

Comments

boatcoder · Accepted Answer · 2014-03-08 16:24:35Z

0

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

edited Mar 8, 2014 at 16:24

boatcoder

18.2k21 gold badges126 silver badges188 bronze badges

answered Aug 21, 2013 at 21:21

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

3 Comments

vin Over a year ago

This isn't a bug. You're wrong. Here's a working plnkr plnkr.co/edit/UowJpWYc1UDryLLlC3Be?p=preview

zs2020 Over a year ago

@vin Let's cut it. I don't want to argue with you since you really don't understand what we are talking about here.

vin Over a year ago

Fair enough, maybe I don't understand the problem

Pascal · Accepted Answer · 2014-06-19 19:45:40Z

0

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

edited Jun 19, 2014 at 19:45

Pascal

12.9k27 gold badges113 silver badges206 bronze badges

answered Aug 22, 2013 at 1:27

vin

8231 gold badge10 silver badges15 bronze badges

2 Comments

zs2020 Over a year ago

NO. "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."

vin Over a year ago

So then the solution is to create a new module and then call that module using bootstrap .. var app = angular.module('myApp', []);

Collectives™ on Stack Overflow

Manually bootstrapping AngularJS and then getting the module

4 Answers 4

Comments

Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related