Complete Migration guide from Angularjs To Angular2

Angular 2.0 is a complete is a total revise of Angular 1.x, This brings up the issue of what to do with our “old” Angular 1.x applications .

Building the same applications from scratch is sometimes impossible due to time and priority constraints. Therefore, the Angular team has come with a way to enable us with the incremental migration of our application.

The Angular 1.x styleguide is widely explained at the following address:https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

How to start

Using module loader

Since Angular 2.0 uses a module loader built in, your migration will be much easier if you use a module loader now. You may have your tsconfig.json file for your Angular 2.0 application set to use the same module loader.

Typescriptify your code

Suprising as it sounds, this task is not so hard. Typescript is in fact a superset of JavaScript, so with a little change you will be able to have your Angular 1.x application built with TypeScript.

Asumming you are familiar with tsc and with the tsconfig.json file, all you need to do is to implement them in your Angular 1.x application. You may just change the file extension of each .js file to .ts and try to compile it.

However, after doing so, you may want to use Typescript features and not just change the extension. Let’s see what you can do.

  1. Each controller, service, component, directive etc. can be a Typescript class.
  2. Each prototype member can be a class method.
  3. On services, each method assigned as a member on the service instance may be a class method.
  4. A component’s controller (Angular 1.5) may be a class itself.
  5. Its prototype members are class members, and the same as controllers and services.
  6. Precede the Every class with the Export keyword so you will be able to import it later on.
  7. If you already use a module loader, set your Typescript compiler to use it (in tsconfig.json), and now you may use the Typescript import keyword whenever you need.
  8. You need also to install the Angular 1.x type definition, along with the jQuery type definition and Angular route type definition. You may machine all of these by running the following command:
npm run typings install dt~jquery dt~angular dt~angular-route 
dt~angular-resource dt~angular-mocks dt~angular-animate 
dt~jasmine -- --save --global

For example, let’s see how we can alter a controller code.

(function(angular){
function DashboardController(socketControll, dataService) {
this._socketControll = socketControll;
this._data = dataService;
this.users = _data.users;
_socketControl.validateAndOpenListeners();
}
}
angular.module('dunebookexample-app.dashboard',['dunebookexample-app.scocketControll', 'dunebookexample-app.dataService']).controller('dashBoardController',['socketControllService', 'dataService',DashboardController]);
}(window.angular));

Now after Typescript migration:

(function(angular){
class DashboardController{
users: any;
_socketControll: any;
_data: any;
constructor(socketControll, dataService) {
this._socketControll = socketControll;
this._data = dataService;
this.users = _data.users;
_socketControl.validateAndOpenListeners();
}
}
angular.module('dunebookexample-app.dashboard',['dunebookexample-app.scocketControll', 'dunebookexample-app.dataService']).controller('dashBoardController',
['socketControllService', 'dataService',DashboardController]);
}(window.angular));

Let’s have a look at a service:

(function(angular){
function DataService(api){
this._api = api;
}
DataService.prototype.getAllData = getAllData;
DataService.prototype.getUsers = getUsers;
function getAllData() {
return Promise.all([this.getRooms(), this.getUsers()])
}
function getRooms() {
return this._api.send('getRooms').then(function(res)
{
this.rooms = res.data;
});
}
function getUsers() {
return this._api.send('getUsers').then(function(res)
{
this.users = res.data;
});
}
angular.module('dunebookexample-app.services.dataService',
['dunebookexample-app.services.apiService']).service('dunebookexample-app.dataService',
['adge-app.apiService', DataService]);
}(window.angular));

Now, let’s migrate this to Typescript:

(function(angular){
class DataService {
constructor(
private _api: any
) {}
public rooms: any;
public users: any;
getAllData() {
return Promise.all([this.getRooms(), this.getUsers()])
}
getRooms() {
return new Promise((resolve, reject) => {
this._api.send('getRooms').subscribe(
res => {
this.rooms = res.data;
resolve(res)
},
err => reject(err)
)
})
}
getUsers() {
return new Promise((resolve, reject) => {
this._api.send('getUsers').subscribe(
res => {
this.users = res.data;
resolve(res)
},
err => reject(err)
)
})
}
}
angular.module('dunebookexample-app.services.dataService',
['dunebookexample-app.services.apiService']).service('dunebookexample-app.dataService',
['adge-app.apiService', DataService])
;
}(window.angular));

Lets Complete The migration Process

About the author

Deven Rathore

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares