I'm using a service that uses the following embed script:
<script type="text/javascript">app_id="XXX";distribution_key="dist_2";</script>
<script type="text/javascript" src="https://loader.knack.com/XXX/dist_2/knack.js"></script>
<div id="knack-dist_2">Loading...</div>
Putting this in using dangerouslySetInnerHTML works, but only on full refresh. If I click a link to this page, it doesn't load.
Are there any tricks to get this to load?
Related
So, my client wants me to migrate his AngularJS page to the newest Angular 8 framework.
But he also wants to add some features to the current AngularJS application.
The workflows is like:
1. Migrate AngularJS to Angular 8
2. Sill maintain the old Angular JS app when there is new stuff coming in the old code.
The app has a static header navigation. So my idea was to build the header in Angular 8 and putt the old Angular JS app to the root of Angular 8 via iframe.
So when the user clicks on the nevigation in the Angular 8 app he gets router to the correct Angular JS app which will be renderd in the iframe of the Angular 8 app.
So the idea behind this is to migrate the pages page by page but still maintain the old AngularJS app if needed.
Is this possible?
I hope somebody can help me.
Best regards
At first for migration i suggest you to use This migration guide
At second, i have worked on an application where i used both Angular Js and angular8, the only problem that i have got was with rootes, i couldn't usr routes in angular.
How did i do ?
I called the angular js and the transposed angular 8 files in the same jsp via <script></script>
This is an example of my jsp with an angular 8 application called pointe, and angulars js application called employee
<%# include file="init.jsp" %>
<link rel="stylesheet" href="/angulars/pointe/styles.css"/>
<app-root></app-root>
<script src="/angulars/pointe/runtime-es2015.js" type="module"></script>
<script src="/angulars/pointe/runtime-es5.js" nomodule defer></script>
<script src="/angulars/pointe/polyfills-es5.js" nomodule defer></script>
<script src="/angulars/pointe/polyfills-es2015.js" type="module"></script>
<script src="/angulars/pointe/scripts.js" defer></script>
<script src="/angulars/pointe/main-es2015.js" type="module"></script>
<script src="/angulars/pointe/main-es5.js" nomodule defer></script>
<script src="/angulars/employee/js/angular.js"></script>
<script src="/angulars/employee/js/app.js"></script>
I think that it also works if you load your script into an iframe,
but any ways you have to wrap all this code in a container.
And finally i do really not recommand you to do it, because i had a lot of troubles with libraries that are loaded in angular js and angular 8
I created an angular single-page web app for my customer.
Now they need to integrate the app into a page of their (wordpress) website.
EDIT: in other words they want the app inside an existing wordpress page
what's the best approach?
I tried iframe but it does not work: no resize on app content change and problems with modals.
Thanks
If you need to insert it in an existing page with an already done template you can create a shortcode and a plugin:
create a folder like "your_spa" in the plugin folder of wordpress (/wp-content/plugins/)
create a php file named your_spa.php inside the new generated folder
put this inside the file "your_spa.php"
<?php
/*
Plugin Name: your spa plugin
Description: description
*/
function your_spa_code(){ ?>
<!-- put here your code (this will be inside the body of the page) -->
<?php }
add_shortcode( 'yourspa', 'your_spa_code' );
?>
take care of the links/resources urls (js, json, css): place them anywhere you want them, but remember the path (like in html path => url)
remember to let the apache user read the files (file permissions)
activate the plugin "your spa plugin" inside the wordpress dashboard
use [yourspa] inside a blogpost/page as a shortcut
And now you have created a plugin and a shortcode!
PS: remember that your code will be surrounded by the code of the existing page
It's a little dirty but it's the easies solution.
I had some success with simply rendering Angular's bootstrap code, the <app-root> and <script> tags, just as they are served from a standalone an Angular deployment.
I just added the following HTML in a post, using the HTML editor.
Of course, I had to fiddle the JS script source URLs. Rendering all this HTML could be done with a Wordpress shortcode and plugin that asks for a URL path to the JS files.
<app-root></app-root>
<script type="text/javascript" src="http://localhost:4200/inline.bundle.js"></script>
<script type="text/javascript" src="http://localhost:4200/polyfills.bundle.js"></script>
<script type="text/javascript" src="http://localhost:4200/styles.bundle.js"></script>
<script type="text/javascript" src="http://localhost:4200/scripts.bundle.js"></script>
<script type="text/javascript" src="http://localhost:4200/vendor.bundle.js"></script>
<script type="text/javascript" src="http://localhost:4200/main.bundle.js"></script>
This worked poorly with the Divi theme and a 'code' module, totally screwed up the page. Attempts to use the offical Wordpress mechanism for including JS scripts (wp_enqueue_script) failed since the <app-root> tag can't be found when the scripts load.
I have just started learning Ionic and Angular.
After reading basic documentation related to Angular and Ionic, I was following the tutorial from this site to develop the sample application myself.
I am able to load the application and see the data related to playlists, but after integrating 'Angular ngResource', to fetch the live data, related to sessions - by calling Rest API mentioned in the tutorial, I am not able to load the application in the browser (Blank white screen appears).
You can refer the application code with my changes here:
https://github.com/bhushanbaviskar/Angular-Ionic.git
Thanks.
You are missing at least inclusion of the ngResource and starter.services to your app in your app.js like this:
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngResource'])
Then in your index.html you have a lot of typos, you should replace these parts with the code below:
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- Angular ngReource-->
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
There was ngResource <script type=""> should be src="" and also the services.js had a typo servcies.js which should be services.js. Services.js also was declared as type and need to be changed to src.
I'm starting out with ReactJS and I'm following the simple example in the "Gettind Started".
This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="js/reactjs/react.min.js"></script>
<script src="js/reactjs/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel" src="js/main.js"></script>
</head>
<body>
<div id="example"></div>
</body>
</html>
It works. But if I watch the network traffic with Fiddler, I see that main.js is pulled twice from the server. Is that on purpose? bug?
As soon as browser encounters following lines
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel" src="js/main.js"></script>
browser issues http requests for both files. But since js/main.js is of 'text/babel' type for browser it won't be given to JavaScript engine to parse/execute. Rightly so, because the 'main.js' might have ES6 code which browser won't understand as it now. Once babel's browser.min.js loads and executes, it searches for script tag in DOM with type 'text/babel' and then issue XHR request to load that file. After that browser.min.js compiles the code in 'main.js' transform it into ES5 and then executes it. This is the way it works.
Since browser already has 'js/main.js' in its cache from earlier request, the XHR request issued by babel's browser.min.js for 'js/main.js' is served from the cache itself, so there won't be any additional external http request.
I have a index.html page where I download some common js/css. On one page page, when navigated through ui-router , I want to download page specyfic scripts, for instance libraries that are required for this page. This markup is included in XHR HTML returned when I navigate to a view:
<link href="/css/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" title="prettyPhoto main stylesheet"/>
<script type="text/javascript" src="/js/fade.js"></script>
<script type="text/javascript" src="/js/jquery.prettyPhoto.js"></script>
CSS gets downloaded but I see no JavaScript request on the network tab. How can I fix it / what is the proper way to handling this situation?