Hello, coder. While the Angular written with JavaScript is still popular among developers, new versions of the Angular built with TypeScript are gaining popularity by the day. In this article I will explain how to perform a corner migration using ngUpgrade.
As part of Angular 2, ngUpgrade ensures that the next version of the framework and its predecessors run in parallel. It is therefore suitable as a basis for insidious migration.
Since the announcement of Angular 2, the development teams have been wondering how to prepare their AngularJS applications for the upgrade. The ngUpgrade belonging to corner 2 is one of the answers. It allows AngularJS and 2 to work in parallel and provides a framework for gradual migration. This tool allows developers to write new parts of the application using Angular 2 without having to migrate the previous parts immediately.
This article illustrates the process using an example. The corresponding source code can be found on GitHub. It uses the TypeScript language for AngularJS and Angular 2 and compiles the constructions created with it in ECMAScript 5 for execution in the browser.
The following figure shows the structure of the submitted application.
So it is an AngularJS application, which is also a prerequisite for the use of ngUpgrade. However, components (guidelines) and services written with AngularJS and Angular 2 are used as part of the application. The used version of the frame can be found in the component image in the top left corner.
To be able to use Angular 2 constructions in AngularJS they have to be downgraded. This means that developers wrap it with the envelope provided by ngUpgrade to make it look like an AngularJS structure on the outside. In this case this is done with FlugCard, FlugService and the passenger search component. NgUpgrade also supplies AngularJS constructions with an envelope that can be used in Angular 2 if desired. In this case it’s an upgrade. In this example, this is necessary for the passenger card and the passenger service.
How do you set up the controls and how do you load the process?
The AngularJS and Angular 2 kits, including ngUpgrade, are included in the example via script references. The request will be written in block letters. The ECMAScript 5 files compiled from the source code are loaded by the application via the System.js module loader:
Import system (app / app). Catch (console.error.bind (this)) ;
Since using the modular ECMAScript 2015 system in TypeScript means that each file indicates its dependencies via input declarations, the application just needs to request the app/app.js file to load. As usual, AngularJS applications record individual constructions, including controllers and services. He also takes care of downloading applications. However, the angular.bootstrap is not used for this, but the method of the same name from the ngUpgrade UpgradeAdapter. This is the cornerstone of the necessary parallel work. However, NgUpgrade does not offer a counterpart for downloading via the ng-app attribute. Since the same instance of the upgrade adapter is needed at some places in the application, it is recommended to install it in a separate :
// update adapter.ts
Import {UpgradeAdapter} from angular2 / upgrade;
export const upgradeAdapter = new UpgradeAdapter () ;
The app.ts file can be imported with the UpgradeAdapter and used to import the :
// app.ts
import {upgradeAdapter} from ‘./upgrade-adapter’ ;
[…]
var app = angular.module (app, [ui.router]) ;
[…]
upgradeAdapter.bootstrap (document.body, [‘app’]) ;
What is an upgrade and downgrade?
The downgradeNg2Component upgrade adapter method is used to downgrade the above 2-component passenger angle. The implementing directive registers the return packaging as a :
// app.ts
implementing directive (passenger survey, ↵)
upgradeAdapter.downgradeNg2Component) ;
To activate the UI router, the configuration is given a status with a template based on the UI router:
State provider
Staff (Personnel search).
url : Searching for passengers,
Motive: ”.
});
For another example of using the Angular 2 component, see the following two extracts of the source code. This is the flight map shown in the overview map. As with the FlightSearch component, app.ts handles decommissioning and registration:
// app.ts
app.directive (flugCard, ↵).
upgradeAdapter.downgradeNg2Component (FlightCard) ;
The use of such a guideline in the Angular 1 model is as follows:
// flugsuche.html (ng1)
FlightSearch.
element] = f
selected item] = flightSearch.selectedFlight.
(highlighted – change item) = flightSuchen.select (event $) >
Note that the known angle notation is used to define the data link. 2. Square brackets mean a one-way nest, round brackets mean an event nest. The combination of the two corresponds to the bilateral link. The example in question illustrates this with the highlighted element and the element of change.
Corner service 2 to corner 1
The use of Angular 2 services is similar to the use of related components. However, service providers and their dependencies must also be registered with the UpgradeAdapter :
// app.ts
upgradeAdapter.addProvider (FlightService) ;
upgradeAdapter.addProvider (HTTP_PROVIDERS) ;
Since FlugService uses the HTTP service of Angular 2, the example registers an HTTP_PROVIDERS array containing the required providers. In addition, the decommissioning method of the Ng2 service provider is used to downgrade the service. The App.factory then registers the packaging it returns:
app.factory (flightService, upgradeAdapter.downgradeNg2Provider (flightService)) ;
In order to use existing AngularJS structures in Angular 2 components or services, they must be upgraded with the Ng1Provider upgrade:
// app.ts
app.service (passenger service, passenger processing) ;
upgradeAdapter.upgradeNg1Provider (PassengerService) ;
Angle Components and Services 2 can then apply for a dependency injection service. Since additional type specifications with AngularJS 1.x do not play a special role, the name of the desired service must be entered via the injection editor:
// passenger search.t (ng2)
@Component ({[…])
Search for passengers in the export class {
Engineer (
@Inject (passenger service) private passenger service: ↵
Passenger service,
private basket service : basket service) {}
[…]
}
If developers want to reuse the AngularJS guideline in a new Angular component, it also needs to be upgraded with upgradeNg1Component. The method takes the name under which the directive is registered and returns an envelope for Angular 2. Then just add it to the list of guidelines.
// passenger search.t (ng2)
(a6) Component (a6)
Picker: Searching for passengers,
templateUrl : app / passenger-search / passenger-search.html,
Guidelines : upgradeAdapter.upgradeNg1Component (”passengerCard”)].
})
Search for passengers in the export class {
[…]
}
A component model can refer to a policy. For this, the element that carries the name under which the policy was originally registered is used.
// passenger search.html (ng2)
[…]
paragraph] = ‘p’.
[selectedItem] = selectedPassenger.
(selectItemChange) = select ($ event) >
[…]
The familiar notation of Ang. also applies here. 2, to adjust the lights.
In order for an AngularJS directive to be used in Angular 2, it must be based on certain good practices. It is recommended, for example B., to use the relatively new As property controllers and bindToController. Layout and compilation functions should also be avoided, especially since there is no equivalent in Angular 2 :
// Passenger card factory.t (ng1)
PassengerCardFactory export class {
static creation (): ng.IDirective {
Back to
templateUrl : app / passenger card / passenger card.html,
ControllerA: vm,
Bullet: {
Thing: =,
selectItem: ‘=’.
},
bindToController: True,
controller: function () {
this.element = Null ;
this.select = () => {
this.selectedItem = this.item ;
}
app.service (passengerCard PassengerCardFactory.create) ;
module.component angle 1.5
With the convenience function module.component, Angular offers an alternative to module.directive that applies the best practices described here.
Completion
For example, ngUpgrade allows AngularJS and Angular 2 to run in parallel, allowing for a stealthy migration. If corner 2 can already be used for a new building, existing structures cannot be moved immediately.
The fact that ngUpgrade comes directly with angle 2 also has a strong symbolic character. This shows that the Angular team has not forgotten its most important success factor. This means that it is a strong community that still needs to support AngularJS applications, despite the relaunch of Angular 2.
Related Tags:
rewrite angularjs to angular,ngupgrade angular 8,migrating to angular,angularjs and angular 6 together,convert angularjs code to angular 8 online,angularjs to angular migration step-by-step,upgrade angularjs service,use angular component in angularjs,add angular to angularjs,convert angularjs directive to angular component,angularjs vs angular,ngmigration assistant,ngmigration forum,angular/upgrade component,angular-hybrid app example
