make an angular app with js bookmarklet

Question

I'm trying to make an angularjs app out of an site by clicking on a JS bookmarklet.

The problem is the ng-controller isn't recognize by angular and throws this error:

Error: Argument 'LDController' is not a function, got undefined

First i define ng-app and use angular.module with the same name, this works, i got <html ng-app="bookmarklet">. Then I load an external file by the name of application.js. app.controller('LDController', ..) is defined in this file!

What i am doing wrong? here is the js bookmarklet code:

function loadApp() {
  document.getElementsByTagName('html')[0].setAttribute('ng-app', 'bookmarklet');

  var div = document.createElement('div');
  div.setAttribute('ng-controller', 'LDController');
  div.innerHTML = '';
  document.body.appendChild(div);

  var js = document.createElement('script');
  js.innerText = "var app = angular.module('bookmarklet', []);";
  document.body.appendChild(js);

  js = document.createElement('script');
  js.setAttribute('src', 'http://example.org/js/application.js');
  document.body.appendChild(js);
}

(function () {
  if (typeof angular === 'undefined') {
    js = document.createElement('script');
    js.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js');
    js.onload = loadApp;
    document.body.appendChild(js);
  }
  else {
    loadApp();
  }
}());

Angular treats script tags rather specially. Have you seen the discussion here where Igor talks about how the inclusion of jQuery could help? — Ram Rajamony
hmm now i got the error away by using loadScripts from github.com/szabyg/vie-annotation-bookmarklet/blob/gh-pages/… but now the app.run function doesn't work anymore, i load the js files in this order: angular.min.js, init.js, service.js, controller.js -> this is my init.js with app.run linkedmovie.hp.af.cm/js/init.js - in it there are 2 console.log, the first (app) makes an output the second in app.run doesn't ... why is that? — Betty St
I've been thinking and you are manually initializing Angular by adding the ng-app directive. The prescribed method for doing this is to NOT insert ng-app and instead to call angular.bootstrap on the appropriate element after everything else is set up. So for instance: angular.element(document).ready(function() {angular.bootstrap(document, ['bookmarklet']);} Can you try this? There is more information here — Ram Rajamony
wow thank you, that did it! now i've only have Access-Control-Allow-Origin errors left, but that's another problem ;) i will post the answer, if you don't mind. — Betty St

Ram Rajamony Ram Rajamony · Accepted Answer · 2013-05-23T14:40:07

I've been thinking and you are manually initializing Angular by adding the ng-app directive. The prescribed method for doing this is to NOT insert ng-app and instead to call angular.bootstrap on the appropriate element after everything else is set up. So for instance:

angular.element(document).ready(function() {
    angular.bootstrap(document, ['bookmarklet']);
}

There is more information here

make an angular app with js bookmarklet

2 Answers