Web Programming TutorialsLearn How to Upgrade your App from Angular 1 to Angular 2

Learn How to Upgrade your App from Angular 1 to Angular 2

To be in sync with the latest Angular technology, sooner or later we will have to migrate our apps to Angular 2 from the Angular 1.x framework. But before we explore the ways to migrate from Angular 1.x to Angular 2.0 let us analyze what could be the reasons that made the Angular team rework on the framework and create Angular 2.0?
I would say if Angular 1.x was good then Angular 2.0 is better. The following are the advance features in Angular 2.

  • Performance of App built in Angular 2:
  • In the past, there were lots of complaints about the app performance which were built in Angular 1.x. The bottleneck and delays in Angular 1.x were mainly due to data binding concepts. Therefore, the Angular 2 team analyzed those gaps and came up with better concepts and strategies in order to improve the performance and operation speed of the web applications built in Angular 2 over Angular 1.x.

  • Better support for Mobile or Smartphones:
  • Angular 1.x frameworks were never built with the mobile support feature and their smooth operation on the mobile or smartphone. They were initially implemented in the Ionic framework (Advanced HTML5 Hybrid Mobile App Framework) in very tough manner which did not attract the mobile users in terms of their experience and the app performance on the smartphones overall. Therefore, there was a need to release the Angular 2.0 framework which has better design than its predecessor frameworks, better support for mobile or smartphones, and a framework which is robust enough to absorb any new technology that comes up for smartphones or tablets in future.

  • Angular 2.0 is the future of Web Development:
  • Angular 2 framework has all the favourable features that web development requires till now and ready for the features which are coming up in future. Angular 2.0 is implemented with TypeScript and ES2015/ES6 is the main ECMAScript version used for building the Angular 2.0 framework.

  • Easy to learn than Angular 1.x:
  • As a general opinion from many Angular developers, it is observed that Angular 2.0 is quite simple to grasp though different from Angular 1.x. On many blogs and websites, you might have noticed that it took weeks for the developers to learn Angular 1.x whereas, the new developers without the knowledge of Angular 1.x are able to learn and kick start their work within 3 to 4 days. As per them, it is very straightforward and easy to learn the framework. Again, the developers who are switching from Angular 1.x to Angular 2.0 might take a bit more timer to grasp this new technology as they have to update their existing Angular 1.x knowledge with the new tactics of the Angular 2.0 framework.

The following is an example of Angular 2.0 for beginners.
Component: In Angular 1, we were using directives, controllers, and scope to build an application. Now, in Angular 2, all those concepts are combined into Components. The following is an example of a controller. Notice that the component has the selector and templateUrl that has the actual HTML code for rendering on the browser. Next, you may notice the ‘AppComponent’ class that acts as a controller and helps in property or events binding. Therefore, Component, dependency injection and property bindings are the three core concepts of Angular 2. We will discuss in detail all the three core concepts in the ‘Angular 2 Core concepts’ chapter.
app/Component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-first-angular2-app',
  templateUrl: 'template.html'
})

export class AppComponent { 
	heading = "Welcome to Angular 2, this is my first Angular 2 program.";
	paragraph = "Hello Angular 2 framework";
}

template.html: It is called in Component as templateUrl.

<h2>{{heading}}</h2>
<p>{{paragraph}}</p>

Index.html: This is the main html ride that renders and starts the app. It has the selector ‘my-first-angular2-app’ present in the body section as shown below.

<html>
<head>
<title>Angular 2 First Program</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/styles.css">
<!-- 1. Load libraries -->
<!-- Poly-fills for the older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
      System.import('app').catch(
    		  function(err){ 
    			  console.error(err); 
    			  }
    		  );
</script>
</head>
<!-- 3. Display the application -->
<body>
	<my-first-angular2-app>Please wait...</my-first-angular2-app>
</body>
</html>

Output
Angular 2 Framework
Isn’t it simple? Also, it is not like that with the advent of Angular 2.0, the apps built on the Angular 1.x framework would be deprecated and would lack support from Angular team. It will take a while to migrate the existing Angular 1.x apps to Angular 2.0 or there might be no need to do that at all. We know that Microsoft edge is the latest browser in the market yet people are still working on Internet Explorer 10 and 11, i.e. in other words we cannot wipe out any software or associated technology overnight. In a similar way, the existing Angular 1.x apps will continue for now, but later these apps may be either rebuild in Angular 2.0 framework or migrated from Angular 1.x to Angular 2.0 framework through ngForward or ngUpgrade approach.

  • Using ngForward approach
  • The ngForward approach of migration is not the actual upgrade but it makes the applications built in Angular 1.x work and look like Angular 2.0 applications. Therefore by using this approach, we can progressively rewrite our Angular 1.x application to look like Angular 2.0 and add new features to the existing app in an Angular 2.0 manner on the top of the existing project.

    The following are the straightforward steps to use ngForward for migrating your existing Angular 1.x (must be 1.3+) app to look like Angular 2.0 app.
    1. Execute the following command on the command prompt which is opened at the Angular 1.x project root directory. This command installs the latest available version of ngForward as well the reflect-metadata module.

    npm i --save ng-forward@latest reflect-metadata

    2. Next, you have to make changes to your index.html to look as shown below:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>Ng-Forward Migration Example</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>
          //To bootstrap the Angular2 application
          System.import('app').catch(console.log.bind(console));
        </script>
      </head>
      <body>
        <my-first-angular2-app>Please wait...</my-first-angular2-app>
      </body>
    </html>

    3. We have declared config.js file in the head section of the above index.html file. We are going to create it in the following way.

    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.component.ts',
          defaultExtension: 'ts',
        }
      }
    });

    4. On our app.component.ts file, we can code it in Angular 2.0 as shown below.

    import {Component,  bootstrap} from 'ng-forward';
    
    @Component({
        selector: 'my-first-angular2-app',
        template: '<h1>{{heading}}</h1><p>{{paragraph}}</p>'
    })
    class AppComponent { 
        heading = "Welcome to Angular 2, this is my first Angular 2 program.";
        paragraph = "Hello Angular2 framework";
    }
    bootstrap(AppComponent);

    We are all set now to use the Angular 2.0 features and code these features in Angular 2.0 manner without changing the existing application code which was developed in Angular 1.3+.

  • Using ngUpgrade approach
  • Many developers and organizations are not very comfortable in writing code in the Angular 2.0 manner on the top of an Angular 1.x app as they are still missing the real matter. This approach may cause problems for the large existing Angular 1.x project as such projects are very difficult to maintain for new changes, even after using the ngForward approach. This problem can be solved up to a large extent with the help of the ngUpgrade approach. Therefore, understand the ngUpgrade is important and it has full documentation available for it that can be found on the link below.

https://angular.io/docs/ts/latest/guide/upgrade.html
Source code for Angular-1x
Source code for Angular2-First-Program
Conclusion
In this article, we have discussed about the need to develop Angular 2.0 framework by the Angular team and the various approaches to migrate applications from Angular 1.x to Angular 2.0 framework.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -