@ngrx Angular RxJS Testing

5 Steps To Prepare Your Angular 1.x Code To Angular (2+)

I’ve been playing around with Angular (+2) (alpha v 0.46 now) lately. At first, it seemed strange and totally different from the beloved version 1. Version 1 is written in ES5, plain javascript, while version 2 is a new take with typescript & es 2015. However, there are few steps that you can already take in order to prepare existing AngularJS code (or a new project with AngularJS) and make it closer to Angular (+2).

Why Should I Prepare My Angular 1 to Angular (+2)

First, you want the code to be easily migrated, when the time comes, to use Angular (+2) as the framework. There are Upgrade Strategies that the angular team has provided so far, where you can mix AngularJS & Angular (+2) components, however, the aim is going towards one code base, and eventually, using one framework.

Second, Angular (+2) is more about writing plain javascript then using proprietary framework code.

Third, the community & browser vendors are going towards embracing new standards of Ecmascript, so eventually, sticking to write in these standards will aim in aligning the code base to be as reusable as possible, no matter what the chosen framework is.

Steps For Preparing To Angular (+2)

There are few strategies that you can make in order to make your code as close as possible to Angular (+2), thus, making the transition easy.

1. Start Using Ecmascript 2015

Angular (+2) is written with Typescript, which is a super-set of Ecmascript 2015 with few additions. However, You can use Ecmascript 2015 only with Angular (+2) if you don’t like Typescript. Currently, in the end, the code compiles to Ecmascript 5. That leads to the fact that you can also write Angular (+2) with Ecmascript 5.

But, using Ecmascript 2015 new features, results in my opinion, in writing less code (sometimes…), more readable code and exciting features like destructuring.

In order to use Ecmascript 2015 features, you need to compile the code using a transpiler. Currently, the most popular is babel. You can set it up with may popular build scripts like gulp, webpack, browserify and others.


2. Use “angular.service” instead of “angular.factory”

Using Ecmascript 2015 means that we can use the new “class” keyword in order to create new objects and even extend others. As I’ve written before, I’m a fan of composition over inheritance – so – I don’t see any use for “extend” to implement inheritance, however, I do see the class feature adding good syntactic sugar (writing less code) for creating a blueprint of an object.

The difference between angular’s 1 “service” and “factory” is the method of instantiating:

  1. “service” is invoked with the “new” keyword (once)
  2. “factory” is invoked as a regular function – without “new” keyword.

In Angular (+2), Services are written as Ecmascript 2015 classes. That leads your code of AngularJS factories to be converted to services, and also, use “class” instead of function.

I.e, in my open source project, Echoes Player, I’m using “class” and angular “service” for the youtube api service (while I used factory before):

3. Use “Class” instead of “function” for Controllers

This step is somewhat related to the previous one. Controllers in AngularJS are recreated (or “newed”) all the time – they are not singletons.

Angular (+2) doesn’t use controllers. almost.

However, Angular (+2) is based on components. Each component will be controlled by a simple class (with few es7 annotations). If your AngularJS code is written with a web components approach, then probably, each directive is handled by a controller function.

That’s the important thing to realise – the concept of directives in Angular (+2) is simpler:

  1. directives that use an element selector are components.
  2. all others are directives.

Still, Angular (+2) instantiate services and controllers under the hood – you shouldn’t instantiate it yourself – it’s also hard to test. However, Angular (+2) is still testable and promotes TDD & BDD. I also wrote an article of why you should encapsulate the “new” keyword so you can write more testable code.

I.e, writing this controller as a class, will make the transition to Angular (+2) component much easier:

4. Encapsulate Code With Directives

This step requires you to rethink the code and apply better architecture. Start thinking in terms of components/directives. Don’t leave any plain angular code in index.html or any other template without connecting its meaning to a directive. I.e, if you use ng-repeat on a code that describes a person profile card, create a directive of “<person-profile-card>” or “<profile-cards>” (as a list).

In the upcoming AngularJS.5 release, you’ll be able to use the “angular.component” definition for creating components with a nicer syntax (as written by todd motto) rather than a directive. This will also ease the migration in the near future for Angular (+2).

Remember, Angular (+2) is all about components that use other components (or directives), so this sort of thinking will assist in reorganising the code much better and make it easier to use Angular (+2).

5. Use Angular2to1, ng-upgrade or others

Angular (+2) introduced a nice simpler syntax for defining components (directives). In order to experiment with Angular (+2) component syntax while still using es5, I created the npm module “angular2to1“. I.e, you can use Angular (+2) es5 compliant syntax with your AngularJS app in order to define a directive:

This is the same as defining an AngularJS directive:

There are plenty of options out there.

ng-upgraders is a repository that aims to contain links for upgrade strategies to Angular (+2). There are few interesting projects, some provide the possibility of  actually using Angular (+2) annotations with typescript and Ecmascript 2015 with AngularJS, thus using an almost identical Angular (+2) syntax with AngularJS.

On the other hand, there are many solutions that showcase how to write Ecmascript 2015 with AngularJS, while sticking to best practices and strict guidelines – both in terms of software architecture and angular recommended architecture.

One project that I like is NG6-Starter – which includes a boilerplate for developing AngularJS app with Ecmascript 2015, generators for creating components, test configuration already included and much more.

6. (Bonus Step) Use Module Loaders -system.js, webpack, browserify etc..

All examples of Angular (+2) is based on lazy loading components using System.js library. System.js allows to use lazy loading on the one hand, while compiling a minified one file version for production. This allows you to write components and services in separated files and having the build script to resolve dependencies in build time and live as well.

In addition, if you rather use gulp.js, webpack or browserfiy – that’s a no brainer and can be easily configured and integrated.

Final Thoughts

I tend to stick to the standards. I see Ecmascript 2015 final standard as a recommendation to go forward with the javascript language – so, I do see a reason to start using it (as i’ve written before) and embrace the change.

Other frameworks, platforms and libraries are embracing Ecmascript 2015, which would be beneficial to all. Code can be written in a flexible way, where it could be shared across libraries and projects.