Dependency Injection

A complete example Tabris.js application that uses data dependency injection can be found here.


Tabris provides a decorators-based dependency injection via the 'tabris-decorators' extension, which has to be installed in addition to the tabris module:

npm install tabris-decorators

This extension works only with TypeScript/JSX projects. Mixed projects work as well, but the modules using the extension need to be .ts or .tsx files. It’s strongly recommended to familiarize yourself with the basic decorators syntax if you aren’t already.

Basic Principles

The core idea behind dependency injection is that any object (the “client”) that needs to interact with another object (the “service”) should not be responsible for the creation or management of that other object. Instead it is “injected” by a third party. For Tabris.js this “third party” can be the Injector provided by tabris-decorators.

Most of the time there is no need to interact with the injector directly. Instead, decorators can be used to both register classes for injection and to inject them via a constructor parameter. However, the initial object of any dependency tree (usually something that kickstarts the application) always needs to be created explicitly.

The Tabris dependency injection service is integrated with the JSX API. Any class (usually custom UI components) that is instantiated vis JSX will have its registered dependencies resolved automatically with no additional code.

The Decorators

The following data binding related decorators are exported by tabris-decorators: