Is it possible to use an entire Angular2 app as a plugin within HawtIO? Our reasoning for doing this is so that as we develop our OSGi applications, each having their own UI, we can use HawtIO as the overall container and can detect and display each UI webapp within.
From what I have investigated so far, it looks like the only possibility is either adding simple plugins which add static links to our individual web apps, or re-write the Angular2 app as a AngularJS one instead?
The hawtio-core component from hawtio 2.x supports bootstrapping a hybrid angular 1/2 app which is pretty much what you're looking for:
https://github.com/hawtio/hawtio-core
It's been awhile but I played around with it in this branch from the fabric8-console project, it may need some adjusting to be inline with new angular2 developments:
https://github.com/fabric8io/fabric8-console/tree/angular2/plugins/angular2/ts
Related
We have huge enterprise application written in angularjs.
Now we have to migrate to angular, so we have ruled out an option of hybrid approach angular suggests using "ngUpgrade".
So now we are creating a new application in angular, which means we have 2 applications "angularjs(old)" and angular(new).
So to switch between these two applications can be done without refresh using angular-spa.
I was trying to find if there is another framework, where navigating between two apps happens without refreshing(without refreshing entire page by navigating to new html).
Possible solution:
Use a new Angular application as a wrapper, then just use iframe to show the application you want depends on the context - old or new. The issue you might face is changing the iframe, but I guess you can use postMessage to communicate between the apps.
A bit more sophisticated:
Use Angular Elements to create your hybrid app.
I really recommend you to watch Erin talks from the last Angular connect about how Google made the migration from js to Angular.
I've recently tried the micro-frontend architecture described here:
https://www.martinfowler.com/articles/micro-frontends.html
Each app on different code repository, runtime build and quite easy to implement. Take a look :)
I am new to AngularJS and need some advice on how to structure a SPA with Web API for an external search application
Di I have to use
•MVC / razor views (leave all routing and rendering to Angular)? or just use 1 VS2015 app [use angularjs SPA template for VS2015 or just an empty web application with angular file and a webapi project under same solution?
any examples would be helpful to understand
For angular structure I am reading Google best practice and John Papa
Well, I think what you ran into now. I can suggest two of the ways you can choose.
If you want to keep your backend and frontend together you can go for angularjs SPA template for VS2015. It would come with the build pipelines, bundles and everything you'd need. Now you can choose to render your single page of angular to be rendered with a MVC razor view (if you want to have any mechanisms where you'd want to include your dependencies through the razor view) or just go with a blank html and web api controllers on the back. But you'd end up using one environment for all and I think that's best if you're building the full project.
Now, for the other way around, you can start with an web api project. You can instantiate your angular project with it or somewhere else. You can use yeoman or any scaffolding tool you like and use your own JS toolings you'd like to use. You can do the same in the VS project too but this approach is better if you want to keep the frontend and backend flavor separate.
And I'd suggest using typescript too.
I'm currently learning Angular JS and plan on creating a website using RESTFul to communicate with the server (which will be in Node.js).
I would like to know how to proceed to "convert" this website into a mobile app.
I saw tools like Apache Cordova but I have no mobile developing experience so I don't really know how all of this works.
I saw other tools like Ionic and ngCordova (created by Ionic) but I don't get the point, Angular is just a JS script to insert in my HTML page right ?
So why would I need something like Ionic ? Isn't Apache Cordova enough ?
Ionic is a webframework that makes use of apache cordova in the back.
Cordova is used for mobile app programming in javascript and will compile your javascript code to native code for android, iOS, ...
AngularJS is used for making development of Single Page Web Applications more delightful by offering many nice code features for programming MVC apps.
Ionic now at the end, puts it all together by offering you user interface components that will look native on all mobile devices + the browser. And on top offers you angular js modules that make working with webapps easier (e.g. navigationHistory ...)
If you start new and want to create a nifty mobile application, I would start with ionic. It comes with a lot of css or sass that makes it feel / look native and of course you can change everything to your needs. To access phone features (e.g. location, camera ...) cordova steps in. I suggest doing this guide, that will take you through your first ionic app.
With the end of the development plugin, the fun has gone out of GWT development. Every small change triggers endless recompilation and then I'm still debugging half Java half Javascript in the browser.
I'm thinking about migrating to AngularJS. Any hints on how to approach this?
Should I first switch my RPC Servlets to webservices returning JSON?
I'm also using GXT grids. How to best replace these?
Are you using Super Dev mode? This makes development a lot better as you use the browser dev tools to debug and it makes use of source maps. In my opinion, it has made GWT relevant again.
Do your backend first by converting your RPC servlets to an equivalent REST interface. Then you can use any front-end MVC framework - Angular, native mobile, or whatever.
For GXT grids, AngularUI has a grid component. http://ui-grid.info/. You could also use ExtJS grids.
I'm beginner to appgyver steroids.
I have angular project. Now I need to make iOS application using AppGyver.
Instead of modify root view and point it to my angular app url (http://www.yourapp.com) can I add my angular app source / angular project build to AppGyver project make it iOS application.
Appreciate your comments
Gayan
You can run steroids create yourApp. This will walk you through the generation of a multi page or single page application. You can then move the structure of your angular application into the /app folder. Check out the example that the steroids create method generates and see the structure there.
You may notice some differences at first. It may take some testing to see what is failing if anything once you port things over. If you used $rootScope for anything it is not as reliable in my experience in an iOS or Android application. There are other methods for passing data between views and broadcasting (publish/subscribe) to other controllers.
You will want to use the iOS simulator or http://localhost:4567/app/moduleName/oneOfYourViewsYouAreTesting.html in your favorite browser while steroids connect is running to debug.
The version of Angular that is coming with this now is AngularJS v1.3.15 installed via bower. You may want to verify things are compatible with your current Angular version.
Ionic is used and Supersonic so you may see conflict with existing CSS or even javascript depending on what you've implemented.
There will be some tricks to learn about preloading views in the structure.coffee file and load times / rootView / initialView. There is lots of support if you come across any issues.
This forum has been really helpful in figuring out any issues I've come across. The Appgyver team is usually pretty responsive to questions directly as well.
They are updating the platform in a few days, and they say big changes are coming. They are hiring a lot of developers right now to take care of GitHub issues as well as build out the rest of their incomplete components.