[WP] 05.06.2023 | angular-intro

fig 1.1 angular application structure overview

    Recently I have been re-writing one of my side projects using another js framework. Originaly written in react, after several days and long hours of scrolling and prompting it was re-shaped to Angular version. In this blog post I want to summarize the stuff I have learned about javascript frontend framework developed by Google .

There are only class components. No function component nor hooks available in angular. Moreover it requires developer to use typescript straightaway without support for vanillla js which make it less available for beginners. Angular has no dedicated syntax such as jsx/tsx which enables to combine template, controller and styles within single file. It divides the responsibilities to separate view-template.html file and component.ts file which contains logic. It is a good moment to mention that re-renders of the ui uses diferent technique under the hood.

Angular utilizes incremental DOM mechanism as opposed to virtual DOM used in React or Vue. There are several layers of organization in angular app. The most basic is component. It is a set of four files: name-component.html, name-component.scss, name-component.ts and name-component.spec.ts(unit testing of components with jasmine). Several components which implement one functionality may be collected in ngModule. Complicated logic connected with ajax requests or db queries should be contained in Services. To create new component or service we can utilize pre-made cli script by typing ng g c <component_name> or ng g s <service_name>.

Unlike react Angular allows bi-directional data flow. Not only props may be drilled down from parent to child but also children may emit events via EventEmitter instance which may be listened and handled by parents. The main way to share data between two components is lifting the state up into the Services. The components may read and somehow modify values included in the service. Lets dive into the complexity of state management in angular…

fig 1.2 rxjs library contents chart

Rxjs is a most common library implementing reactive programming concepts and so called observer pattern. Angular is widely utilizing rxjs solutions in its flow. But what is rxjs about? It is about observables. By definition it is stream of data that may be observed over time. There are three important words in this definition. Firstly it is a stream – it means it is fluent, it has its dynamics. Secondly it may be observed – there are means to check what is current state of observable and last but not least all of this things happen over time so we can presume that we will be dealing with asynchronou behaviour.

To be more pragmatic. We can create observable, we can subscribe to it /observe/check what is happening from one or more components of our application. Observable comes in several variations. Subject is special type of observable that allows to use .next() method and manually push values to observable(subject) to be seen by all subscribers. Subject is has characteristics of both observable and observer. Subject has also special type which is behavioral subject which „remembers” and allows to retrieve by .get() method last value which was passed into an observable.

On the ground of angular app observables defined within services and shared are used to read write and manipulate application state with good synchronisation as all subscribers get the state from the same source.

to be continued in part 2

Till next time

gmarcin