View
595
Download
1
Category
Preview:
Citation preview
What you will learn
Know when to use a decorator
Know how Angular 2 uses decorators
Be able to create your own decorator
DecoratorsclassConnector{@logconnect(user:User){returnuser.login();}}
classUser{@secureprivatepassword:string;@notNullprivatename:string;...login():Q.Promise<any>{return...;}}
Decorators are not annotations
Decorators are metadata AND semantics
Java annotations are ONLY metadata
Annotation processing happens separatelyI like annotations better since behaviour is
independent from metadata. Separation of Concerns
Decorators are not annotations
Decorators are metadata AND semantics
Java annotations are ONLY metadata
Annotation processing happens separatelyI like annotations better since behaviour is
independent from metadata. Separation of Concerns
Java Devs, don’t get confused!
When should I use decorators?
They provide metadata
They specify extra behaviour
They implement cross-cutting concerns
Metadata@nonNull@nonEmpty@nullable@log@deprecated@notYetImplemented@readonly@precondition
Additionalbehaviour@toString@uniqueId@classifier@memoize@sortable
Metadata@nonNull@nonEmpty@nullable@log@deprecated@notYetImplemented@readonly@precondition
Additionalbehaviour@toString@uniqueId@classifier@memoize@sortable
CrossCutting@inject@component@view@priority@service@filter@entity
@private@internal@restricted@persisted@secure
Metadata@nonNull@nonEmpty@nullable@log@deprecated@notYetImplemented@readonly@precondition
Additionalbehaviour@toString@uniqueId@classifier@memoize@sortable
CrossCutting@inject@component@view@priority@service@filter@entity
@private@internal@restricted@persisted@secure
}Angular 2.0 Annotations
@Component
@Component({selector:'greet',template:'Hello{{name}}!',directives:[CustomDirective]})classGreet{name:string='World';}
By Matthew.landry at English Wikipedia, CC BY-SA 2.5, https://commons.wikimedia.org/w/index.php?curid=4398466
Class decorator
functionnuthin<TextendsFunction>(target:T):T{
//createconstructorletnewConstructor:T=...returnnewConstructor;}
Class decorator
functionnuthin<TextendsFunction>(target:T):T{
//createconstructorletnewConstructor:T=...returnnewConstructor;}
Original constructor
Class decorator
functionnuthin<TextendsFunction>(target:T):T{
//createconstructorletnewConstructor:T=...returnnewConstructor;}
Original constructor
Here be magic
Method decoratorfunctionnuthin(...args[]){return(target:Object,//instancekey:string,//methodnamedescriptor:any)=>{//propdescriptorreturn{//newpropdescriptor
value:function(...args:any[]){...}};};}
Method decoratorfunctionnuthin(...args[]){return(target:Object,//instancekey:string,//methodnamedescriptor:any)=>{//propdescriptorreturn{//newpropdescriptor
value:function(...args:any[]){...}};};}
Descriptor parameters
Method decoratorfunctionnuthin(...args[]){return(target:Object,//instancekey:string,//methodnamedescriptor:any)=>{//propdescriptorreturn{//newpropdescriptor
value:function(...args:any[]){...}};};}
Descriptor parameters
Function parameters
Method decoratorfunctionnuthin(...args[]){return(target:Object,//instancekey:string,//methodnamedescriptor:any)=>{//propdescriptorreturn{//newpropdescriptor
value:function(...args:any[]){...}};};}
Descriptor parameters
Function parameters
Here be magic
ResourcesAngular2 Decorators:
https://angular.io/docs/ts/latest/guide/cheatsheet.html
Typescript Decorators:
http://blog.wolksoftware.com/decorators-reflection-javascript-typescript
Code
Angular2 Starter:
https://github.com/angular-class/angular2-webpack-starter
TypeScript Decorators:
https://github.com/aeisenberg/typescript-decorators
Recommended