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
Related
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.
Say that an app needs to be created using AngularJS with Cordova in Visual Studio, do I require anything else besides the Google CDN to use AngularJS?
<!doctype html>
<html ng-app>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>
</body>
</html>
I notice that npm is usually used to install AngularJS, though if just a simple app needs to be created, could this be sufficient.
Code from: https://docs.angularjs.org/misc/downloading
That's all you need. I find installing angular locally is great for development, since I use developer tools to disable caching and I don't want to ping the CDN everytime I update a view, but for quick projects the CDN is fine.
I am currently trying to get AngularJS working with Node, but for some reason as soon as I move the script to a separate file, I get the error "[Error: Injector Modulerr] Failed to instantiate module due to[...]".
I have done this 50 times before and have no idea why I am facing the problem now.
In my RESTful Node API I have 2 "wild card"-routes; '/' and '/admin'.
When I am rendering a index.html in my '/'-route Angular is working fine, but when I am trying to do the same within my '/admin' I seem to get the error mentioned above.
<!-- jQuery 3.1.1 -->
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<!-- AngularJS 1.5.8 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<!-- App -->
<script>
var app = angular.module('rs-admin', [])
</script>
I am new in Ionic app development. I installed angular google maps using bower
bower install angularjs-google-maps
then added these ref files in index.html
<script src="lib/lodash/dist/lodash.js"></script>
<!-- ionic/angularjs js -->
<script src="cordova.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular-simple-logger/dist/angular-simple-logger.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB52Z0xUP6JEX9fjr1EEQvCWgo8W4DD5CY&extension=.js"></script>
<script src="lib/angularjs-google-maps/dist/angularjs-google-maps.js"></script>
Finally added the gm module as a dependency to your AngularJS app:
angular.module('taskerApp', ['ionic', 'taskerApp.controllers', 'taskerApp.services', 'pickadate', 'gm'])
It is showing a blank screen and giving this error in console.
angularjs-google-maps.js:40 Uncaught Error: Google Maps API not available, please make sure the Google Maps library is loaded before the AngularJS Google Maps library is loaded
Please help me resolve this.
As per the docs:
Make sure to load the AngularJS library and the Google Maps API:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
Then load the AngularJS Google Maps library:
<script src="bower/angularjs-google-maps/dist/angularjs-google-maps.js"></script>
Finally add the gm module as a dependency to your AngularJS app:
angular.module('yourApp', ['gm']);
That's it! You can now start adding Google Maps directives to your
markup.
My guess is you don’t include the files in the right order.
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.