What I need is to bootstrap AngularJs and render a directive on demand. Imagine there is a splash page that should not be resources-hungry (should not download much without need, even javascript at the bottom would be bad).
<!DOCTYPE html>
<body>
<button onclick="loadTheApp()">Launch app</button>
<script>
function loadTheApp() {
// load Angular and other files in this manner:
var el = document.createElement('script');
el.src = '/js/app.js';
document.body.appendChild(el);
// TODO: bootstrap Angular and render directive
}
</script>
</body>
</html>
I think you can use this solution:
el.onload = function() {
var element = document.body; // element which contains angular application
angular.bootstrap(element, ['myApp']);
}
assuming that app.js file contains angular and application (build version), or angular is loaded and app.js file contains application myApp
Related
I have create an application using angular cli. My application is the angular 2 application. I would like to run a <script> and put an alert box.
I have try to load the <script> on hello.component.html but it does not work. And also I try put the <script></script> inside the index.html but it also fails.
How do i implement <script></script> on angular 2 applications.
<script>
$(document).ready(function() {
alert("Hello from JS");
});
</script>
<script> tags in Angular2 component templates are just silently stripped.
You can use
class MyComponent {
ngAfterContentInit() {
alert("...");
}
or add JavaScript to your TypeScript by other means like require
I'm trying to render a Javascript ad in my Angular template but it will not show up. I've found some solutions when they append the Javascript to the head tag but I want the ad to be placed in my Html (inside body).
Here is a Plunker: https://plnkr.co/edit/WHhQ95gS5HKSphmmirio
Here is a simple plain Html example that works.
<html>
<head>
</head>
<body>
<div class="ad">
<script src="http://media.affiliatelounge.com/data/nordicbet/ad_js/display_88.js?ad=ad_793270_88.html&size=300x250&clicktag=http://record.affiliatelounge.com/_sVuSoFFh4LK58VwA2IUESrKVVrME-Gsw/1&media=108786&campaign=1"></script>
</div>
</body>
</html>
But if I add the div inside an Angular template it will not render and the console says nothing.
I have some ads up and running here (http://www.odds.nu/erbjudanden), but they are either .gif or iframes. I want to be able to show Javascript ads instead. They are added to the Html but are not rendered (placed in the bottom of the page).
Can $sce or $compile help somehow?
My index.html
<div data-ng-view="" class="mainView"></div>
My app.js
$routeProvider.when("/erbjudanden", {
controller: "offerController",
templateUrl: "/app/templates/offers.html"
});
My offers.html
<div class="ad">
<script src="http://media.affiliatelounge.com/data/nordicbet/ad_js/display_88.js?ad=ad_793270_88.html&size=300x250&clicktag=http://record.affiliatelounge.com/_sVuSoFFh4LK58VwA2IUESrKVVrME-Gsw/1&media=108786&campaign=1"></script>
</div>
Any solution?
If you had inspected result of that url request(make sure adBlock is off)
https://wlbetclic.adsrv.eacdn.com/S.ashx?btag=a_17172b_14837c_&affid=12824&siteid=17172&adid=14837&c=
You will see the actual result
document.write('<script type="text/javascript" src="//wlbetclic.eacdn.com/TrafficOpt/s.5.4.min.js?t=1"></script>');
document.write('<script type="text/javascript" src="//wlbetclic.eacdn.com/wlbetclic/img/js/Affiliate_12824.js?t=20160224"></script>');
//other lines omitted for brevity
So this file is executing document.write which obviously will not work in angular, just because they are totally different (even though you could trigger digest cycle somehow, you still don't have access to modify that script file, as it's generated by 3rd party server and has own variables)
What i would do is - make a page like ad.html, just like index.html or 404.html, then request this file from angular (not as template, but like a view file) as an iframe src with custom attributes
And i would use custom DOM element, and populate contents with jQuery, or with angular, look at jQuery sample below
Also i would need krux/postscribe plugin, because you cannot use document.write in async html files
<!-- create multiple holders -->
<ad-holder url="https://wlbetclic.adsrv.eacdn.com/S.ashx?btag=a_17172b_14837c_&affid=12824&siteid=17172&adid=14837&c="></ad-holder>
<div class="black-widow">
<!-- with size attributes -->
<ad-holder url="http://google.com" width="100" height="40"></ad-holder>
</div>
<!-- jQuery population with iframe -->
<script>
//get all custom elements
$('ad-holder').each(function(){
//create iframe placeholder
var $iframe = $(document.createElement('iframe'));
//get url of custom element
var url = $(this).attr('url');
//request ad.html file with params, currently it's url param
$iframe.attr('src', 'ad.html?url=' + url);
//some stylings acceptable here
$iframe.width('100px');
//or get styles from custom-element
var heightValue = $(this).attr('height');
$iframe.height(heightValue || '50px');
//rebuild custom element with iframe
$(this).append($iframe);
});
</script>
<!-- angular populate with iframe directive -->
<scrip>
angular.module('app', []).directive('adHolder', function(){
return {
restrict: 'E',
scope: { url: '#' },
//you could also execute in compile-phase
link: function(scope, element, attribute){
var $iframe = angular.element(document.createElement('iframe'));
$iframe.attr('src', 'ad.html?url=' + scope.url);
element.html($iframe);
}
}
});
</script>
And ad.html would look like
<body>
<div id="ad"></div>
<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
//for the sake of simplicity we expect only 1 param (url)
return query.replace('url=', '');
}
var adUrl = getQueryVariable('url');
if (adUrl)
postscribe('#ad', '<script src="' + adUrl + '"><\/script>');
else {
var $h1 = $(document.createElement('h1'));
$h1.text('No ad available');
$(document.body).append($h1);
}
</script>
</body>
The best part of this solution is that you can reuse same custom-element with different url attribute for any other ads
Checkout jQuery real working demo
Although this demo heavily uses jQuery, it's easy to tweak for angular version, which i would suggest you to implement as homework =)
Short answer:
Angular does not perform compilation of Javascript in HTML templates. You either put the HTML manually in the page (instead of loading as template) or have another way to call it.
You can read more here
I have signed up to a paid version of Polldaddy and was provided this script tag (minus the proper id).
<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/0000000.js"></script>
This script has to be loaded within a div in a view of mine - and it is not working. Does angular have an issue with loading scripts within a view? Is it possible? If so, could you help me understand how to do it please?
Let me know if you need more info.
Thanks
You can't load a script inside an Angular app due the Angular script directive, so you need to create your own directive.
Something like this:
function polldaddy() {
var injectScript = function(element) {
var scriptTag = angular.element(document.createElement('script'));
scriptTag.attr('charset', 'utf-8');
scriptTag.attr('src', 'http://static.polldaddy.com/p/0000000.js');
element.append(scriptTag);
};
return {
link: function(scope, element) {
injectScript(element);
}
};
}
angular
.module('myApp')
.directive('polldaddy', polldaddy);
and then in your HTML:
<div polldaddy></div>
I am trying to load html file in backbone.js .but i am not able display view .could please tell where i did wrong ..i will share my code with u.
**code**: http://goo.gl/CcqYwX
$(document).ready(function(){
var ContactManager = new Marionette.Application();
ContactManager.addRegions({
mainRegion:"#contend"
})
ContactManager.on("start", function(){
console.log("ContactManager has started!");
});
ContactManager.start();
// router
var routers = Backbone.Router.extend({
routes: {
"": "showFirstPage"
},
showFirstPage:function(){
}
})
var ToolItemView = Backbone.Marionette.ItemView.extend({
template: 'template/test.html',
});
var toolItemview = new ToolItemView();
ContactManager.mainRegion.show(toolItemview);
})
i am trying to load test.html file but i am not able to do that..?
Marionette uses underscore templating by default. You'll need to either use some sort of external loader to load them in as variables, or you can place them in the DOM as script elements that you can then reference with your template property. See here:
So for instance if you put it in your html, the code would look like
<html>
<body>
<script type="text/template" id="example">
<div class="template-content-here">
<%=variable_here %>
<!-- probably more stuff here -->
</div>
</script>
<script src="myApp.js"></script>
</body>
</html>
then you could reference it in JavaScript as
var ToolItemView = Backbone.Marionette.ItemView.extend({
template: '#example',
});
That works nicely for small projects, for larger projects you'll want some sort of build/module system to pull in the precompiled templates and reference those directly.
Way more info here: http://marionettejs.com/docs/v2.3.1/marionette.renderer.html
Hi I have my js application that was built with requirejs. Now I have external page from other developer, he can load his scripts, html, css and other things that not connected to me.
Here example of my module that will be connected to his page:
require(['page', 'widgetGame', 'adDynamic'], function (Page, WidgetGame, AdDynamic) {
function PageExternalGame (params) {
var params = params || {};
Page.call(this, params); // call super constructor.
};
PageExternalGame.prototype.gameLoadingComplete = function() {
alert(111);
};
window.yepiExternalPageGame = new PageExternalGame();
return PageExternalGame;
});
and here example of his page:
<!DOCTYPE HTML>
<html lang="en"><head>
</head>
<body>
<div id='gameArea'>
<canvas id='canvas0' width='480' height='320' style="position: absolute; "></canvas>
</div>
<script data-main="../../YepiMobileNew/UI/js/pageExternalGame" src="http://requirejs.org/docs/release/2.1.14/minified/require.js"></script>
<script src='js/gamemin.js'></script>
<script>yepiExternalPageGame.gameLoadingComplete()</script>
</body>
</html>
So in his page he call my object yepiExternalPageGame, that should be loaded by requirejs. but when he call this object, require itself already loaded, but class pageExternalGame still wasn't loaded, so this object is not exist when he call it. How to handle with it? (His outer scripts also can call my object). Thanks.
Firstly if you sharing your amd app with other it is good to create build that isn't using require.js so you won't force other developers to add another lib and increase page size. You can do this with almond.js
But returning to your question.
Change
<script>yepiExternalPageGame.gameLoadingComplete()</script>
to
<script>
require(['../../YepiMobileNew/UI/js/pageExternalGame'], function() {
yepiExternalPageGame.gameLoadingComplete();
});
</script>
That will help.