Angular framework is maturated and provides quite important functionalities in comparison to other competitors such as Vue.js and reactive.js. Personally, the separation of the codes is my favor, and mostly I don’t prefer to use the libraries that mixes CSS, HTML, JS codes, even they can provide more performance in some fields. Angular is well-constructed with its components and easy to maintain. Thanks to its features, it is actually a good candidate for the complex applications. If you plan to create a simple website than the angular can be cumbersome due to the long learning curve. However, its solid structure can be also an advantage for the future developments.
In this tutorial, my intention is to give a path for understanding how the elements of the angular framework can be used, how they are started and interact. As the framework itself is huge, I will explain step-by-step in subsequent tutorials.
Angular framework is designed for creating single-page applications that are composed of HTML and TypeScript languages. It is purely written in TypeScript and offers its functionality as a set of TypeScript libraries. The framework is composed of several entities that are designed for the specific roles and capabilities:
- Modules help to have better organized dependencies. The core concept of the angular application is to be modular and reusable to achieve the independent components. This decreases the development time as well as make the maintaining easy.
- Components aim at creating the applications structure and logic.
- Directives change the structure of the elements and give them new features as well as change behaviors
- Pipes represents the functions that shape data before it is rendered
- Services are the objects that fulfill a task such as accessing data in a database or in another service, and they are common objects that can be served all relevant components.
We will introduce all these entities below in detail.
How does angular start rendering an app?
The app bootstrapping process initiates the rendering process and the following figure illustrates all essential parts that play a crucial role during this process.
Apart from the loading process, the lifecycle of the application starts with the interaction of a user such as switching from a component to another one, their loading and rendering process, etc.
Components and Templates
Angular components is a way of forming the data structure of the application interface. The HTML template, which is an extended version of HTML notation, is connected with a component and enables the component to display the data within a web page. In this sense, we can see the together usage of the component and the template as a view in an android application. The data path between a component and a template is established through the so-called data binding or property binding. The controller element in a component embedded in the HTML page and any change in the data is directly reflected to the HTML page. In addition, the inputs from the user can be also bound to the component, an entered text can be directly mapped to an element in the controller. In order to increase the usability of HTML elements, directives can be also used to implement the logic in the templates, especially this can be used for the data which is not sent to the database.
A component and its “must” and optional relations to other elements can be depicted in the figure below. All these elements such as templates, directives, angular-specific controllers are converted to the HTML elements.
We categorized the items in a component as “must” and “optional”. The must components are the necessary items that have to be available. The optional components can be needed according to the desired functionality or feature. Below their descriptions and how they look like in a typical angular application is given:
@Component is used as a decorator for defining a component within the angular framework and register it with Angular. The controller corresponds to a class required for the component, and it inherits all parameters and methods for this component. The logic of the component ranging from the interaction with the user and retrieving data from an angular service is operated under this class. The template is where the directives and HTML elements are involved and the controller enables the interaction with these HTML elements, process the data and communicates with other platforms if needed. The last functionality can be also performed via an Angular Service.
In the figure below, the component decorator indicates the template URL as HTML file, selector is the name of the component, and it can be used as an HTML tag in the upper component and the styleURLs indicates an array of the style sheets files that will be applied on this component. The controller here is the class “ProductComponent” and takes over the whole functionality while interacting with the template.
Inputs and Provider and Hosts
@Input decorator is used to pass data (property binding) from parent to child component. The component property should be annotated with @Input decorator to act as input property. As an example, this page gives a detailed view for the input usage.
Providers and hosts are the services that can be served to the component. If HTTP communications or common data processing operations can be performed via Providers, since they can also be consumed by other services. The main idea is here to push the common functionalities under a service and enable their usage by several services. Furthermore, the background operations such as asynchronous executions can be also performed via services. Providers and hosts can be injected as a service into a component if it is not already loaded during the initiation of the app. The developers should consider the service injection in order to decrease the memory usage of the browser and make more efficient single page applications.
Lifecycle hooks, Styles and encapsulations, animations and outputs
Styles represents the CSS style files that are applied to the component. As each component style can be designed individually, this brings an isolation or encapsulation of the component design. When the styles will be involved in the application is managed by the component.
Animations are again a design oriented view and provides an animation ability to a component through the libraries to be involved in the application.
Outputs can be seen as data exchange or share points between other components. It is defined as a property and bound to events that can be interesting for other components.
The lifecycle of a component can rely on various hooks that puts the component in different state. The lifecycle enables a more structured component and defines what to be done at which hook. This can be quite important when the expected circumstances are fulfilled and something has to be performed at this stage. For example the initialization and close of a component, the changes, etc. The used methods in the controller for ensuring this functionality can be for instance OnInit, OnChanges, OnDestroy,…
Services are used for providing the functionalities that can be used commonly by components or other services. Some typical examples can be the login operations or communicating with a backend service that process the entered data by the user, or a simple weather service, or sharing a data among controllers through a service, etc. The number of the service examples can be well increased. The crucial point is here to figure out the service to be defined is enough common for all other components and is not the controller specific.
A service can be used for different purposes in the application and based on that d different service roles can be defined: i) injectable services work with Angular dependency injection mechanism and these can be injected in components.ii) non-injectable services do not use angular DI, rather they are involved in the app as a file. iii) Helper services define the common functionalities for components or simplifies the requested tasks in controllers. iv) Data services can be responsible for sharing the data among components.
The web pages are mostly composed of more than a single page and by clicking the links we can switch from one page to another. As Angular framework is built on the single page application, it created a “routing” concept that enables us to navigate between different views or contents. Angular solves the routing issue with a dedicated routing library to generate simple and complex navigation patterns. With the help of it, we can define the routes ourselves and switch among views. The following figure show us a simple routing examples that is composed of a single module and multiple nested components. The transition from a component to another for instance about to home is in this case possible. According to the application complexity, the modules can be also switches while navigating between views.
A simple visualization of the routing can be illustrated in the figure above. For a detailed insight in the angular routing, I highly recommend reading the following links, link1 and link2 , which describe the routing with examples:
Directives and Pipes
Directive are classes that changes the appearance or behavior of DOME elements and Angular components. @Directive decorator is used to define an angular directive. It has huge similarity to the components, therefore we can say a component can be an extended version of directives. During the rendering of the angular app, the DOM is adjusted according to the definition in the directives. The directive can be used as an attribute of an HTML tag.
Angular supports lots of directive and pipes from its framework that reduce the code repetition and increase the efficiency. ngFor and ngIf are the widely used directives. The first one can receive a list and render it as HTML elements according to the requested view, whereas the second one does the defined rule if some condition happens. Aside from this, especially the data manipulation such as transition from a currency value to another one, or reducing the digit number, formatting values, etc.
In general, the built-in directives and pipes may be sufficient for an application, however, if you need a special element that will be used in most of the view, it makes sense to create a pipe or a directive to facilitate the development process. Two approaches are available for custom directives: i) first one modifies the behavior of the component, ii) second one defines how an element should be added to a page. In order to format the data w.r.t the custom requirements a custom pipe can be implemented. The directives and pipes can turn the code in a more maintainable and reusable form thanks to well-defined small code blocks.
A simple usage of the directives can be read in this link.