Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

howto make an angular app with a JS bookmarklet

View bookmarklet.js
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']);
});
});
 
})();
View bookmarklet.js
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'];
});
View bookmarklet.js
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>
View bookmarklet.js
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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.