rvasilev
5/23/2013 - 2:10 PM

howto make an angular app with a JS bookmarklet

howto make an angular app with a JS bookmarklet

var div = document.createElement('div');
div.setAttribute('ng-controller', 'AController');
div.innerHTML = '<div ng-repeat="view in views" id="{{view}}">';
document.body.appendChild(div);

var app = angular.module('bookmarklet', []);

app.run(function ($rootScope) {
  $rootScope.URL = location.href;
});
  <a href="javascript:(function () {
    var js = document.createElement('script');
    js.setAttribute('src', 'http://example.com/bookmarklet.js');
    document.body.appendChild(js);
  }());">
    bookmarklet
  </a>
app.controller('AController', function($scope, $http) {
  // here you can use $scope.URL which is the actual site from JavaScript's location.href
  $scope.views = ['a', 'b', 'c'];
});
/**
 * redirect javascript bookmarklet
 */
// javascript:location.href='http://example.com/?uri='+encodeURIComponent(location.href)

/**
 * bookmarklet loaded on site
 */
(function(){

  // Load the script from url and when it's ready loading run the callback.
  function loadScript(url, callback) {
    var script = document.createElement('script');
    script.src = url;

    // Attach handlers for all browsers
    var done = false;
    script.onload = script.onreadystatechange = function() {
      if(
          !done && (
          !this.readyState ||
          this.readyState === 'loaded' ||
          this.readyState === 'complete')
        ) {
        done = true;

        // Continue your code
        callback();

        // Handle memory leak in IE
        script.onload = script.onreadystatechange = null;
        document.head.removeChild(script);
      }
    };

    document.head.appendChild(script);
  }

  // Load a list of scripts *one after the other* and run cb
  var loadScripts = function(scripts, cb) {
    var script;
    if(scripts.length) {
      script = scripts.shift();
      loadScript(script, function(){
        loadScripts(scripts.slice(0), cb);
      });
    } else {
      if (cb) { cb(); }
    }
  };

  var loadStyles = function(csss) {
    var css, _i, _len;
    for (_i = 0, _len = csss.length; _i < _len; _i++) {
      css = csss[_i];
      var e = document.createElement('link');
      e.setAttribute('rel','stylesheet');
      e.setAttribute('href', css);
      document.head.appendChild(e);
    }
  };

  var appRoot = 'http://example.com/';

  // Loading style definitions
  loadStyles([
    appRoot + 'css/bootstrap.min.css',
    appRoot + 'css/application.css'
  ]);

  // Loading the scripts
  loadScripts([
    'https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js',
    appRoot + 'js/init.js',
    appRoot + 'js/controller.js'
  ], function() {
    // Manual Initialization of angular app
    angular.element(document).ready(function() {
      angular.bootstrap(document, ['bookmarklet']);
    });
  });

})();