Angular – A Development Pattern
This article proposes a development pattern for Angular applications (SPAs). The pattern uses an FSM-based state transitions technique. The benefits of this pattern are discusssed at the end of the article.
A Sample App
The sample app considered for illustrating the pattern has views like those shown here where the user can perform the following actions:
- View a list of products
- View the product details
- Add a product to the cart
- View the cart items count
- View the cart items
- If Admin, can add one or more products
The pattern suggests the following steps.
1. Capture the State Transitions
The pattern suggests capturing the SPA’s requirements into a set of state transitions. For the views in the sample app, the following state transitions are considered:
|Initial State||Pre-Event||Process||Post-Event||Final State|
Please note that the error conditions like add_product_error, etc. are not considered in the above list but can be easily added as additional state transitions where needed. The pre-events in the above list are user-initiated except update_cartcount, which is an internal system event.
2. Configure the Events, View States, and Transitions
After generating the base application code using the Angular CLI command, the following configuration classes are added.
The events and view states are configured in TypeScript enums like
And the state transitions are configured as const variables like
All the core functionalities of the pattern are implemented in the
state-transitions.ts file. The const variable
AppPreEvents configures the process function for each pre-event. The process functions prepare the data needed by each component by calling the methods in
AppDataStore, which is a central datastore for the whole app. The process methods, when complete, raise post-events which in turn are handled by the
AppPostEvents to return the final state. This demo is currently using the RxJS based framework rxjs-observable-store. This can be easily replaced with NgRx or similar frameworks. The
StateTransitionData is a model class. The
doTransition() is a utility function to call the process methods. The
state-transitions.ts file also has the guard conditions like whether the uer is logged in or whether the user is authorized to access the process method, etc.
AppData as its model and acts as a single source of truth for the whole application. It can handle scenarios like which data may be pre-fetched for performance, which data may be stored in localStorage or sessionStorage, when to call the REST service, etc.
User data model is
3. Create Angular Components
For each of the pre-events, an Angular component is generated and updated to call the
doTransition function in the
state-transitions.ts file. The components generated are home.component.ts, products.component.ts, product-details.component.ts, add-to-cart.component.ts, add-product-form.component.ts, add-product.component.ts, cart.component.ts, and cart-button.component.ts. The source for
products.component.html are shown below. The source for the other components can be viewed in GitHub.
4. Create Angular Routes for Each Pre-Event
This is a normal Angular routes configuration done in
A demo of the app developed using the pattern can be viewed here where all the transitions listed above can be tested.
- The pattern provides a clear guideline when a new feature need to be added. For instance, if a new requirement like “if the user is not logged in then redirect to login page” need to be be added then the developer can proceed by writing additional state transitions like:
…and proceed with the remaining pattern steps.
- Guard conditions like isLoggedIn or isAuthorized, etc. are easily checked in one place – the
- The use of one component per pre-event helps in keeping the codebase modular and easily maintainable.
The proposed Angular development pattern is shown to offer several benefits that could ease the development process.
Interested readers can check out the state transitions technique applied to Spring Boot projects in this previous DZone article.
Credit: Source link