Create a gist now

Instantly share code, notes, and snippets.

howto make an angular app with a JS bookmarklet
/**
* 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']);
});
});
})();
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'];
});
<a href="javascript:(function () {
var js = document.createElement('script');
js.setAttribute('src', 'http://example.com/bookmarklet.js');
document.body.appendChild(js);
}());">
bookmarklet
</a>
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;
});
@mentomorph

Thank you very much! :)

@fotoflo
fotoflo commented Mar 27, 2014

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