Angular1 vs Angular2: Ways to migrate

Angular1 vs Angular2: Ways to migrate

Most of the people are now choosing AngularJS over other framework for web development.

It’s started as a project in Google but, it is open source framework now.

What is AngularJS?

AngularJS is a structural framework which is used for creating dynamic web apps. It’s simply convert’s static html to dynamic html using JavaScript. And it is best for developing single page applications.

There many other JavaScript frameworks which also allow us to build dynamic web apps, but Angular have several advantages over other frameworks which makes it’s the first choice for developers.

Advantages of Angular over other framework

  1. Provides two way data binding.
  2. Easy to Unit test.
  3. Open source JavaScript MVC framework.
  4. Supported by Google
  5. No need to learn another scripting language..
  6. Supports separation of concerns by using Model View Controller design pattern.
  7. Built-in attributes (directives) makes HTML dynamic.
  8. Easy to extend and customize.
  9. Supports Single Page Application.
  10. Uses Dependency Injection.
  11. REST friendly.

After the great success from Angular 1 Google has announced Angular 2 in 2014. This new version is completely re-written and does not have any support for previous version of Angular (Angular 1).

The Angular 2 has several new features which makes it better that Angular 1

  1. Support for mobile or smartphones
  2. Better in performance.
  3. More choice for languages (ES5,ES6, TypeScriptor Dart)
  4. Implements web standards like components.
  5. Easier to learn

Ways to migrating from Angular 1 to Angular 2

Since Angular 2 cannot be backward-compatible with the applications built in previous versions, so to migrate it from previous version to new version i.e.  From Angular 1 to Angular 2 following approaches can be used.

Rebuilding Application in Angular 2

The cleanest way to migrate is to rebuild the application in Angular 2. It also allows you to getting familiar with the changes done in Angular 2.

But rebuilding application from scratch will include cost and time and other stability risks, so by considering all these factors we can rebuild the application or we can use or approaches like “ngForward” or “ngUpgrade”.

ngForward

In this approach you are not doing actual migration, In other words ngForward let you write Angular 1 code that looks very similar to Angular 2.

This will give you benefits of Angular 2 and it will help you to get in touch with newer version with a hold on previous version.

1) Open command prompt window and move toward your project root directory and execute following command

 npm i –save [email protected] reflect-metadata”

This command will install the latest version of “ngForward” and “reflect-metadata

2) Now to go your index.html file and make changes to it just like example given below

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Ng-Forward Sample</title>
<link rel=”stylesheet” href=”styles.css” />
<script data-require=”[email protected]″ data-semver=”1.4.7″ src=”https://code.angularjs.org/1.4.7/angular.js”></script>
<script data-require=”[email protected]″ data-semver=”0.2.15″ src=”http://rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js”></script>
<script src=”http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js”></script>
<script src=”config.js”></script>
<script>
//bootstrap the Angular2 application
System.import(‘app’).catch(console.log.bind(console));
</script>
</head>
<body>
<app>Application is Loading…</app>
</body>
</html>

3) We have added a reference for config.js file in our index.html so we need to create that file,

The file will look like this.

System.config({
defaultJSExtensions: true,
transpiler: ‘typescript’,
typescriptOptions: {
emitDecoratorMetadata: true
},
map: {
‘ng-forward’: ‘https://gist.githubusercontent.com/timkindberg/d93ab6e17fc07b4db7e9/raw/b311a63e0e96078774e69f26d8e8805b7c8b0dd2/ng-forward.0.0.1-alpha.10.js’,
‘typescript’: ‘https://raw.githubusercontent.com/Microsoft/TypeScript/master/lib/typescript.js’,
},
paths: {
app: ‘src’
},
packages: {
app: {
main: ‘app.ts’,
defaultExtension: ‘ts’,
}
}
});

4) Now in the app-component.ts file, we can write code in it just like Angular 2 code, as shown below.

import {Component,  bootstrap} from ‘ng-forward’;
@Component({
selector: ‘my-angular2-app’,
template: ‘<h3>{{heading}}</h3><p>{{paragraph}}</p>`
})
class AppComponent {
heading = “Welcome to Angular 2.0 framework”;
paragraph = “Hello World!”;
}

bootstrap(AppComponent);

Now we can use all Angular 2 features in our existing AngularJS 1 application.

ngUpgrade

In previous way of migration, we can write the code in the Angular 2.0 way on top of the existing Angular 1.x applications. However, this approach may not be comfortable for some as concerns and it might cause issue.

To run both frameworks Angular 1 and Angular 2 side-by-side and make components interoperable, the Angular projects comes with a module “ngUpgrade”

For more details on ngUpgrade we recommend you to check out the office document at
https://angular.io/guide/upgrade.

Sharing

Leave your comment