Decor@ngles
A small set of opinionated, pure ES2016 decorators for cutting down on boilerplate AngularJS 1.x code.
Decorators
Name | Target | Description |
---|---|---|
@Module | class | Creates a module with provided name and dependencies |
@Provider | class | Creates an Angular provider |
@Service | class | Creates an Angular service (use for factories also) |
@Controller | class | Creates an Angular controller |
@Directive | class | Creates an Angular directive |
@Inject | class/method | Injects providers/services into a constructor or method |
@AutoInject | class | Injects providers/services and makes them available to instances |
@Module
@Module(name[, requires])
creates a new module with optional module dependencies, config and run blocks, values, and constants.
Creating a module in ES5
var myApp = angular; myApp; myApp; myAppvalue appKey: '12345678' secret: '14159265'; myApp;
Creating a module with decorangles
; @ @ { $locationProvider; } @ { myService; } { return appKey: '12345678' secret: '14159265' ; } { return userId: 123 ; }
Services
The service decorators (@Provider, @Service, @Controller, @Directive) use a naming convention for associating them with
a module. This was done to prevent the having to use another decorator just to do the association. For example, if you
have created a module named "myApp" and you want to create a service called "myService", the @Service decorator would look
like @Service('myApp.myService')
. This convention will work even if your module name has a "." in it. For example,
@Directive('bm.uiTour.tourStep')
would create a directive named 'tourStep' on the 'bm.uiTour' module.
@Provider
@Provider(name)
creates a provider. Dependency injection is available for the constructor and the $get method.
Creating a provider in ES5
var myApp = angular; myApp;
Creating a provider with decorangles
; let mode = 'legacy'; @@ { mode = _mode; if mode === 'html5' this$locationProvider; else this$locationProvider; } @ var service = {}; service return mode; service return $locationhost; return service;
@Service and @Controller
@Service(name)
creates a service. There is no @Factory decorator because factories are essentially services that use
objects instead of instances, and it doesn't make sense to do it that way with classes.
@Controller(name)
creates a controller. The patterns for @Service and @Controller are identical, so to cut down on contrived
examples I am combining them here.
Creating a service/controller in ES5
var myApp = angular; myApp; myApp;
Creating a service/controller with decorangles
; @@ { this$http = $http; } { return this$http; } @@ { myService; }
@Directive
@Directive(name)
creates a directive. The class will be instantiated and the resulting object will become the directive
definition object.
Creating a directive in ES5
var myApp = angular; myApp;
Creating a directive with decorangles
; @@ { thisrestrict = 'EA'; thisscope = {}; thisbindToController = id: '@' asset: '=' ; } @ { thisanchor = $anchorScroll; } { scope { $http; }; }
@Inject
@Inject(...dependencies)
will add an $inject annotation to your constructor or method. A dependency can either be a
string (just like in ES5) or a reference to a class that you want to inject. Note, if you use a reference to inject, the
injected class must be annotated with @Service or @Provider.
Dependency injection in ES5
var myApp = angular; myApp; myApp;
Dependency injection with decorangles
; @ ... @@ { this$http = $http; thismyService = myService; } { this$http; }
@AutoInject
@AutoInject(...dependencies)
is just like @Inject except that it will automatically attach the injected dependencies
into the instance so they can be used in methods. Note, this can only be used on classes, not on methods.
Using @Inject
; @ ... @@ { this$http = $http; thismyService = myService; } { this$http; }
Using @AutoInject
; @ ... @@ { this$http; //no constructor necessary }