Migrating To Angular 2

Migrating To Angular 2

Over the last few years we have seen Angular becoming the most popular frontend framework. Angular 2 release is expected to ship in few months. Much of the excitement comes from new rendering architecture that splits application and rendering and allows:

  • web apps split across browser’s main process and web workers (better performance)
  • native mobile apps built with Angular 2 with NativeScript
  • server-side rendering (faster startup, SEO)

On top of that, Angular 2 embraces TypeScript, components and new template syntax.

NEW SYNTAX AND SEMANTICS

Angular 2 application is a tree of components, similar to Ember and React. Essentially, a component is a controller class (equivalent of ViewModel in MVVM) with a template that represents a UI element. Components are important part of the Angular 1 to Angular 2 migration.

Angular 1 components (directives with controllerAs) are considered to be the best practice since they were introduced in Angular 1.2. However, Angular 1 components and router definitions are much more verbose and lack conventions that make components much easier to write with Angular 2.

null

Angular 2 is written in TypeScript, which is a superset of ES6. Now application’s code is structured using ES6 modules and a new dependency injection that can take advantage of TypeScript types. TypeScript makes your IDE much smarter with type errors and a better auto-completion in code and templates. See 5 min quickstar for Angular 2 code example.

INCREMENTAL UPGRADE

You will be able to run Angular 2 within your Angular 1 application using ng-upgrade. This allows seamless upgrade component by component.  Angular 1.5 release is expected to include a new router and a component helper. It is an important part of the migration process.

Here is a short list of steps to take in order to be closer to Angular 2:

  • upgrade Angular to the latest version
  • organize your code with ES6 modules and classes
  • use Webpack as module bundler
  • replace controllers with directives with controllerAs and bindToController
  • replace $watch calls with with declarative annotations like ng-change or RX.js observables

CONCLUSION

It is clear that migration to Angular 2 will require some effort, but expected benefits are definitely worth it. We encourage you to take this incremental upgrade approach and start it today.