Angular 1.5+ component in ES6 : my way to write it as near as possible as an Angular2 component

Angular Team is making changes to AngularJS to help us to code better (yes we all code super nice but any help is always welcomed) for less efforts. They put even more important efforts to help us for future migrations from AngularJS to Angular2 without making casualties (don’t be afraid of the word migration it will be easier than you think).

For my concern AngularJS 1.5 changed drastically my way to code AngularJS application. Not due to Angular2 being in beta (since last December) but due to amazing new “toys” added in v1.5.

Since AngularJS 1.5 you have :

  • components (some kind of directive but easier to use when thinking in components)
  • new router (this router is better than his ancestors and really angular2 like)

I will focus on components.

New component is really Angular2 like

Lets see an example to picture and understand why I say “new component is really Angular2 like” (apart from details due to AngularJS being totally different from its successor).

Suppose you have a directive in your application. This directive is in fact a little portion of code (html and a little piece of javascript in a controller). You want to able to easily re-use this directive in your application (because you firmly believe in D.R.Y. — don’t repeat yourself— way of coding).

Demo directive in AngularJS (before v1.5) :

This directive may not look outstanding (yes it does not do amazing crazy stuff). It is just an illustration which contains enough material for this article. So what do we got here :

  • a directive with an html template, its properties are bound to
  • a controller with bindToController (all in isolated scope : “scope : {}”).
  • third file is the module but won’t be relevant next since dependency injection in AngularJS and Angular2 evolve so much but so nicely that you won’t have to write that way anymore.

That is pretty already nice. You can write components. Decompose your application into as small as possible components for less effort than before introduction bindToController.

BUT it is still a bit verbose for nothing when you aim to write a component. For example, if I use “bindToControllers”, why do I need to write “scope : {}”? I’m writing a component I will want an isolate scope.

Here comes AngularJS v1.5 and the new directive called “component”.

Demo directive in AngularJS (from v1.5) :

It looks far better now. See that we got now :

  • the word “component” (clear distinction with a directive. A directive will be needed if you need link function for instance = different purpose)
  • we get rid of “restrict” (component is always restricted to an element)
  • we get rid of “scope” (component’s scope is always isolated = that makes sense since we write a component)
  • bindToController” becomes “bindings” = no possible confusion since scope disappeared (and as a bonus you save 8 chars to enter so your keyboard will appreciate this)

You can see I included controller class in the same file. As we are in ES6 it looks like the component class in Angular2.

Yes… in Angular2 controller no more exists.

But if you look at the shape of this code in AngularJS 1/5+ and you compare it to the same component in Angular2 :

Apart from :

  • AngularJS ≠ Angular2
  • Typescript versus ES6
  • decorators
  • $inject and
  • module declaration

this way of writing an AngularJS component looks “nearly the same” (ok, don’t watch it too close from the screen since it is not the same in reality) the way you write a component in Angular2 :

  • limited verbs
  • when your template is not too big write it in your component file
  • your component class (Angular2) is your controller class (AngularJS)

At least you take Angular2 habits now in AngularJS

  • to write nearly the same way
  • to organize your application files
  • to think component rather than just MVC application.

On conclusion

If you did not jump into Angular2 you should have a try it is worth at least for learning now.

Don’t be afraid of Typescript (think about it as ES6 with more options, in fact that is exactly what it is = a superset over ES6) and decorator syntax or anything that can look strange the first time.

Thank for reading.

Like what you read? Give Erwan Datin a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.