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.
Related
I load an HTML file into a WKWebView on Xamarin.iOS using webView.LoadHtmlString(). This HTML file references a CSS file and a JS file, for example:
<html>
<head>
<link rel="stylesheet" href="https://example.com/styles.css"/>
</head>
<body>
<script src="https://example.com/script.js"></script>
</body>
</html>
I want to intercept these requests in my code so I can inspect the details of the request, and reroute them to a local cache. I use a subclass of WKNavigationDelegate, with an overridden DecidePolicy() method to intercept requests.
The problem is that DecidePolicy() does not get called for these two requests (for the CSS and JS files). DecidePolicy() only gets called when the user triggers a navigation action.
I have also tried using webViewConfiguration.SetUrlSchemeHandler() with an implementation of IWKUrlSchemeHandler, and replacing instances of "https://" with "customscheme://" in my HTML file, but the method StartUrlSchemeTask() does not get called.
How can I intercept requests for linked resources in an HTML file?
Thanks
Try the following steps
Register custom scheme with WKWebView .
Convert file scheme to the custom scheme .
Use LoadRequest instead of LoadHtmlString .
Implement 2 methods of WKURLSchemeHandler protocol and handle 3 delegate methods of WKURLSchemeTask.
Refer to
https://stackoverflow.com/a/21959563/8187800
How to intercept a WKWebView request to detect which local resource files (css, js, png, ...) load together with a HTML file?.
Basically the heading. I have a strapi app at localhost:1337 which I will fetch in React. I'm not very sure how localhost works, and therefore I want to know if the path will still be relevant when I deploy the react app.
When you deploy your react.js app on any server your url named http://localhost:1337/Dashboard
will be changed. In it http://localhost:1337/ is the base url or domain name. Which will change the server to the new one.
your code will maintain same value for that API and you will have to re-build your code each time you change your API, (most of people use low cost hosting provider which allow only port 80 to be used) my advice is to move your endpoit (backend url) outside your code in a json, .env file ... but what will work on most of platform is a variable defined in your public/index.html (not a best pratice but it will work) ex:
<html>
<head>
<!-- you will add this tag here it will contain your backend url -->
<script>
var bakendUrl = "http://....";
</script>
<!-- some other code here -->
</head>
<body>
<div id="root"></div>
</body>
</html>
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
Within a new SailsJs application I'm trying to serve an angular app from the assets folder. Considering assets/admin/index.html I can access localhost:1337/admin, however, none of the additional js files or sub-directories can be accessed. I've even checked the .tmp/public folder and everything is copying over correctly but when I try to refer to any file within the admin folder other than index.html it can not be found.
Referring to angular module in index.html
<!--Sailes IO Library-->
<script src="/js/dependencies/sails.io.js"></script>
<!--Vendor Scripts-->
<script src="/js/angular-animate.js"></script>
<script src="/js/angular-aria.js"></script>
<script src="/js/angular-material.js"></script>
<script src="/js/angular-messages.js"></script>
<script src="/js/angular.js"></script>
<script src="/js/release/angular-ui-router.js"></script>
<!--Admin Application Definition-->
<script src="/admin/app.js"></script>
<script src="/admin/config/router.js"></script>
However, app.js is not being served!
Can I not do it this way? How can I access my angular application files from the admin folder?
To load an angular application in sails.js you need to serve the index.html file from the views folder.
so in you config/routes.js
'/': {
view: 'homepage'
}
this means when you hit the root of you application then homepage.ejs from the views folder is served
copy the contents of assest/admin/index.html file in homepage.ejs and if necessary check that all the link and script tags have the file path relative to assets folder.
once the homepage is served you can use angular ui router for routing purpose
Note--
change your
localhost:1337/admin to
localhost:1337
After reading the documentation a little more in-depth, sails will also serve index.html files found in the assets folder. So I created a new folder, inside that folder I created a new index.html and app.js file, and then lifted. My index.html file was then available at a url that matched my folder name. My folder was called "admin" so navigating to localhost:1337/admin loaded my index.html page.
As far as serving the other dependencies, I used grunt-bower and a new grunt task to start serving my bower_components over to my assets/vendor folder.
I have developed Drupal site . But when I access my site using HTTPS:// browser gives me a message "This page has insecure content" . I have putted my site data on secure site .
I load JS file in that page for some purpose.
So,Is it JS file issue?
I don't think it should be JS or CSS issue, unless you include them using absolute URLs:
For example if you add the following lines in your theme's template file:
<link rel="stylesheet" type="text/css" href="http://yoursite/mystyle.css">
<script src="http://yoursite/myScript.js"></script>
This serves the JavaScript through http instead of https. Instead you should use:
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="myScript.js"></script>
notice that the URLs in the second piece of code contains relative URL, and would serve the files with the same protocol with which the site is accessed via a browser.
If this is not the case, you have to scan through all the links on the page, and find the links which are start with the format http://... instead of https://.... This problem arises when a browser finds that not all content of the page is being served using encryption.
Hope that makes sense. Please feel free to ask further queries.
Indeed, you might have some assets (css or javascript) loaded from "non secure" source (using http protocol instead of https).