How to use ES2016 decorators to avoid Angular 1.x and ES2015 boilerplate code — Martin Micunda

  • The example inject module dependencies to Class constructor.
  • The project that use all these decorators mention in this article can be found on the GitHub .
  • The example inject module dependencies to Class function.
  • template , restrict : ‘E’ , scope : {}, bindToController : true , controllerAs : ‘vm’ }; return function decorator ( target ) { if ( target .
  • dependencies ) { return function decorator ( target , key , descriptor ) { // if it’s true then we injecting dependencies into function and not Class constructor if ( descriptor ) { const fn = descriptor .

This article describes usage of ES2016 decorators with Angular 1.x and ES2015 to avoid writing boilerplate code and get one step closer to make migration fro…

@K0YCHEV: How to use ES2016 decorators to avoid #AngularJS and ES2015 boilerplate code:

This article is following How to start writing apps with ES6, Angular 1.x and JSPM post that I wrote a couple of months ago when I have started to work on my personal Employee Scheduling project and it describes usage of ES2016 decorators with Angular 1.x and ES2015 to avoid writing boilerplate code and get one step closer to make migration from Angular 1.x to Angular 2 easier.

After a couple of months writing applications with ES2015 and Angular 1.x I found myself in position where I start writing a lot of boilerplate Angular 1.x code but I also want to move little a bit closer to Angular 2 syntax (there are already plenty of articles and videos about Angular 2 so we have at least some idea how Angular 2 syntax will look like).

The most clean Angular 1.x and ES2015 code I been writing so far looks like this:

The above account.js file contains a lot of Angular 1.x boilerplate code that I need to repeat over and over in other modules/components files and as we are using ECMAScript 2015 modules already it would be nice if we could somehow hide Angular 1.x modules and all these .controller, .config, .directive etc. syntax and the way how we can do that is using ES2016 decorators. If you want to know more about ES2016 decorators you can read Addy Osmani article Exploring ES2016 Decorators.

decorator that inject Angular 1.x module dependencies and it looks similar like Angular 2 DI.

Source code:

decorator must contains filter name property as this name is important during the minification. Filter, Run and Config blocks are factories in Angular 1.x and current proposal for decorators only work with classes (at least that’s my understanding as it would be nice to use decorators with factories functions) so if we want to use Filter, Run and Config blocks you have to define these functions inside of class.

Source code:

Source code:

Source code:

your app wouldn’t work after minification.

Source code:

decorator as you will see in the next section. In Angular 1.x I am using components when I need to only embed views e.g. navigation, footer and directives when I need to add behavior to a DOM element (this is exactly how Angular 2 will work except you can also use components with routes).

Source code:

takes two parameters, first is state name and second are options that you know from ui-router.

The idea behind this post was to show how you can simplify your Angular 1.x and ES2015 code with ES2016 decorators. It’s really up to you how and where else you want to use decorators. The project that use all these decorators mention in this article can be found on the GitHub.

How to use ES2016 decorators to avoid Angular 1.x and ES2015 boilerplate code — Martin Micunda

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.