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.
Related
I created a small JavaScript file with some function I would like to be able to call them in an angular project, I searched for guides but they didn't help me.
You can use Angular Services, I assume you're using Angular 2+ so here's the guide for that:
https://angular.io/guide/architecture-services
In case you're still using AngularJS here's the guide for the old version:
https://docs.angularjs.org/guide/services
In both cases the concept is simple, you have your service(s) with the functionality you need across the app and you inject them where you need to use them.
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.
My earlier question was closed before I had the chance to add more clarity to it.
Might be a very basic question, but if I am using a particular version of a dependency, for example 1.x of dependency1, in my angular directive, and I package this directive to be used as a third party directive in an app that uses version 2.x of the same dependency1, how will the behavior be? I want to understand how shared directives work with multiple apps that might use a different version of a dependency that the directive is using.
I should probably make myself clear that I’m not asking about versions of angular. Let’s say I’m using bootstrap v3.3.7 in my directive whereas another app that uses my directive is using v3.1.1 of bootstrap. I want to understand how this would work and if there would be any conflicts.
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 am about the start working on a project which I want to avoid using Angular 2 as it's still not out there and this project will be finished way before Angular2 will be released.
One thing I really like in Angular 2 is it's: templateURL , where you can import html templates at runtime very easily and works great.
After googling I've found Webpack or Browserify but not sure how good they are for this specific functionality I'm looking for.
Are their any other javascript libraries or released frameworks that have this same functionality, if so, what are my options?
You can do it yourself with those simple steps:
Get the html file as string in your code (using http get on the file).
Injecting the result into the DOM. (using innerHTML or some other method)
No framework needed.