LogoLogo
  • Introduction
  • Intro
    • 🚀Getting Started
    • Key Characteristics
    • Fundamentals
    • Motivation
  • Fundamentals
    • 💾Units
      • BoolUnit
      • NumUnit
      • StringUnit
      • DictUnit
      • ListUnit
      • GenericUnit
    • 🤝Systems
      • AsyncSystem
      • Custom AsyncSystem
    • 🤜Action
    • 📦Cluster
  • 🔨Utilities
    • Stream
    • Selection
  • Integrations
    • Angular
    • React
      • useObservable Hook
      • useUnit Hook
  • 📖Guides
    • Configuration
    • Nesting
    • Events
    • Typings
    • Caching
    • Persistence
    • Immutability
    • Freeze and Mute
    • Development Environment
    • General Guidelines
  • More
    • 👀Examples
    • ✍️Articles
Powered by GitBook
On this page

Was this helpful?

  1. Integrations

Angular

PreviousSelectionNextReact

Last updated 4 years ago

Was this helpful?

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 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 and 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.: , , , and .

  2. [feature].streams.ts The FeatureStreams Service contains all the side-effects built using 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 .

You can find even more examples in the section.

general guidelines
Units
Streams
Units
Actions
Systems
Clusters
Streams
AsyncSystem
Examples