Last active
May 19, 2020 05:53
-
-
Save bettysteger/5636338 to your computer and use it in GitHub Desktop.
howto make an angular app with a JS bookmarklet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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']); | |
}); | |
}); | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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']; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a href="javascript:(function () { | |
var js = document.createElement('script'); | |
js.setAttribute('src', 'http://example.com/bookmarklet.js'); | |
document.body.appendChild(js); | |
}());"> | |
bookmarklet | |
</a> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
}); |
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
Thank you very much! :)