I have Hawtio web console for Karaf (or JBoss Fuse) homepage and I also have an AngularJS app as a plugin in the Hawtio. Is it possible to change the version of AngularJS library built-in (or packaged) in Hawtio? I need a more recent functionality (ng-repeat-start-end) of AngularJS which does not work when deployed as a Hawtio plugin.
hawtio is kinda stuck on 1.1.5 at the moment as we've a patch that enables the dashboard functionality. However you can easily implement the same functionality via ng-include and a template:
<script type="text/ng-template" id="myTemplate.html">
<div>
<header>{{item.foo}}</header>
<footer>{{item.bar}}</footer>
</div>
</script>
<div ng-repeat="item in items" ng-include="'myTemplate.html'"></div>
Note the ' in the ng-include directive config, otherwise you hit ng-include not working with script type="text/ng-template"
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 am new to angularjs, wanted to try out a simple program.
How to execute angular js on local system? What all setup I will need?
You'll need to download angularjs from https://angularjs.org/ if you want it to work offline whilst developing, otherwise you can use a CDN (Content Delivery Network) and place a link to angular in the script's 'src' attribute value.
CDN link for Angular 2 using https://cdnjs.com/: https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.min.js
Place the downloaded angular.js file into your project folder and reference it from your html file.
You're then good to go.
There is no special requirements to run angular js. You could reference Angualarjs by file angular.min.js or cdn in html. A simple code from W3CShool.
<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
I am building a wordpress site with a page that is an angular app. It was working until recently (and I can't recall which change broke it), but now the app does not load when I arrive at the page via a link (angular is loaded and the code snippet below processed, but nothing is logged), but it does work if I then refresh the page.
I've backed out all the real code to leave:
angular.module("af2015App", [])
.controller("TestCtrl", function() {
console.log("test test");
});
And commented out everything in the HTML except
<div ng-app="af2015App" class="app">
<p ng-controller="TestCtrl">Use the ...!</p>
</div>
I'm at a loss as to how to debug these circumstances. I'm not loading pages via AJAX.
Thanks for your ideas everyone. I had another go at debugging and discovered that, even after turning off the script tag with angular, angular was still present. That gave me the idea to look at Batarang and, after deactivating that, all is working again. Perhaps this answer will help someone someday. Needless to say I don't know what the underlying problem was.
take a look at this plunker
working plunker
they only thing I can think of when looking at your code is that you are not closing your div tag
altough that is probably just an edit mistake
otherwise move your ng-app definition to your html tag
<html ng-app="af2015App">
<head>
//make sure your scripts are loaded correctly
<script src="path/to/angular.js"></script>
<script src="path/to/app.js"></script>
<script src="path/to/controller.js"></script>
</head>
<div class="app">
<p ng-controller="TestCtrl">Use the ...!</p>
</div>
</html>
I was getting myself started with Angular JS.
I tried to put angular code in my html page and then I tried to open up browser but Angular JS didn't worked.
But when I requested the same page from server It did worked
A bit of mystry ...
as soon as angular need to load template code using a template url you have to serve the page via HTTP because angular can only load templates using HTTP.
one example would be :
<div>
<div ng-include="'templateA.htm'"></div>
<div ng-include="'templateB.htm'"></div>
</div>
Some directives of AngularJS use AJAX to load themselves and by default navigators like Chrome block AJAX request when they are local.
You can open your AngularJS app in any server e.g: http-server