Angular - A Development Pattern
Learn about an FSM-based state transitions technique for developing robust Angular web applications.
Join the DZone community and get the full member experience.
Join For FreeThis 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
Pattern Steps
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 |
| DEFAULT | onload | processOnload() | onload_success | ONLOADSUCCESSVIEW |
| ONLOADSUCCESS | get_products | processGetProducts() | get_products_success | PRODUCTSVIEW |
| PRODUCTSVIEW | get_product_details | processGetProductDetails() | get_product_details_success | PRODUCTDETAILSVIEW |
| PRODUCTDETAILSVIEW | add_to_cart | processAddToCart() | add_to_cart_success | ADDTOCARTSUCCESSVIEW |
| ADDTOCARTSUCCESSVIEW | update_cartcount | processUpdateCartCount() | update_cart_count_success | UPDATACARTCOUNTSUCCESSVIEW |
| UPDATECARTCOUNTSUCCESSVIEW | get_cart | processGetCart() | get_cart_success | CARTVIEW |
| CARTVIEW | get_product_details | processGetProductDetails() | get_product_details_success | PRODUCTDETAILSFORCARTVIEW |
| PRODUCTSVIEW | add_product_form | processAddProductForm() | add_product_form_succcess | ADDPRODUCTFORMSUCCESSVIEW |
| ADDPRODUCTFORMSUCCESSVIEW | add_product | processAddProduct() | add_product_succcess | ADDPRODUCTSUCCESSVIEW |
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 app-events.enum.ts:
TypeScript
x
1
2
3
export enum AppEvent {
4
onload = "onload",
5
onload_success = "onload_success",
6
get_products = "get_products",
7
get_products_success = "get_products_success",
8
get_product_details = "get_product_details",
9
get_product_details_success = "get_product_details_success",
10
add_to_cart = "add_to_cart",
11
add_to_cart_success = "add_to_cart_success",
12
update_cartcount = "update_cartcount",
13
update_cartcount_success = "update_cartcount_success",
14
get_cart = "get_cart",
15
get_cart_success = "get_cart_success",
16
add_product = "add_product",
17
add_product_success = "add_product_success",
18
add_product_form = "add_product_form",
19
add_product_form_success = "add_product_form_success",
20
}
view-states.enum.ts:
TypeScript
x
1
export enum AppViewState {
2
DEFAULT = "DEFAULT",
3
ONLOADSUCCESSVIEW = "ONLOADSUCCESSVIEW",
4
PRODUCTSVIEW = "PRODUCTSVIEW",
5
PRODUCTDETAILSVIEW = "PRODUCTDETAILSVIEW",
6
ADDTOCARTSUCCESSVIEW = "ADDTOCARTSUCCESSVIEW",
7
UPDATECARTCOUNTSUCCESSVIEW = "UPDATECARTCOUNTSUCCESSVIEW",
8
CARTVIEW = "CARTVIEW",
9
PRODUCTDETAILSFORCARTVIEW = "PRODUCTDETAILSFORCARTVIEW",
10
ADDPRODUCTFORMSUCCESSVIEW = "ADDPRODUCTFORMSUCCESSVIEW",
11
ADDPRODUCTSUCCESSVIEW = "ADDPRODUCTSUCCESSVIEW"
12
}
And the state transitions are configured as const variables like state-transitions.ts:
TypeScript
x
1
/**
2
DEFAULT -> onload -> processOnload() -> onload_succcess -> ONLOADSUCCESSVIEW
3
ONLOADSUCCESSVIEW -> get_products -> processGetProducts() -> get_products_succcess -> PRODUCTSVIEW
4
PRODUCTSVIEW -> get_product_details -> processGetProductDetails() -> get_product_details_success -> PRODUCTDETAILSVIEW
5
PRODUCTDETAILSVIEW -> add_to_cart -> processAddToCart() -> add_to_cart_success -> ADDTOCARTSUCCESSVIEW
6
ADDTOCARTSUCCESSVIEW -> update_cartcount -> processUpdateCartCount() -> update_cartcount_success -> UPDATECARTCOUNTSUCCESSVIEW
7
UPDATECARTCOUNTSUCCESSVIEW-> get_cart -> processGetCart() -> get_cart_success -> CARTVIEW
8
CARTVIEW -> get_product_details -> processGetProductDetails() -> get_product_details_success -> PRODUCTDETAILSFORCARTVIEW
9
PRODUCTSVIEW -> add_product_form -> processAddProductForm() -> add_product_form_succcess -> ADDPRODUCTFORMSUCCESSVIEW
10
ADDPRODUCTFORMSUCCESSVIEW -> add_product -> processAddProduct() -> add_product_succcess -> ADDPRODUCTSUCCESSVIEW
11
*/
12
import { first } from 'rxjs/operators';
13
import { AppDataStore } from './app-data.store'
14
import { AppEvent } from './app-events.enum';
15
import { StateTransitionData } from './state-transitions.model';
16
import { AppRole, User } from './user.model';
17
import { AppViewState } from './view-states.enum';
18
19
export const AppPreEvents = {
20
onload: {
21
process: function (stData: StateTransitionData, appDataStore: AppDataStore): StateTransitionData {
22
if (stData.user) {
23
stData.postEvent = AppEvent.onload_success;
24
}
25
else {
26
//TODO: handle auth error
27
}
28
return stData;
29
}
30
},
31
get_products: {
32
process: function (stData: StateTransitionData, appDataStore: AppDataStore): StateTransitionData {
33
appDataStore.loadProducts();
34
stData.postEvent = AppEvent.get_products_success;
35
return stData;
36
}
37
},
38
get_product_details: {
39
process: function (stData: StateTransitionData, appDataStore: AppDataStore): StateTransitionData {
40
appDataStore.loadProduct(stData.productId);
41
stData.postEvent = AppEvent.get_product_details_success;
42
return stData;
43
}
44
},
45
add_product_form: {
46
process: function (stData: StateTransitionData, appDataStore: AppDataStore): StateTransitionData {
47
if (stData.user.appRoles.includes(AppRole.ADMIN)) {
48
stData.postEvent = AppEvent.add_product_form_success;
49
}
50
else {
51
//TODO: handle authorization error
52
}
53
return stData;
54
}
55
},
56
add_product: {
57
process: function (stData: StateTransitionData, appDataStore: AppDataStore): StateTransitionData {
58
if (stData.user.appRoles.includes(AppRole.ADMIN)) {
59
stData.product = appDataStore.addProduct(stData.product);
60
stData.postEvent = AppEvent.add_product_success;
61
}
62
else {
63
//TODO: handle authorization error
64
}
65
return stData;
66
}
67
},
68
add_to_cart: {
69
process: function (stData: StateTransitionData, appDataStore: AppDataStore): StateTransitionData {
70
appDataStore.addToCart(stData.productId);
71
stData.postEvent = AppEvent.add_to_cart_success;
72
return stData;
73
}
74
},
75
update_cartcount: {
76
process: function (stData: StateTransitionData, appDataStore: AppDataStore): StateTransitionData {
77
stData.postEvent = AppEvent.update_cartcount_success;
78
return stData;
79
}
80
},
81
get_cart: {
82
process: function (stData: StateTransitionData, appDataStore: AppDataStore): StateTransitionData {
83
stData.postEvent = AppEvent.get_cart_success;
84
return stData;
85
}
86
},
87
}
88
89
export const AppPostEvents = {
90
onload_success: {
91
nextState: function (stData: StateTransitionData, appDataStore: AppDataStore): StateTransitionData {
92
stData.finalState = AppViewState.ONLOADSUCCESSVIEW;
93
return stData;
94
}
95
},
96
get_products_success: {
97
nextState: function (stData: StateTransitionData, appDataStore: AppDataStore): StateTransitionData {
98
stData.finalState = AppViewState.PRODUCTSVIEW;
99
return stData;
100
}
101
},
102
get_product_details_success: {
103
nextState: function (stData: StateTransitionData, appDataStore: AppDataStore): StateTransitionData {
104
if (stData.initState === AppViewState.PRODUCTSVIEW) {
105
stData.finalState = AppViewState.PRODUCTDETAILSVIEW;
106
}
107
else if (stData.initState === AppViewState.CARTVIEW) {
108
stData.finalState = AppViewState.PRODUCTDETAILSFORCARTVIEW;
109
}
110
return stData;
111
}
112
},
113
add_to_cart_success: {
114
nextState: function (stData: StateTransitionData, appDataStore: AppDataStore): StateTransitionData {
115
stData.finalState = AppViewState.ADDTOCARTSUCCESSVIEW;
116
return stData;
117
}
118
},
119
update_cartcount_success: {
120
nextState: function (stData: StateTransitionData, appDataStore: AppDataStore): StateTransitionData {
121
stData.finalState = AppViewState.UPDATECARTCOUNTSUCCESSVIEW;
122
return stData;
123
}
124
},
125
get_cart_success: {
126
nextState: function (stData: StateTransitionData, appDataStore: AppDataStore): StateTransitionData {
127
stData.finalState = AppViewState.CARTVIEW;
128
return stData;
129
}
130
},
131
add_product_form_success: {
132
nextState: function (stData: StateTransitionData, appDataStore: AppDataStore): StateTransitionData {
133
stData.finalState = AppViewState.ADDPRODUCTFORMSUCCESSVIEW;
134
return stData;
135
}
136
},
137
add_product_success: {
138
nextState: function (stData: StateTransitionData, appDataStore: AppDataStore): StateTransitionData {
139
stData.finalState = AppViewState.ADDPRODUCTSUCCESSVIEW;
140
return stData;
141
}
142
}
143
}
144
145
export function doTransition(appDataStore: AppDataStore, stData: StateTransitionData): StateTransitionData {
146
appDataStore.state$.pipe(first(),).subscribe(ad => {
147
stData.user = ad.user;
148
});
149
stData = AppPreEvents[stData.preEvent].process(stData, appDataStore);
150
stData = AppPostEvents[stData.postEvent].nextState(stData, appDataStore);
151
return stData;
152
}
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.
app-data.store.ts
TypeScript
xxxxxxxxxx
1
79
1
import { Injectable } from '@angular/core';
2
import { Store } from 'rxjs-observable-store';
3
import { AppData } from './state-transitions.model';
4
import { ProductsService } from '../product/products.service';
5
import { AppViewState } from './view-states.enum';
6
import { Product } from '../product/product.model';
7
import { UserService } from './user.service';
8
import { User } from './user.model';
9
import { first } from 'rxjs/operators';
10
11
/**
12
* This class will serve as a central data store for all the data used in the application.
13
* This class allso manages when to persist/refresh data to/from the backend,
14
* and when to persist/refresh from localStorage etc.
15
*
16
* This class is currently using the [rxjs-observable-store]{@link https://github.com/georgebyte/rxjs-observable-store} utility.
17
*/
18
@Injectable({
19
providedIn: 'root'
20
})
21
export class AppDataStore extends Store<AppData>{
22
23
constructor(private userService: UserService,
24
private productsService: ProductsService) {
25
super(new AppData());
26
//initialize the user
27
this.initUser();
28
}
29
30
initUser() {
31
//TODO: get authenticated user from localStorage or from login
32
const user: User = new User();
33
user.id = "admin-user";
34
this.userService.getUserRoles(user.id).pipe(first(),).subscribe(ur => {
35
user.appRoles = ur;
36
this.state.user = user;
37
});
38
}
39
40
loadProducts(): void {
41
if (this.state.products.length === 0) {
42
this.productsService.getProducts().pipe(first(),).subscribe(products => this.setState({
43
this.state,
44
products: products
45
}));
46
}
47
}
48
49
loadProduct(productId: number) {
50
//TODO: call the productService to get product details
51
const _product: Product = this.state.products.find(cp => cp.id === productId);
52
this.setState({
53
this.state,
54
product: _product
55
});
56
}
57
58
addProduct(product: Product): Product {
59
this.productsService.addProduct(product).pipe(first(),).subscribe(p => this.setState({
60
this.state,
61
products: [this.state.products, p]
62
}));
63
return product;
64
}
65
66
addToCart(productId: number) {
67
//add only if not already in the cart
68
if (!this.state.cartProducts.find(cp => cp.id === productId)) {
69
const product: Product = this.state.products.find(cp => cp.id === productId);
70
if (product) {
71
this.setState({
72
this.state,
73
cartProducts: [this.state.cartProducts, product]
74
});
75
}
76
}
77
}
78
}
The app-data.store.ts uses 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.
state-transitions.model.ts
TypeScript
x
20
1
import { Product } from '../product/product.model';
2
import { User } from './user.model';
3
4
export class AppData {
5
user: User = new User();
6
products: Product[] = [];
7
cartProducts: Product[] = [];
8
product: Product = new Product();
9
}
10
11
export class StateTransitionData {
12
user: User;
13
productId: number;
14
product: Product;
15
initState: string;
16
finalState: string;
17
preEvent: string;
18
postEvent: string;
19
}
20
Where the User data model is user.model.ts:
TypeScript
x
1
export class User {
2
id: string = "";
3
appRoles: string[] = [];
4
}
5
export enum AppRole {
6
ADMIN = "ADMIN",
7
CUSTOMER = "CUSTOMER"
8
}
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.ts and products.component.html are shown below. The source for the other components can be viewed in GitHub.
products.component.ts
TypeScript
x
1
import { Component, OnInit } from '@angular/core';
2
import { ActivatedRoute, Router } from '@angular/router';
3
import { Observable } from 'rxjs';
4
5
import { AppDataStore } from '../../state-transitions/app-data.store';
6
import { AppEvent } from '../../state-transitions/app-events.enum';
7
import { doTransition } from '../../state-transitions/state-transitions';
8
import { AppData, StateTransitionData } from '../../state-transitions/state-transitions.model';
9
import { AppViewState } from '../../state-transitions/view-states.enum';
10
11
@Component({
12
selector: 'app-products',
13
templateUrl: './products.component.html',
14
styleUrls: ['./products.component.css']
15
})
16
export class ProductsComponent implements OnInit {
17
18
appData$: Observable<AppData>;
19
viewState: string = AppViewState.ONLOADSUCCESSVIEW;
20
errorMessage: string;
21
stData: StateTransitionData;
22
23
constructor(private appDataStore: AppDataStore, private router: Router,
24
private activatedRoute: ActivatedRoute) { }
25
26
ngOnInit(): void {
27
this.stData = new StateTransitionData();
28
this.stData.preEvent = AppEvent.get_products;
29
this.stData = doTransition(this.appDataStore, this.stData);
30
if (this.stData.finalState !== AppViewState.PRODUCTSVIEW) {
31
this.router.navigate(['/**'])
32
}
33
this.appData$ = this.appDataStore.state$;
34
}
35
36
addProduct() {
37
this.router.navigate(['/add-product-form', {fromView: AppViewState.PRODUCTSVIEW}]);
38
}
39
}
products.component.html
HTML
x
10
1
<div class="error">{{errorMessage}}</div>
2
<h4>List of Products</h4>
3
4
<div *ngFor="let product of (appData$ | async).products;">
5
<a [routerLink]="['/product', product.id, {fromView: 'PRODUCTSVIEW'}]" routerLinkActive="active">{{product.name}}</a>
6
</div>
7
<p> </p>
8
<p>
9
<button *ngIf="stData.user.appRoles.includes('ADMIN')" (click)="addProduct()" routerLinkActive="active">Add Product</button>
10
</p>
4. Create Angular Routes for Each Pre-Event
This is a normal Angular routes configuration done in app-routing.module.ts:
TypeScript
x
1
import { NgModule } from '@angular/core';
2
import { RouterModule, Routes } from '@angular/router';
3
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
4
import { HomeComponent } from './home/home.component';
5
import { ProductsComponent } from './product/products/products.component';
6
import { ProductDetailsComponent } from './product/product-details/product-details.component';
7
import { CartComponent } from './cart/cart.component';
8
import { AddToCartComponent } from './product/add-to-cart/add-to-cart.component';
9
import { AddProductComponent } from './product/add-product/add-product.component';
10
import { AddProductFormComponent } from './product/add-product-form/add-product-form.component';
11
import { CartButtonComponent } from './cart/cart-button/cart-button.component';
12
13
const appRoutes: Routes = [
14
{
15
path: 'products',
16
component: ProductsComponent
17
},
18
{
19
path: 'product/:id',
20
component: ProductDetailsComponent
21
},
22
{
23
path: 'add-product',
24
component: AddProductComponent
25
},
26
{
27
path: 'add-product-form',
28
component: AddProductFormComponent
29
},
30
{
31
path: 'add-to-cart',
32
component: AddToCartComponent
33
},
34
{
35
path: 'cart-button',
36
component: CartButtonComponent
37
},
38
{
39
path: 'cart',
40
component: CartComponent
41
},
42
{ path: 'home', component: HomeComponent },
43
{ path: '', redirectTo: '/home', pathMatch: 'full' },
44
{ path: '**', component: PageNotFoundComponent }
45
];
46
47
@NgModule({
48
imports: [
49
RouterModule.forRoot(appRoutes)
50
],
51
exports: [
52
RouterModule
53
]
54
})
55
export class AppRoutingModule { }
56
Demo
A demo of the app developed using the pattern can be viewed here where all the transitions listed above can be tested.
Benefits
- 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:
Plain Text
x
1
DEFAULT -> onload -> processOnload() -> onload_auth_error -> LOGINFORMVIEW
2
LOGINFORMVIEW -> login -> processLogin() -> login_success -> ONLOADSUCCESSVIEW
...and proceed with the remaining pattern steps.
- Guard conditions like isLoggedIn or isAuthorized, etc. are easily checked in one place - the
state-transitions.tsfile. - The use of one component per pre-event helps in keeping the codebase modular and easily maintainable.
Conclusion
The proposed Angular development pattern is shown to offer several benefits that could ease the development process.
Related Articles
Interested readers can check out the state transitions technique applied to Spring Boot projects in this previous DZone article.
Topics:
angular,
finite state machine,
state transitions,
development patterns,
spa,
web dev,
tutorial
Opinions expressed by DZone contributors are their own.
Comments