Sharing Top Content from the Angular-sphere.

TypeScript decorators & Angular2 Dependency Injection

  • And unfortunately, it was also possible to do this with implicit annotations which would cause minification to break your code.Angular2 with TypeScript dramatically improves on this by introducing a type based DI system where you just correctly specify the type of an injectable you want and Angular will handle the…
  • It’s not magic so lets take a look!TypeScript DecoratorsThe first piece of the puzzle is the @Injectable TypeScript decorator which marks a class as available for DI.
  • TypeScript decorators are a language feature which enables developers to use annotations to modify the behavior of classes, methods, and properties at run time.
  • And most importantly this metadata is accessible at runtime by userland JavaScript.Concretely, the Angular DI system uses this metadata to introspect the arguments that the constructor a class marked @Injectable requires.
  • In order to compile, you’ll need to enable the experimentalDecorators and emitDecoratorMetadata compiler flags, install the reflect-metadata package, and also use a recent version of TypeScript.If you compile and run it you should get the following output:Car { ex: [ Engine { maker: ‘Tesla’, displacement: 500 } ] }So as…

One of the biggest differences between Angular 1.5+ and 2 is the latter’s approach to dependency injection. Back on Angular 1.5 there were a couple of ways to configure dependency injection but they…

TypeScript decorators Angular2 Dependency InjectionOne of the biggest differences between Angular 1.5+ and 2 is the latter’s approach to dependency injection. Back on Angular 1.5 there were a couple of ways to configure dependency injection but they relied on naming things consistently. If you needed the “$http” service you had to specify that by specifying a configuration explicitly mentioning “$http”. And unfortunately, it was also possible to do this with implicit annotations which would cause minification to break your code.Angular2 with TypeScript dramatically improves on this by introducing a type based DI system where you just correctly specify the type of an injectable you want and Angular will handle the rest. But since TypeScript compiles to JavaScript and in doing so wipes any type information how can this DI system work? It’s not magic so lets take a look!TypeScript DecoratorsThe first piece of the puzzle is the @Injectable TypeScript decorator which marks a class as available for DI. TypeScript decorators are a language feature which enables developers to use annotations to modify the behavior of classes, methods, and properties at run time. Within Angular, the @Injectable annotation is “class annotation” which Angular uses to register information about the target class with the framework. The relevant framework code is in the packages/core/src/di namespace with the most interesting files being:Reading through the code is a bit challenging but the overall idea is that the framework keeps track of classes that have been annotated with @Injectable and then has a “get” method to…

TypeScript decorators & Angular2 Dependency Injection

Comments are closed, but trackbacks and pingbacks are open.