Coexistence of Angular 4 and Angular JS 1x - angularjs

We are currently working with Angular JS 1.6. Our achitecture Layers as follows,
HTML Page,
Controller (MVC Controller),
Service (Holds $resource for service side API),
State (Holds states for a functionality)
* Functionality is collection of HTML pages.
We are planning to migrate to Angular 4.0. Exiting project which is in Angular JS 1.6 has huge number of pages that needs to be redesign. Is it possible to develop new pages in Angular 4.0 and reuse the existing pages which are present in Angular Js 1.6..?
Can both the version coexists in a same project...?
How to achieve that..?

There is a thing called ngUpgrade. Which basically doing what you are asking.
When you use ngUpgrade, what you're really doing is running both
AngularJS and Angular at the same time.
Here is a tutorial which explains how does it work and what are the crucial steps to use upgrade strategy.

Related

AngularJS component as a component in Angular 8

I have an AngularJS application(say x) which we were using as a directive in our other AngularJS applications before.
Now we are using Angular 8 for our new applications and we need to use the same AngularJS component(x).
Is there a way to do that without migrating the code of this component x to newer Angular version since the code of this component x is huge.
Someone told me to use micro frontend but i couldn't understand how to use that in this scenario.
Any thoughts/suggestions would be greatly appreciated!
One possible way is to transform your Angular 8 application in an hybrid application that can bootstrap each of the Angular and AngularJS parts. To do that your AngularJS app needs to be in 1.5
See this documentation to turn your app in an Hybrid app : https://angular.io/guide/upgrade
Then, you extract your AngularJS directive in a package that can be use in both applications and avoid duplicated code.
And maybe this old topic can help you :) : Use AngularJS directive in Angular Component

Approach and Methods for migrating AngularJS 1.4 app to Angular 8

I am trying to upgrade a large Enterprise application from AngularJS v1.4 to Angular 8 and trying to look for various approaches for the same.
Since we are on angularJS1.4, we cannnot use ngUpgrade Module provided by Angular team because in order to do so we need to first migrate AngularJS to version 1.6+ and controllers to components. (Hence, this approach is discarded).
A complete rewrite of the application in Angular 8.
I read about single spa where two frameworks can coexist together.
Using an iframe to load angularjs in angular app and then gradually re-write the new code in angular.
Create a completely different application in Angular, then from my AngularJS navigate to new Angular application as per route. Both the apps will run on different ports locally, but will run on same domain on server hence sharing the cookies and localstorage.
We are thinking of going with approach 5.
Which of the following approach should I go with or is there any other approach I can go?
Any other inputs will be appreciated.

angularjs angular hybrid application very slow

i am just using an angular component library called gridster in my large angularjs application. for that i made my app hybrid, as in future we are planning to upgrade our application to be on completely on angular. i am using 1.4.3 angularjs and 6.0 angular version.
after making my application it has become very slow.
Any suggestion please.
most of the module and directives is angularjs, i have followed standard approach of upgrade provided in angular documentation. downgraded angular gridster component.

Use Angular 2 pages in Angular 1

Currently we have application developed in Angular 1.X but we don't want to migrate from Angular 1.X to Angular 2, Since it is very wast application it will require more effort. We want other way around . Can we use Angular 2 features within Angular 1.X Application. In future whichever pages is created should be in Angular 2 but need to be worked side by side with Angular 1.X .. Like calling new route or new component from Angular 2 from Angular 1.X. Please let me know whether its possible or not.
Thanks
Kind of. What you are looking for is an Angular Hybrid app. Here's an article to help with what you are looking for.
Yes, it is possible.
You can use the new angular components/modules in a legacy angular application (downgrading) or you can use legacy components in the a new angular application (upgrading).
There is a section on the angular webpage describing all this. Direct link is here
https://angular.io/guide/upgrade#using-angular-components-from-angularjs-code

Angularjs without controller

Today I saw a tweet from Pawel Kozlowski that controllers will go away in Angularjs 2.0
Is there anyone know how would angularjs be without controllers? Currently I handle almost everything in controller, and I dont know when the next version released how much our code will change.
Yes.You're right.
What will not be in AngularJs 2.0?
Controllers
Directive Definition Object (DDO)
$scope
angular.module
JqLite
Angular 2.0 Core slides from ng-europe talk: Angular 2.0 Core
About Your question : Why do you need to go with AJS 2? If your app is giving what you need with AJS 1.X then why do you need to change it to AJS 2.B'cos AJS 1.X series will continue as it is in future also. So no need to worry about it. But if you'll start a new app then you can start it with AJS 2 (if it'll available at that time). That is my suggestion to you.
What Google says about the AJS 1.X :
If you are building web applications today, this is the version you
should use. This is the tried and true version that we really believe
in. With over 1600 apps at Google built with Angular 1.x, we are
committed to supporting it as the first class AngularJS version for a
long time to come.

Resources