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 :)
Related
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 not familiar with it, can you clarify it? I don't want to create a SPA website.
Can I use Angularjs for non-spa website?
AngularJS has been created for Single Page App (SPA) website. But this doesn't restricts one from creating non-SPA website or application. If one has incorporated routing in their application, then it makes a SPA application. I have worked on various applications with AngularJS as the scripting framework, some were SPA and some were non-SPA. It's actually to the developers or the application to decide to go with SPA or not.
AngularJS was cleverly built by some guys at Google and is open source. It is absolutely not directly a SPA. Over the years I have heard some people make wild statements like "Well, if you don't use Angular for its SPA features, then you might as well just use KnockoutJS!"
Nothing could be further from the truth on that as there are so many examples to pull from to defeat that argument!
You can use it without a database or file system and stub things out for testing, but you certainly want to consider your goals.
Build a Menu System with Angular - you can have a complete database driven menu system without any SPA.. so no routing with ng-route etc...
Plenty of people start out NOT doing a SPA as you just added an extra layer of complexity in understanding how Angular works. So much power and things to build without the single page application.
Baby Steps!
I want to build a mid-size application using NodeJS and NW.js (formerly known as node-webkit). The application will grab some data from the internet but isn't talking with one special service which is under my control.
Is it a good idea to use AngularJS nevertheless or is the MVC approach of Angular oversized if there isn't neither a database nor a webservice on the controller layer?
I think Angular would be really fine for databinding and GUI handling, but I'm not sure if it's the right approach for this kind of application.
I see no reason not to use Angular in an nwjs project. I do it myself in the app I just finished building. It's a local-only deck tracking app for hearthstone that never communicates over the internet at runtime. It only ever monitors a log file that is generated by the Hearthstone game. Since the way I'm display information to the user is still technically a web page with a full DOM, Angular makes perfect sense since I'm already comfortable using it.
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.
I need to add new features to an already existing application. The application is built using Lithium and jQuery. The features that needs to be included have a complex view which allow users to analyze data and perform CRUD functionality. I won't go into details about the features here, but after working on a few simple Angular tutorials and side projects, I know that using AngularJS to create this view will make my life a lot more easier than creating the view using jQuery.
Over the course of the next few months we may convert the entire app to AngularJS.
I am uncertain about where I should place the Angular files and how to setup routing. How can I integrate AngularJS to Lithium so that part of the Lithium routing works and part of it is handled by AngularJS.
I also found this answer on stackoverflow but it doesn't mention folder structures or how to integrate Angular with Lithium. I think this link mentioned in the answers is supposed to have what I am looking for but it doesn't seem to exist anymore.
The link is down, but you can clone the source repository and run it yourself here: https://github.com/nateabele/li3-angular-presentation
Regarding organization, the simplest way would be to place the directory structure for your Angular components inside of /webroot. The more advanced (and in my opinion better) way would be to make them two separate applications: an AngularJS UI app, and a backend API in Li3 that it talks to.