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 Basics

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:

Angular Elements
  • 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.

Bootsrapping Porcess of an Angular App (inspired from Angular in Action)

Before initiation of all application, Angular CLI builds and compile all Javascript codes via webpack, and append them to the index.html. Once the web page, index.html, is called, the bootstrapper is initiated in order to start Angular. Whenever Angular is started, the App module is loaded and reads all dependencies. This is followed by the render of the App component that is the root of the application. If the App component is a tree of components, then all other components are also rendered. In the meantime, the bindings between controller and templates are established. Finally, the whole parts of the code is rendered.

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.

Angular component and its relations to other component inspired from Angular in Action

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 Requirements

@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.

Component Code and Component Visualization

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,…

Angular Lifecycle

Services

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.

Routing

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.

Angular Routing

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.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store