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!
Related
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
I'm a project manager of a market place and I'm trying to find solution for my concerns. For two years a ago we decided to develop market place.
In front layer we decide to use angularjs and our team professional implement front layer using AngularJS. We add dependency injection for first time to angularjs 1.3 and solve google analytic crawling in SPA website.
But when google announce On July 1, 2018 AngularJS entered a 3 year Long Term Support period. As a project manager I have a big concern because We living in 2019 and after two years whats happen for our website ?
But my biggest question is how optimistic how long can we use Angularjs?
how much migration is necessary for this framework and
Is it possible that the sites written with Angularjs are not able to work after 2021?
Google announced:
All AngularJS applications that work now, will continue to work in the future. All published versions of AngularJS, on npm, bower, CDNs, etc will continue to be available.
For more information, see
Angular Blog - Stable AngularJS and Long Term Support
AngularJS Version Support Status
It’s out of date now, and new projects should absolutely not be built using it. This isn’t to say it was ever a particularly great choice. AngularJS came out of nowhere and became popular by default, rather than because it had particularly great design. It has a difficulty curve better suited to a great roller coaster than a decent framework, and a bunch of weird architectural and terminology choices. What the hell is a $scope, anyway? And what is a directive? What does transclusion actually mean? Meaningless terms that AngularJS has created. AngularJS does some things that are fundamentally wrong, such as creating invalid attributes on HTML markup. Even Google doesn’t use Angular for their own apps, like Gmail, and there’s a reason for that.
In fairness, AngularJS was always a poor choice. Its idiosyncratic code means that unlike other frameworks, it’s not good at implementing an agnostic, javascript solution. AngularJS code looks unfamiliar to anyone not super experienced with the weird intricacies of AngularJS itself.
Thankfully, this decision is well made for you – AngularJS is now quite thoroughly dead, and only legacy projects will continue to be using it. We should be grateful for what AngularJS has given us, and respect the position it held, but we should be just as pleased that it’s gone.1
The change is only about "support" and it means, no more bug fixes and no more improvements. Other than that, everything will be the same. Although, you should consider some disaster scenarios after LTS.
I saw some posts about running AngularJS and Angular side by side and I think it can be a good solution for your problem. Since you have enough time to migrate, your team can develop new features on Angular and you can also maintain your current AngularJS. Eventually you can get rid of AngularJS depending on your project size and development capacity.
Please check these scenarios.
Running AngularJS 1.6 in Angular 5 (side by side)
Running Angular and AngularJS frameworks side by side
For Angularjs support, you can find the previous discussion on this portal: angularjs 1.x support lifecycle and end-of-life
And the question regarding migration, in my personal opinion migration is a better option as the latest Angular version provides Boost in performance, Mobile-driven approach, code Maintainability & optimization, and most importantly Reduced development time and costs with better support.
And if asked about the migration approach, I would suggest a complete re-write that can be the most cost-effective strategy. If you’re a manager, put your team through Angular training (live, online, videos, books). Allocate time and budget for getting your developers up to speed with Angular as the learning curve is steep and prior experience with AngularJS is not overly helpful. Then your developers will write the new version of the app as per best practices recommended for Angular/TypeScript projects.
And finally, it’ll definitely pay off in the end. And, secondly, the newer versions of Angular won’t let you systems become outdated or irrelevant.
There is a team called XLTS.dev who are providing extended support for AngularJS beyond December 2021.
We have used Angular JS extensively in our company for enterprise projects, mobile applications and continue to use it. Google's decision to stop development of AngularJS and put it on a EOL will definitely make developers to panic. But 3 years to migrate away from it is a long time and you can plan accordingly.
If your plan is to migrate to Angular, then you can follow their official guide to upgrade using ngUpgrade. You can find numerous articles online that explain how they upgraded existing AngularJS apps to Angular.
If your plan is to consider migrating to a totally new framework, then this will involve some work. You should take a look Web Components spec. Your existing directives/components can be re-written, with less effort, as web components (shadow DOM) or custom components (without shadow DOM). There are libraries that help you write these generic components - supported on most browsers today - Stencil JS, lit element and a few others.
The advantage of using Stencil JS is that it provides tools to compile your web components to target different frameworks (Angular, React, Vue, Ember).
The latter solution seems feasible as it allows you to migrate directives one by one over a period of time, without having to re-write the whole application in one go. In the future you can also re-use your components in the framework of your choice.
As for your question about will it continue to work after 2021 - yes it will continue to work. The problems you might face might not really be of technical nature, but related to hiring resources to work on it or maintain it.
I am AngularJS developer and I do continue to use this framework for some of my projects. I am aware that in not too distant future this library will be completely outdated (as some of you can say it's the case now), however:
AngularJS ecosystem gives you still lots of choice/support (as framework is very mature)
my main libraries as ag-grid, highChart or others, help to build great apps out of the box with little time
I still do enjoy to work with this framework for it's simplicity and flexibility
If you should build brand new app I would recommend React or Vue (or other framework) especially if you do not have significant experience with Angularjs. However if Angularjs is not new for you, you need to go fast - just use your experience and go for Angular.
Taking into account what you wrote:
My main concern is after 3 years of support. Whether after the 3 year end of support, Angularjs sites can continue to work without problems
Angularjs apps won't just stop to work like that, from one day to another.
As your project requires long-term maintenance, needs to be built from scratch and will take lots of effort - Angularjs ecosystem is then probably not the best choice for you (I do insist "for you").
I am trying to get better at coding and am trying to figure out exactly what front end stack I need. I have red a lot and about a lot of tools but it is too much and I don't know which ones work good together or not.
Currently my idea is to do a web app with the design principles of Material Design from google and use angular for the logic of the front end.
I have red about and used these tools: Angular.js, Material Design Lite, Angular-material, polymer, ionic, bootstrap, Materialize and other various material design frameworks.
I am playing with this demo that I wanted to try out Material Design Lite but went too further and ended up needing Polymer for some input drop-down components. Playing further more with MDL I found out that it is not sufficient as bootstrap as I am used to work and would like to have this in it, but don't get me wrong I like MDL.
ionic has some good features for the local server and easy set up of template app as well other nice things like export to ios,android app, push notifications, but I ended up deleting ionic.css cause it was interfering with MDL and Polymer
I am asking some more experienced web app developers to help me out with this stack dilemma. I would like to get this out of my mind so I can be free and develop more.
Also tools like GRUNT, BOWER and so on? which one is the best in my case?
note: if u got interested the back end would be cakePhP and Mysql and the data type is going to be JSON (angular will send json to php into DB).
It can be overwhelming trying to learn all the tools and using them at the same time. My advice is to just use the tools when you need to.
If your web app is simple you may not even need a framework like angular. If you want to play with material design, you can do that with the css classes that MD lite offers no matter if you use angular / polymer / or plain javascript. ( If you want to use Polymer you already have some material design styles included. )
Some people prefer starting with the most simple solution and keep adding more sophisticated tools gradually. Others prefer starting with a more complex solution that has integrated the best practices, and in that case using a "Starter kit" may be useful.
Regarding Grunt/gulp... etc. You could worry about that later when you need to have a "build system" to do tasks like compressing files, optimising images and other things that are important for publishing.
After years doing frontend development i realised that is not possible to master all the tools available ( and having a life outside code ). You eventually settle for some tools (everybody have different preferences) and the important experience comes with solving real problems.
i would recommend you to use angular-material for your project if :
you have good knowledge of angularjs or if you find it interesting to learn
you have gone through google design and you want to implement it in angularjs way
try implementing missing features or take online help
Angular-material team is working on adding more and more features as already build in directives and services. Check releases on github page & demo guide
( Drop downs are already there in latest version as menu)
Few points
Google has an awesome open source guide for design.
Angular-material is a framework that helps you implement and follow that design language and principles using angularjs.
Bootstrap is just a framework which gives implementation of css, js related to front end work. Look and feel will be entirely different from google design.
Ionic is again a completely different framework which provides implementation and guide for mobile app development.
You can read about diff in angular-material/bootstrap/ionic in my post here
Bower/Grunt
bower ( package manager) and grunt ( task runner) are tools which work in node environment.
if your development environment is nodejs you should use them to get work done quickly and efficiently.
Check there sites for more information.
cakePhp/mySql
If your backend runs on these and you have angularjs in frontend.
Angularjs can make restfull calls in JSON to your api and it would all work good.
I'm working on a project which has the luxury of using ECMA 6 on the latest browsers for a product that will be shipped in 1.5 years. So we thought why not use Web Components now that Angular 2 isn't available (which is going to be ECMA 6). And while we are at it, can we replace Angular altogether without having to go back to stone age?
How to replace Angular?
There's this site called youmightnotneedjquery.com which is basically about how modern browsers actually have most of the stuff that jQuery was traditionally used for. I'm interested to see something like that for Angular.
We mainly use four Angular features. What are my options for replacing them?
Angular Directives --> Web Components
Angular Modules --> ECMA 6 Modules (not exactly the same thing)
Angular Routes --> ???
Angular 2-way databinding --> ???
PS. We don't want to replace Angular with something similar like Backbone or Ember. We want to replace it with standard web technologies but if we have to use small tools to fill the gap, we'll consider it.
I've been researching in the past 3 weeks and turns out many people are thinking about an alternative after Angular took a drastic change path. Fortunately the upcomming W3C Web Components standard actually has all we need and it works right now with polyfills from the Polymer project. So to answer the question:
Angular Directives --> Web Components use the polyfill until all browsers support it.
Angular Modules --> ECMA 6 Modules part of the problem is solved with HTML imports. But you can also use Traceur until the browsers support it.
Angular Routes --> There's a component for that™ use <app-router>.
Angular 2-way databinding --> Polymer adds a "magic" layer on top of the plain standard web components. This includes many features including data-binding.
+Plus More
If you're wondering about the build process for concatenating files in order to reduce the number of HTTP requests, take a look at Addy Osmani's post about Vulcanize. Spoiler: you may not need it with the upcoming HTTP 2 optimizations.
Many Angular projects use Twitter Bootstrap for the layout. Polymer can do that plus it plays nicely with Google's Paper elements (totally optional but superbly awesome).
If you want to make yourself familiar with web components in general, here is a bunch of nice articles: http://webcomponents.org/articles/
And here is a wealth of web components: http://customelements.io/ I don't know if it's going to be a new NPM, but the list components is pretty impressive and growing.
It's relatively complicated to expose an API for an Angular component. People have come up with all sorts of methods from link function to emitting events. In Web Components, however, it's really easy to make your component interact with the world outside and indeed the API and events you expose aren't much different from standard HTML tags like <audio>.
Just like Angular, you can use Polymer with Dart as well.
Conclusion
Overall, I don't see any reason to use Angular except if:
You have a huge source code investment in angular and don't want to port everything to standard web. (Angular 2.0 will deprecate your code anyway, so you're stuck with Angular 1.*)
Your team is too lazy to learn a new technology (in that case web might not be the right platform for this attitude anyway).
Angular was good for what it was doing and had its own Hype cycle. Web components solve many of the issues Angular was trying to address. Probably Angular had a role as a proof of concept for the Web components. But now it's time to move on. Web is reinventing itself everyday and it's inevitable to moves someone's cheese.
I'm not saying that Polymer is the ultimate answer to everything. At best it's another Angular which will render useless in a couple of years, but now it's a good time to learn and use it. The W3C standards don't die easily though, and Polymer tends to be much closer to them.
There's an element for that™ is the new There's an app for that™
TLDR: seriously consider writing an almost Angular 2.0-compatable Angular 1.3 app before rolling your own framework
It seems as if you've identified that Angular does a lot of things the right way and that's why you're attempting to replicate it, so basically you're going to roll your own by combining a hodgepodge of libraries. Unless you have an enormous investment of Engineering hours, the framework you build will likely be:
Lightly documented
A cross-browser maintenance nightmare and (worst of all)
Difficult for new hires to learn
If there wasn't a framework out there that did what you want to do already, I think rolling your own makes sense, but by trying to recreate Angular you're:
Taking on a lot of Engineering work that has already been done by a dedicated team, that could have been spent on building product
Made it MUCH more difficult to onboard new employees because you have to:
Find candidates that are willing to use a home-grown framework instead of growing their skills at an open source framework they could use elsewhere
Train these employees to use your framework (and good luck unless your documentation is mature)
I know your question asks how to replace Angular, but I've seen too many companies go the route of rolling their own and paying for it down the road. Again, if your budget includes a ton of core resources to build out (and document, and maintain) the framework and you don't think there is any chance corners will get cut when push comes to shove later if timelines get tight, then rolling your own might make sense. However, I think you should seriously consider reading up on how to write Angular 1.3 apps so that they're easy to port to Angular 2.0 and go the Angular route. Just look at the size of the community you're missing out on:
http://www.airpair.com/js/javascript-framework-comparison
The owner of the DurandalJS project is now working at Google on AngularJS Next (v2?) in addition to keeping the current version of DurandalJS maintained. The two frameworks are converging.
http://blog.angularjs.org/2014/04/angular-and-durandal-converge.html
For a new mini-SPA project, which framework would be the best choice specifically with regard to the upgrade path?
I note that Rob Eisenberg has listed a number of tips to help existing DurandalJS users get ready for the next version, so it appears there will be an upgrade path available, but I'm wondering if the upgrade from AngularJS to the next generation framework would be simpler.
http://eisenbergeffect.bluespire.com/preparing-for-durandal-nextgen/
To be clear - I'm more concerned in making the right choice for the future (large SPA, split into multiple mini-SPAs) than for my current needs.
I'm not sure which one would be the best choice for now ... actually I'd say none of them is future save enough. Angular 2.0 is going to be definitely different from 1.0 and of course also from Durandal.
Nevertheless the framework itself maybe not that important. I think you should focus on separating code in reusable components. Whether it is a Angular Service/Factory/Provider or a clean Require Module in Durandal it actually doesn't matter. Getting it into the "NEW" Framework should be just a matter of adding the proper wrappers. As for 2-way-binding use the oberserver plugin to maintain clean POJOs.
The most important change from my perspective in NG2 will be the support of Lifecycle events, so even using those in Durandal now will be somehow supported in NG2. As for composition there for sure will be a way to simulate that easily in NG2 as well.
For current work the only two things important for the decision of the currently used Framework in my opinion are the use of RequireJS and Framework simplicity. Sure you can add it to Angular as well, there are several guides on that, but Durandal was built from ground up with RequireJS in mind. Especially in bigger projects this can save you a lot of headache from missing or wrong dependencies. As of the second argument -> porting Durandal to Angular is not that of a big deal because it's written in an easy and understandable way. Vice-versa may be a totally different story. Getting your custom Directives implemented as a combination of templating and ko-bindings can get pretty hard :)
So as a closing statement, if it's going to be a small project, but with the need for continuous support as well as update to NG2 in future, I'd go with Durandal. Besides RequireJS everything is exchangeable and adaptable. In the case of Angular I'm not sure how drastically the new DI system will change the way of development so that would be a show-stopper for me.
Btw. here is the design-document for NG2. So as you see there kinda everything that is important is gonna change:
Router
Persistance
Directives
Modularization (maybe we finally see RequireJS :) )