public
Last active

howto make an angular app with a JS bookmarklet

  • Download Gist
bookmarklet.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
/**
* 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']);
});
});
 
})();
controller.js
JavaScript
1 2 3 4
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'];
});
index.html
HTML
1 2 3 4 5 6 7
<a href="javascript:(function () {
var js = document.createElement('script');
js.setAttribute('src', 'http://example.com/bookmarklet.js');
document.body.appendChild(js);
}());">
bookmarklet
</a>
init.js
JavaScript
1 2 3 4 5 6 7 8 9 10
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;
});

Thank you very much! :)

hmm, how do i append a template to the current page?

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.