I am currently working in AngularJS 1.2 application, it is a medium size application with 25 modules, now I want to upgrade to angular new version. I can't write freshly because it is an old project, I don't know older requirements of this project. Please any one suggest me the best way to achieve it.
Its not that easy to convert a angular-1 project to Angular-2+. You must need a fresh start, because both the framework is totally different. For project requirement/ business logic, you must understand the logic and the code and then write a fresh code in Angular-2+.
You may copy and paste any javascript code from angular-1 to angular-2+. It will work properly.
This page helped me a lot when I upgraded to angular: https://angular.io/guide/upgrade
A very good handbook for upgrading to angular is: https://angular.io/guide/ajs-quick-reference
A good solution would be to use ngUpgrade: run both AngularJS and Angular at the same time. All Angular code is running in the Angular framework, and AngularJS code in the AngularJS framework.
What happens on top of this is that components and services managed by one framework can interoperate with those from the other framework. This happens in three main areas: Dependency injection, the DOM, and change detection.
Some main things to take into consideration when upgrading:
- Get AngularJS and Angular components and services talking to each other during the upgrade
- Replacing controllers
- Replacing $scope and $watch
- convert directives to components
Related
To upgrade from angular 1.4 to Angular 5 is it possible to use ngupgrade and follow incremental approach or it is strictly applicable to use ngupgrade from version 1.5. According to the image the prerequisites mentioned 1.5 is used for ngUpgrade.
There is official upgrade guide:
https://angular.io/guide/upgrade or https://angular.io/guide/upgrade-performance
But as a person who have written a big AngularJS application and now is working on a big Angular project, I recommend to start a new fresh project and step-by-step write a complete new application in the newest Angular. By my experience, switching between both frameworks is really hard and time-consuming.
In Angular things work totally different (better) and the framework itself offers much more than AngularJS.
If you still want to go the upgrade way, do it in 2 steps:
Upgrade to 1.5 (because there must be a reason why it is required)
Upgrade to Angular
Take a look at this article: https://angular.io/guide/upgrade
And you can upgrade or downgrade services and components between two frameworks.
You should know that there are two ways to bootstrap a Hybrid App:
Using UpgradeModule - Bootstraps both the AngularJS (v1) and Angular (v6) frameworks in the Angular zone
Using DowngradeModule - Bootstraps AngularJS outside of the Angular zone and keeps the two change detection systems separate.
I have tried both ways. And I recommend using DowngradeModule - it's better for performance and memory leaks.
If you google angular hybrid you will find a lot of articles and examples on github
Certainly look at https://angular.io/guide/upgrade to start. It's been a while since I've looked at it and it appears to have significant updates, which is nice. The "Preparation" section still reminds me of the joke: "How to be a millionaire and not pay taxes? Step 1: Get a million dollars." One section of preparation is "Using a Module Loader" which tells you why, but you're still on your own to figure out how to go from, say, grunt to webpack. It's beyond the scope of that page, sure, but that feels like big amorphous step to sort out.
I did find a developer, Sam Julien, that put together a guided video "course" which takes an app and walks through converting it. It is at https://www.upgradingangularjs.com and is certainly more comprehensive than any blog post I've seen. I'm not affiliated but it has gotten me started on laying out some of what we need to change.
It's not a trivial undertaking but being able to see the stages laid out ahead of time has made it seem incrementally possible. (Luckily, we are pretty close to the angularjs style guide already, which is another preparation step.) Good luck!
I need to migrate an site from one framework to another because I need to use Angular JS.
I found zurb-foundation very interesting. It happens that it seems to use jQuery.
According to this website https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
When building out Angular projects, you should not add on the full jQuery library. jQlite is already included in Angular and this should be all the jQuery that is necessary.
I had a bad experience running Bootstrap and Angular together and I don't want to repeat the same mistake.
It happens that I found the following line at zurb-foundation index.html
<script src="js/vendor/jquery.js"></script>
A quick search has shown that it seems to be a "simplified" version of jQuery (am I wrong?).
I've seem many people questioning things related to Angular in Foundation apps.
My question is: Is Angular compatible with Foundation?
While you'll read in many places that you should stay away from jQuery when using Angular, you'll also notice a subtle "at first" here and there. Angular is quite opinionated, and employs a declarative way of doing things, whereas jQuery is imperative. Check this out for more on the topic.
To answer your question:
Scotch.io's tutorial about Angular and Bootstrap involves UI Bootstrap, a library of directives written in Angular to be able to integrate common Bootstrap functionalities easier.
The equivalent of UI Bootstrap for Foundation is Angular Foundation. I recommend giving this thread a look-over as well, as it contains information that may be relevant to your use case.
So yes, Angular is compatible with Foundation. Happy hacking :)
a quick answer is of course they are compitable with each other. check this out from Zurb. However if you do not want to use JQuery, then the easiest way is to use pineconellc for foundation 5. foundation 6 does not have a port yet as far as I know.
we are starting new project which uses angularjs as UI script.
I've gone through angular ui-router for https://github.com/angular-ui/ui-router.
UI-router module really great when compare to ngroute.
But I am afraid about the warning mentioned the ui-router's website homepage.
(Note: UI-Router is under active development. As such, while this library is well-tested, the API may change. Consider using it in production applications only if you're comfortable following a changelog and updating your usage accordingly.)
But i want to use this framework with angular.
Can anyone please suggest, will this cause any performance issue in future, much api will change, etc.
if the current version of angular-ui/ui-router works fine for you that is all you need.
will this cause any performance issue in future
why should it? since you are going to save your copy of the current version of angular-ui and it runs on client side you will never have problems (if you update angular-ui in 5 years of course you are going to have problems, if you never update it will ALWAYS work)
the note you quoted means that the current support of that library might change, so all you have to do(if they don't provide support for older versions) is to save a copy of those docs.
Is it possible to run AngularJS in a Durandal project? We are using Durandal now but want to move to AngularJS while still keep the site operational. Is it even a good idea to attempt this?
Any suggestion would be greatly appreciated.
You could run them side-by-side, but then you would just have two separate SPAs hosted on the same site. The doesn't seem like a good upgrade strategy to me. I think you would be better off to fully develop the new version and then replace the site altogether.
I would also advise that you wait for the release of AngularJS 2.0 (if possible). Rob Eisenberg has announced that he is currently working with the AngularJS team to provide core changes and plugins that will make Angular 2.0 more familiar to developers with Durandal experience, as well as to provide a migration path from Durandal to Angular 2.0.
The other answer isn't exactly correct. I have an example that proves it wrong.
Durandal is a module loader that can load any view / view model pair. If you choose to load an angular application and leave out the router portion it works just fine. It really isn't that difficult to get it set up.
Wrap your Angular.js application initialization code in an AMD module (view model) with a matching view and it just works.
I am considering using AngularJS instead of Handlebars with MeteorJS. I am more familiar with AngularJS, but it doesn't work well out-of-the-box with Meteor. Handlebars is default templating engine used in MeteorJS.
I would like to know the trade-off between the two, e.g., whether AngularJS provides more flexible front-end coding than Handlebars.
My question is: when pairing with Meteor, what AngularJS can do that Handlebars can not in terms of front-end programming?
(Note that people love AngularJS in part b/c of its two-way binding and data model, but Meteor-Handlebars do these very well too).
Update: Please do not vote to close this question if you think it is a duplicate of another question in SO that compares Angular and Handlebars. Meteor added significant power to Handlebars due to its "database on client" approach.
Angular and Meteor can be combined, and it's a pretty neat combo. Angular's templating system and its two-way bindings (DOM to JS model) can even be made to go the whole way and be kept in sync with a Meteor collection. Such a pairing of Angular and Meteor means you get instantaneous DOM to database syncing, which is very cool. Angular can't do that by itself, nor can Meteor (without writing more or less tedious event handlers) and even less Handlebars.
The angular-meteor Meteor package is pretty much ngMeteor's successor (it builds on ngMeteor code) and integrates Meteor collections with Angular models, the two templating systems, Meteor Session variables etc.
TL;DR: Meteor works best with packages (think jQuery, bootstrap, d3, underscore, stylus, less) since they enhance a framework. Those same packages would enhance Angular too (well, kind of). Angular is an end-to-end framework, so trying to integrate it on top of another end-to-end framework like Meteor is a recipe for headaches.
Handlebars has very similar expressions and bindings that you're probably familiar with in Angular. But while the templating engine is similar, it's the rest of the frameworks that differ greatly.
Angular leans heavily on its internal directives (ng-repeat, ng-form, ng-bind, etc.) to easily tie in javascript (i.e. power) to your markup. There's a lot of magic behind the scenes.
Meteor leans heavily on the pub/sub model and connecting to your true data stores. Their secret sauce comes from easily adding but abstracting packages (handlebars is one of their default packages, but some others are bootstrap, accounts-ui, d3, etc.).
Meteor follows very different ideologies and has different opinions on framework design than Angular does. In my opinion, Meteor's are superior though the project is still in its relative infancy. You'll find that Meteor is really, really good at prototyping quickly, especially if you need to tie in user support and want to use Twitter/Facebook/Google.
You'd be better off choosing one or the other, but if you're not strong on the server side, you could write a pretty slick Meteor app to just act as your API server.
If you want to use angularjs with meteor you can just install a package that does that. Then you can use both meteor and angular.
Meteor is realy nice for getting your data from server to client, angular is very nice in getting that data displayed (and stable).
mrt add angular-stack
or
mrt add ngMeteor
Generally speaking, AngularJS has passed the version 1.0 milestone and is considered ready for production use while meteor is still alpha software. Consequently, Angular is more polished, has directives, modules and rich third-party libraries like AngularUI.
But if you feel like experimenting with a bleeding-edge framework, don't think you'll have to do super-fancy templating-stuff but need a database built in, go with Meteor!
I think you might find this answer helpful.
Also I think it might be a duplicated question.