ng-classes
Base classes for object-oriented Angular 1.x units, tailored with DI in mind.
Come in ES2015 (ES6), ES2016 (ES7) and TypeScript flavours.
Flavours
ES2015 (ES6)
;
or
let ngClasses = ;let NgBase = ngClassesNgBase;
ES2016 (ES7)
;
TypeScript
;
Compatibility
NgProvider
and NgDirective
classes use ES5 getters/setters (IE9+) to substitute methods in children.
NgProvider
uses Function.prototype.bind
(IE9+) to supply its instance to NgProviderInstance
.
ES2016/TS decorators call for ES5 getters/setters.
factory
uses Object.getOwnPropertyNames
and Object.getOwnPropertyDescriptor
(IE9+), also Object.getPrototypeOf
and Object.setPrototypeOf
(IE11) for able-bodied support of static property inheritance.
Dependency injection
@inject
decorator (ES2016/TS)
Can be used to annotate classes and class members.
; @ { super...deps; this$$logProvider…; } @ …
$inject
static property
static $inject = '$logProvider'; …
Class instantiation
@factory
decorator (ES2016/TS)
Allows to feed classes to Angular units that expect factory functions. Unicontroller
and service
may benefit from this, too, in the case of instantiation problems (applicable to pre-1.5 Angular with native classes).
Replaces a class with wrapper function that instantiates it. Wrapper properties are prototypically inherited from class if Object.setPrototypeOf
is supported, otherwise they are copied (all properties from the class and enumerable properties from its parents). This may cause inheritance issues in older JS engines, particularly if static properties are changed after class declaration, or parent classes have non-enumerable static properties.
All children classes of a decorated class will inherit from wrapper function, not a class itself.
Should be used in the first place, before @inject
and other class decorators. The decorators are executed in reverse order of their appearance, a factory wrapper and not original class will be decorated otherwise.
; {} Object; // Preferably a final class@factory@ static staticProp = 'Available as JoeDirective.staticProp and this.constructor.staticProp'; { super...deps; // this.constructor !== JoeDirective thisconstructorlateStaticProp = 'May not be available as JoeDirective.lateStaticProp'; } // Commonly does not require a factory wrapper … angular ;
factory
function
The same function can be also used as a helper but has no inherent side effects of @factory
decorator.
…angular ;
$factory
static method
Provides the same functionality for base classes as factory
function.
…angular ;
ng-classified
extension
Base classes have $classify
property and are compatible with ng-classified
, no additional instantiation measures are necessary.
;; … … angular ;
Classes
ng-classes
- ng-classes
- ~NgBase
- new NgBase(...deps)
- .$inject :
Array.<string>
- .$classify
- .$factory() ⇒
function
- ~NgProvider ⇐
NgBase
- .$get ⇒
function
- .$get ⇒
- ~NgProviderInstance ⇐
NgBase
- ~NgDirective ⇐
NgBase
- ~NgTemplate ⇐
NgBase
- .toString() ⇒
string
- .valueOf() ⇒
string
- .toString() ⇒
- ~NgBase
ng-classes~NgBase
Base class for Angular units.
Child classes are supposed to be supplied into most places that feature Angular DI - controllers, config
and run
blocks, factory
and service
services, etc.
Kind: inner class of ng-classes
- ~NgBase
- new NgBase(...deps)
- .$inject :
Array.<string>
- .$classify
- .$factory() ⇒
function
new NgBase(...deps)
Param | Type | Description |
---|---|---|
...deps | * |
Injected dependencies |
Array.<string>
NgBase.$inject : Annotates class constructor for Angular injector.
Kind: static property of NgBase
Default: []
Access: public
NgBase.$classify
Provides support for ng-classified.
Kind: static constant of NgBase
Default: true
Access: public
function
NgBase.$factory() ⇒ Creates an annotated class wrapper which is supplied to Angular injector.
Kind: static method of NgBase
Returns: function
- Factory function that returns a new class instance.
Access: public
NgBase
ng-classes~NgProvider ⇐ Base class for Angular service providers.
Accepts a child of NgProviderInstance class as $get
value to be instantiated as service instance.
Kind: inner class of ng-classes
Extends: NgBase
function
ngProvider.$get ⇒ $get
getter/setter.
Dispathes factory function from/to _$get
.
Kind: instance property of NgProvider
Access: public
NgBase
ng-classes~NgProviderInstance ⇐ Base class for Angular provider
service instances
Kind: inner class of ng-classes
Extends: NgBase
new NgProviderInstance(provider, ...deps)
Param | Type | Description |
---|---|---|
provider | NgProvider |
Provider class instance. |
...deps | * |
Injected dependencies. |
NgBase
ng-classes~NgDirective ⇐ Base class for Angular directives
Kind: inner class of ng-classes
Extends: NgBase
- ~NgDirective ⇐
NgBase
string
ngDirective.restrict : Restricts directive declaration, forces the defaults in Angular 1.2.x for consistency.
Kind: instance property of NgDirective
Default: "EA"
Access: public
function
ngDirective.compile ⇒ compile
getter/setter.
Puts original function to _compileFn
and returns _compile
wrapper.
Kind: instance property of NgDirective
Access: public
NgBase
ng-classes~NgTemplate ⇐ Base class for Angular component
templates
Kind: inner class of ng-classes
Extends: NgBase
- ~NgTemplate ⇐
NgBase
- .toString() ⇒
string
- .valueOf() ⇒
string
- .toString() ⇒
string
ngTemplate.toString() ⇒ Shadows Object.prototype.toString
method.
Affects object conversion when a string is expected (DOM assignments, String.prototype
methods).
Kind: instance method of NgTemplate
Access: public
string
ngTemplate.valueOf() ⇒ Shadows Object.prototype.valueOf
method.
Affects type conversion (string operators, non-strict equality).
Kind: instance method of NgTemplate
Access: public
Usage
As shown in this demo app,
<body>
<joe-directive>Directive can be DI-powered class</joe-directive>
<joe-component>Component's template function can be DI-powered class as well</joe-component>
</body>
bootstrap.js
;; angular;
app.js
;; name;
joe-provider-complex.js
; // Decorators are executed in reverse order of their appearance.// @factory should come first.@factory@ { return this$$logProvider; } $get = JoeProviderComplexInstance; @ { // Provider object, passed to constructor and available as this.$provider this$provider; // Injected $log, passed to constructor and available as this.$.$log let $log = this$; $log; $log; return 'Logging with joeProviderComplex instance' + flag && ' with no debugging'; } name;
joe-provider-basic.js
; // Provider can be defined with NgBase instead of NgProvider/NgProviderInstance { logService; } // and having a single class for provider and instance can be tedious @ this; // but provider instance result can return any value, // no toString/valueOf shadowing in class is required. return 'Logging with joeProviderBasic instance'; ; // 'factory' helper function is the alternative to '@factory' decorator. name;
joe-controller.js
;;; // No @factory is necessary for instantiated units.@ { super...deps; thismessageBasic = this$joeProviderBasic; thismessageComplex = this$joeProviderComplex; } name;
joe-directive.js
;; template = `<div> <h1>joe-directive</h1> <h2 ng-transclude></h2> <p></p> <p></p></div> `; transclude = true; controller = 'JoeController'; controllerAs = 'vm'; { thismessageCompile = 'compile'; } { ctrlmessagePreLink = 'pre-link'; } { ctrlmessagePostLink = 'post-link'; let text = thismessageCompile ctrlmessagePreLink ctrlmessagePostLink; text += ' functions can coexist on DDO'; element } // $factory() method does the same job as '@factory' decorator and 'factory' helper function name;
joe-component.js
; template = JoeComponentTemplate; @ { super...deps; let text = this$$elementtext; // The instance is converted to $template value with shadowed toString() and valueOf(). this$template = `<div> <h1>joe-component</h1> <h2></h2></div> `; } // Components don't do DI, the class can be just 'new'ed. name;