Using ActiveJS with Angular doesn't require any special bindings or facade, you can treat ActiveJS as an extension of RxJS, and use it in the same way.

That being said, you should still try to follow the general guidelines regarding how you structure your code.

In addition to general guidelines, one thing specific to Angular is DI and Services. So. instead of directly exporting the Units and other ActiveJS constructs from a file, you put them in a Service.

Generally, you can keep all the ActiveJS constructs like Units and Streams together in a single Service, but as your App grows larger, it can become a little messy and you might run into cyclic dependencies pretty quickly, in order to avoid that, this is what ActiveJS recommends.

Ideally, you'd have two to three Services, 2 for State Management (ActiveJS) and 1 for general business logic or Angular related logic.

  1. [feature].state.ts The FeatureState Service holds our state objects, i.e.: Units, Actions, Systems, and Clusters.

  2. [feature].streams.ts The FeatureStreams Service contains all the side-effects built using Streams and Angular's HttpClient.

  3. [feature].service.ts The FeatureService is an optional Service, which can contain any custom logic depending on your use-case.

For example, if we have a feature called Auth, we would create 3 Services like this:

  1. auth.state.ts - with Service name AuthState

  2. auth.streams.ts - with Service name AuthStreams

  3. auth.service.ts - with Service name AuthService

For a complete implementation take a look at the example given in the AsyncSystem.

You can find even more examples in the Examples section.

Last updated