I am trying to migrate my angularjs(1.6) to angular 5. As of now I am focusing over migration of one page and want to go for both frameworks angular js and angular 5 running in same application.
I have gone through various links and found some approaches like going for incremental migration i.e. from angular js to angular 2 then angular 4 later angular 5 ; Modifying the scope syntaxes etc
My query is that should I modify the above scope related syntaxes in my current angular js application or I should create a new angular 2 /5 project and then move my js application code to newly created angular 2/5 app.My application is huge one. Also, I want to use ngUpgrade. Not sure where to use. Pls verify the approach and help in this migration
'create a new angular 2 /5 project and then move your js application code to newly created angular 2/5 app' is better in my opinion
there are some huge architecture differences between Angularjs and angular2+.
angular.js is a classic MV* architecture framework, you may write code in controllers, services, splitting these files into different folders like a MVC structure.
while angular2+ is a component based framework.you can write app in component based pattern.just like react or vue .although you still can write it as a MVC structure.but remember why you want to refactor your project.
Related
I have read Angular's official document for upgrading from 1.x to version 5. But I unable to achieve ngUpgrade.
Can anybody help to resolve this issue or help me how to proceed?
Old Project is in AngularJS 1.6 and I am using ui-router for routing mechanism.
Below is the sample code for the of the controller,
heroController:
myApp.controller("heroController", ["$scope", function ($scope) {
// Controller Code
}]);
index.cshtml code:
<body ng-app="myApp">
<div ui-view></div>
</body>
I have a wrapper of MVC for existing application. Now I want to migrate to newer version of Angular(Version 5 and upcoming versions).
Since the existing application have a lot of controllers, directives, services factories, thus I want to first ngUpgrade thereafter I will start migrating component wise.
NOTE:
I am not using any build tools to bundle js files, I am using MVC's bundle.
Two ways you can do,
(i) Best way is to rewrite the application.
(ii)Or migrate each module wise. You can read on How to migrate from the following blog.
https://vsavkin.com/migrating-angular-1-applications-to-angular-2-in-5-simple-steps-40621800a25b
Faced the same request, from a client, some time ago. After searching the internet for a quick fix for this found this guide. It has multiple steps, takes it one at a time. It is a lengthy process, but at least each step is described:
https://angular-2-training-book.rangle.io/handout/migrate/
Hope it helps
P.S. ngUpgrade needs this first: replace the ng-app directive with angular.bootstrap.
AngularJs and Angular are diffrent, in the sense that all Angular is a complete rewrite of AngularJs.
In other word AngularJs are all version of Angular 1 While Angular is version 2 upword.
I've been working on a personal project for many years. This isn't for work and there is no money to be made. So I take my time doing the development on the project, and that means I'm still using AngularJS as my front-end UI library.
AngularJS is my "component" library where all the directives, components and services are there to "bootstrap" existing HTML from the web server. The back-end is handled with CakePHP which renders all the HTML.
There is no massive single-page app and there is no AngularJS routing. I load my UI library on each page request, and that's how I'd like to keep doing it.
I spend my day job working with Angular 5. I'm very good at it and I'm the go to guy when other developers have Angular questions.
Despite these skills I've been unable to figure out a migration path for my UI library from AngularJS to the latest Angular. Angular 2+ has been out for a couple of years and I'm still stuck with AngularJS.
Here is an example of my problem:
Take a look at the Material Angular project built with Angular 4. It's basically the same kind of library as my own UI library. It contains a collection of directives and components that you can use.
If you have a web server that responds with existing HTML and you want to use Material Angular as your UI library, then you can't. Let's take the autocomplete component as an example.
The documentation explains how to use autocomplete:
https://material.angular.io/components/autocomplete/overview
There is also a working example of the component:
https://stackblitz.com/angular/ggmpnaqqqxk
In the documentation it shows that you can use the component like this:
<mat-autocomplete>
<mat-option *ngFor="let option of options" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
But when you look at the working example you see the problem that I have. In their example, they have to bootstrap an entire Angular application container that is used to inject the Application HTML which has the autocomplete example.
They can't just use the <mat-autocomplete> component in an existing HTML page.
Now let's take a look at the exact same component done in AngularJS for the old Material Angular project.
It too has a component for autocomplete named <md-autocomplete> and the old version has basically the same features.
There is even a working example:
https://codepen.io/anon/pen/goLrpJ
It too bootstraps an AngularJS application, but it leaves the existing HTML intact. That allows you to use <md-autocomplete> directly in your existing HTML.
How do I create an Angular 5 application that can be used as a component library with existing HTML?
Angular Elements are supposed to address this problem in near future. As explained in detail in this write-up, they are able to provide self-bootstrapping, standalone custom elements.
Currently the issues remain unsolved that restrict the use of attributes and projected content on root component, this seriously narrows down the use of Angular components as custom elements in real-world scenarios.
I would like to create a Single Page Web App with Angular but I couldn't decide to project type.
(Just generated files by tools like angular-cli or that generated files inside an Asp.Net Core Project)
I got some question.
What are the advantages and disadvantages of building angular app on ASP.NET Core Project?
Which cases I should prefer to locate angular app inside a ASP.NET Core Project?
I'd like to take a stab at this. I'll agree that the answer is on some part opinion based though.
I have just been comparing the two versions for a new project that I am involved in.
First some facts
The Angular project created inside of the ASP.Net core application is in no way dependant on the .Net code. You can navigate to the directory and type ng serve and run it by itself.
You can copy the angular code to another directory or repo and host it by itself if you for some reason later on decide that you don't want to combine it. All you have to do is copy paste the angular code, and then remove some lines in startup.cs regarding the internal hosting.
The code that gets added inside of the asp net core template is close to the base angular app with a few examples added on.
If you use the login functionality template it implements an oidc client, and an identity server on the back end, (opinion) pretty much the same way I would have done it myself. There is nothing stopping you from rewriting it if you don't like it. At worst it's a good example of how it can be done.
As of today the template is using Angular 8.0.0, you can just change the package.json to get the latest version and run npm install. It works great.
You can still use Visual Studio Code for the Angular parts with a combined project.
Here are when Id choose the different versions (warning opinions ahead).
When to choose the asp.net core angular project.
Small web app with limited functionality.
Small team, probably same person writing angular code as api code.
If you are unsure. You can always split later.
When to choose separate apps.
Big team with deployment builds and automation.
If you want to host angular and asp.net core separately (for reasons such as to achieve maximum performance and load balancing in apps with thousands of visitors).
Separate people coding angular and asp.net
You don't like having it all in same repo and want to split it up.
In a bigger teams and contexts with multiple APIs you will probably have to deal with CORS anyways, but if not you will have to at least think about it for this to work.
If you are unsure, you can always combine it to one app later.
I am working on an app written in Angular 2, and we have many views that are written in Angular 1 from another application that we would like to use in our Angular 2 app with some minor changes. Is this possible? I've looked into this a little bit and read some tutorials but they all seem based on upgrading an Angular 1 project to Angular 2, not using Angular 1 in an existing Angular 2 project. Would I need to rewrite my app.module.ts and my route file in Angular 1 in order to achieve this and if so are there any other file I would need to rewrite?
Yes, you can. Basic Angular Directives such as ng-click are not changed, but the behavior of Two-ways data binding is changed. But you can be able to migrate with some minor changes in you view.
Somehow, you will be face some amount of refactoring from your Angular 1 JavaScript to Angular2 TypeScript and for that you will need to rewrite some of your codes like routes when you migrate your app.
But there's a lot of references for migration. Check it out the following link.
https://www.codementor.io/angularjs/tutorial/migrating-from-angular-1-to-angular-2
Regards.
I have an existing project (JS/jQuery and PHP for the backend) running. It's quite huge and still in development.
I'm now looking to introduce Angular 2 in this project in order to progressively clean up the front end and start from good bases. New modules will be created using Angular 2 and existing modules will progressively be converted.
The app is running on a single page using ajax to load data from the API. And my entry point is the index.php which I cannot discard because it integrate all the loading logic of the project.
Therefore, can I introduce Angular 2 in this project and if "yes" how can I process?
Any suggestions and examples are welcome.
This is the way how I converted my existing ASP.NET MVC 5 application to Angular2. Use the same configuration files and convert your php application.
Using Angular 2 with TypeScript