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.
- Each controller, service, component, directive etc. can be a Typescript class.
- Each prototype member can be a class method.
- On services, each method assigned as a member on the service instance may be a class method.
- A component’s controller (Angular 1.5) may be a class itself.
- Its prototype members are class members, and the same as controllers and services.
- Precede the Every class with the Export keyword so you will be able to import it later on.
- 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.
- 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-routedt~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