Angular — Using service as a single source of truth for highly coupled page components
Pages refer to the outermost components that combine multiple smaller components to form the views for users. They are usually the least generic component among the whole code base. In order to suit the very specific UI/UX requirements, it is very common for pages to have clumsy logic across multiple smaller page components, which create strong coupling. These codes are difficult to maintain and develop as states and logic are all interdependent. Here I would like to introduce how we can use a service to maintain a single source of truth, which can highly reduce the code complexity.
Example
Say we are going to implement a product overview page, which consists of three smaller components: a filter, a grid and a pagination bar. The filter is for user to setup some criteria for the display of data. The grid is to visualize the data and also let user to apply sorting. The pagination bar is for travelling between pages of data.
The major challenge of implementing this kind of highly coupled pages is about the management of states and shared logic. Each component above need to access the state belonged to the other one. For example, the filter needs to reset the page to 1 when changing criteria, the gird needs to know the current criteria and page…
