19 concepts you need to learn to become an effective Angular developer

Original author: Aphinya Dechalert
  • Transfer
The front-end TODO application is the same as the “Hello world" in normal programming. When creating TODO applications, you can study the implementation of CRUD operations using one or another framework. But often such projects only very superficially relate to what the framework actually knows.

If you look at Angular, you get the feeling that this framework is constantly changing and updating. In fact, with regard to Angular, we can highlight some ideas that remain unchanged. The material, the translation of which we publish today, provides an overview of the basic Angular concepts that you need to understand in order to properly and efficiently use the capabilities of this framework.



To learn Angular, you need to learn a lot. Many developers get stuck in the early stages of developing Angular. This is due to the fact that they do not know where to go, or do not know what keywords they should look for information that will allow them to take a step forward. The author of this material says that when she began to learn Angular 2+, she would like her to come across a guide to this framework similar to this.

1. The modular architecture of Angular


In theory, Angular applications can be created by putting all the code on one page, in one huge function. But to do so, on the one hand, is not recommended, and on the other, this approach cannot be called effective from the point of view of structuring the code. In addition, this makes sense of the very existence of Angular.

Angular, as part of its framework architecture, makes extensive use of the concept of modules. A module is a piece of code whose existence has only one reason. In general, we can say that Angular applications are assembled from modules. Some modules are used only in one place of the application, some in different places.

There are many ways to structure modules within an application. In addition, the study of various architectural patterns helps to understand how to organize the structure of the application with an aim to scale it during its growth. In addition, prudent use of modules helps isolate code and prevent code duplication in a project.
The following subsection will provide examples of queries by which you can search for additional materials on this topic. Such subsections will be found in other sections of this material.

▍Search Queries


  • Angular architecture patterns.
  • Scalable Angular application architecture.

2. One-way data flow and immutability


Many developers using Angular 1 liked the concept of two-way binding. This, in fact, was one of the attractive qualities of Angular. But over time, as Angular applications became more complex, it became clear that two-way binding creates performance problems.

It turned out that two-way binding, in fact, is not necessary so often.
In Angular 2+, you can still use two-way binding, but only when the developer explicitly expresses his intention to use this feature. This approach makes those who write application code think about the direction of data flows. This, in addition, allows for more flexible work with data. Flexibility is achieved through the ability to customize exactly how data should be moved in the application.

▍Search Queries


  • Angular data flow best practices.
  • Uni-directional flow in Angular.
  • Advantages of one way binding.

3. Attribute and structural directives of Angular


A directive is an extension of HTML through custom elements. Attribute directives, or attributes, allow you to change the properties of elements. Structural directives allow you to influence the content of pages by deleting elements from the DOM or adding them to the DOM.
For example - ngSwitchand ngIf- these are structural directives, since they evaluate the parameters passed to them and determine whether or not certain parts of the DOM should be present in the document.

Attributes are mechanisms for changing the standard behavior of elements, customizable by the programmer.

Learning how to use these two kinds of directives will help expand the capabilities of your application and reduce the amount of duplicate code. Attribute directives, in addition, can help in highlighting some templates for changing elements that are used in different places of the application.

▍Search Queries


  • Angular attribute directives (Angular attribute directives).
  • Angular structural directives.
  • Angular structural directive patterns.

4. Component life cycle methods


Each piece of code has its own life cycle, which determines how something is created, displayed on the screen, and then disappears. Angular has a concept called a component’s life cycle. It looks something like this:

  • Creature.
  • Rendering
  • Rendering child components.
  • Check for changes to data-related properties.
  • Destruction.
  • Removing from the DOM.

The programmer has the opportunity to intervene in the component at key moments in this cycle, focusing, for example, on certain events. This allows you to customize how the program behaves at various points in the component life cycle.

For example, you may need to load some data before the page is displayed. This can be done in the component life cycle method ngOnInit(). Or, perhaps at some point in the application, you need to disconnect from the database. You can do this in the method ngOnDestroy().

▍Search Queries


  • Angular life cycle hooks.
  • Component life cycle.

5. HTTP Services and Observable Objects


What we are talking about here is more likely not related to the special features of Angular, but to ES7. It just so happened that in Angular, work with Observable objects is implemented at the framework level. Similar mechanisms exist in React, Vue, and other JavaScript-based libraries and frameworks.

Observable objects are patterns that help you work efficiently with data in event-based systems. In order to effectively develop Angular applications, you need to know how to use HTTP services and Observable objects.

▍Search Queries


  • JavaScript observable patterns (JavaScript Observable Object Templates).
  • Angular HTTP and observables (HTTP and Observable objects in Angular).
  • ES7 observable feature (Observable objects in ES7).

6. Smart and stupid components


Many, developing Angular-applications, strive to put in everything that is needed for the operation of these components. True, this is not quite something that could be recommended for practical use. The idea of ​​using “smart” and “stupid” components in Angular is a concept that, perhaps, should be talked about more often than they are talking about now, especially in the circles of novice developers.

Whether the component is smart or stupid determines its role in the overall design of the application device. "Silly" components often have no state, they differ in simple, predictable and understandable behavior. It is recommended, whenever possible, to focus on the creation and use of "stupid" components.

It is more difficult to work with "smart" components, since they, in the course of work, receive some input data and generate some output data. In order to use Angular effectively, familiarize yourself with the concept of smart and dumb components. This acquaintance will provide you with patterns and ideas regarding how to organize fragments of application code and how to build relationships between these fragments with each other.

▍Search Queries


  • Smart / dumb Angular components.
  • Stateless dumb components.
  • Presentational components.
  • Smart components in Angular.

7. The structure of the application and practical recommendations for its formation


If we talk about the structure of the application and the application of practical recommendations when creating it, then Angular command-line tools can provide at least some help to the programmer. Developing an Angular application (or any other application) is like building a house. Namely, we are talking about practical methods that have been developed and optimized by the community of developers for years. The use of such techniques for structuring applications leads to the emergence of high-quality projects. Actually, this applies to Angular.

When novice programmers trying to learn Angular complain about this framework, the reason for such complaints is usually a lack of knowledge about the structure of applications. Beginners easily understand the syntax, here they have no problems. But finding the right approach to structuring applications is much more difficult for them. Here you need to understand the subject area for which the application is created, you need to know the requirements for the application, and how reality and expectations are related at the conceptual and practical levels.

Studying the possible options for the structures of Angular applications and practical recommendations for using these structures will give the programmer a vision of how to create his own projects.

▍Search Queries


  • Single repo Angular apps (Angular applications hosted in a single repository).
  • Angular libraries (Angular libraries).
  • Angular packages.
  • Angular bundles (Angular bundles).
  • Angular micro apps.
  • Monorepo (Monorepositories).

8. Data Binding Syntax and Patterns


Binding, or data binding, is perhaps the most noticeable feature of JavaScript frameworks. Also, this is one of the reasons frameworks generally exist. Data binding in templates is the bridge between static HTML and JavaScript. The data binding syntax in Angular templates plays the role of a middleman to help communicate HTML and JavaScript entities.

After you learn how and when to use anchors, you can easily turn static pages into something interactive. In this area, it is recommended to pay attention to various data binding scenarios. For example, this is a binding of properties, events, this is data interpolation and two-way binding.

▍Search Queries


  • Angular property binding.
  • Angular event binding.
  • Angular two-way binding (Angular two-way data binding).
  • Angular interpolation (Interpolation in Angular).
  • Angular passing constants (Angular passing constants).

9. Feature Modules and Routing


Feature modules in Angular are an underrated technology. Such modules, in fact, provide the developer with a fantastic way to organize and isolate sets of business requirements for applications. They help limit the liability of code fragments and prevent, in the long run, code pollution.

There are five types of Feature-modules (Domain, Routed, Routing, Service, Widget), each of them is responsible for the implementation of a certain functionality. Learning how to use Feature modules in conjunction with routing can help in creating separate blocks of functionality. This will help and implement in applications a high-quality and clear scheme of separation of responsibilities.

▍Search Queries


  • Angular feature modules (Feature modules in Angular).
  • Shared feature structures in Angular.
  • Feature module providers.
  • Lazy loading with routing and feature modules (Lazy loading with routing and Feature modules).

10. Forms and data validation (reactive forms and validators)


Forms are an inevitable part of any front-end development. And where forms are used, data validation is also needed.

Angular has various ways of constructing data-driven smart forms. Reactive forms are especially popular. However, there are other options, in particular - these are forms whose validation is based on templates, as well as the use of custom validators.

Learning how validators and CSS work together will help speed up application development and facilitate the handling of errors in forms.

▍Search Queries


  • Angular form validation.
  • Template driven validation
  • Reactive form validation.
  • Sync and async validators in Angular (Synchronous and asynchronous validators in Angular).
  • Built-in validators.
  • Angular custom validators.
  • Cross-field validation.

11. Projection of content


Angular has a mechanism called content projection. It allows you to organize the efficient transfer of data from parent components to child components. Although the idea of ​​projecting content may seem complicated, its essence lies in the fact that to build some element displayed on the screen, some elements are placed in others.

Developers often study the projection of content on a surface level, for example, getting used to the scheme in which a child component is embedded in the parent component. But in order to broaden our understanding of this concept, we also need to understand how data is transferred between different visual components. This is where the understanding of the features of the projection of content will be very helpful.

Understanding this concept helps to understand the features of the movement of data flows within the application, and where exactly mutations of this data occur.

▍Search Queries


  • Angular content projection.
  • Angular parent-child view relationship (Angular parent-child relationship and visual components of Angular).
  • Angular view data relationships.

12. onPush Change Detection Strategy


By default, Angular uses a standard change detection strategy. With this approach, component checks are ongoing. Although there is nothing wrong with this, this approach to detecting changes may not be effective.

If we are talking about small applications, then their performance is not particularly affected. But after the application grows to a certain size, its speed, especially when launched in older browsers, may deteriorate.

A change detection strategy onPushcan dramatically speed up the application. The fact is that when it is used, checks are performed only when certain events occur. This is much better than constant checks.

▍Search Queries


  • Angular onPush change detection (Angular onPush change detection strategy).

13. Restricting access to routes, preloading, lazy loading


If your project has mechanisms that provide user access to the system, this means that you need to use restriction of access to routes. Many applications require the ability to protect certain pages from unauthorized viewing. Route access restrictions work as an interface between the router and the requested route. They make decisions about whether access to a particular route is allowed in a certain situation. In the area of ​​route protection, there is much that will be useful to learn. In particular, this is decision-making based on the analysis of the token's validity period, the use of authentication roles, and the provision of safe work with routes.

Preloading and lazy loading of data can improve the user experience of working with the site by reducing application loading time. It will be useful to say that pre-lazy loading technologies are not only related to images. These technologies are used when breaking application bundles into parts and when loading different parts of these bundles under different conditions.

▍Search Queries


  • Angular route guards (Restricting access to routes in Angular).
  • Angular authentication patterns.
  • Angular preloading and lazy-loading modules (Preloading and lazy loading modules in Angular).
  • Angular secured route patterns.

14. Custom conveyors


Angular pipelines make data formatting much easier. There are many built-in conveyors that allow you to solve a wide range of standard tasks. Among them are the tasks of formatting dates, currency amounts, percentage values, as well as, for example, working with the case of characters. However, there is always a task for which there is no standard conveyor.
It is in such cases that custom pipelines are needed. This mechanism allows the programmer to create his own filters and describe the data transformations he needs. Using all this is not difficult, therefore this concept can be recommended for study.

▍Search Queries


  • Angular custom pipes.

15. Decorators @ViewChildand@ContentChild


Components can communicate with each other thanks to decorators @ViewChildand @ContentChild. The essence of Angular is to make multi-component applications created using this framework look like a puzzle. But such a puzzle will not be of much use if its fragments are isolated from each other.

To connect puzzle pieces with each other, decorators @ViewChildand are used @ContentChild. Studying the features of their use will give you the opportunity to work with components associated with other components. This simplifies the task of organizing data sharing between various components. This allows you to transfer data and information about events that occur in these components between components.

▍Search Queries


  • Angular decorators (Decorators in Angular).
  • Viewchild and contentchild in Angular (Decorators @ViewChildand @ContentChildin Angular).
  • Angular component data sharing.

16. Dynamic components and the ng-template directive


Components are the building blocks of Angular applications. However, not all components need to be created in advance. Some of them need to be created while the program is running.
Dynamic components allow an application to create what it needs while it is running.

Static components, unlike dynamic ones, are created in advance. This is done in cases where it is not expected that the components can be affected. They are predictable, in a predetermined way, performing conversions of the data entering them.

Dynamic components, on the other hand, are created as the need arises for them. They turn out to be very useful when developing applications that work with external data sources. They are useful even when you need to organize the reaction of the application to the actions occurring on the page.

▍Search Queries


  • Dynamic components in Angular.
  • Dynamic components and ng-templating (Dynamic components and ng-template directive).

17. Decorators @Host, @HostBindingand the exportAs directive


Decorators @Host, @HostBindingand the directive exportAsare used to control Angular that to which they apply. They, in addition, make it possible to create concise templates for exporting entities that can be used in the application.

If the above does not seem particularly clear to you, we recommend that you familiarize yourself with the directives and find out why they are needed. Decorators @Host, @HostBindingand the directive exportAs, are what help Angular be what it is.

▍Search Queries


  • Angular directives patterns (Angular directive patterns).
  • @Host, @HostBindingand exportAs in Angular (Decorators @Host, @HostBindingand the exportAs directive in Angular).

18. Application state management using NgRx


The state of the application is determined by what the user sees. If confusion reigns in the application state, this may indicate that the data structures used in it are poorly adapted to changes. Such changes may need to be made to data structures as the application grows and develops.

As someone begins to understand the specifics of working with state in Angular, he also approaches understanding the specifics of data behavior in his applications.

Angular has its own state management system. However, there is one technology, NgRx, which allows you to take application state management to a higher level. In particular, for example, data may be lost when transferring it between a plurality of parent components and child components. And NgRx allows you to create a centralized repository and get rid of this problem.

▍Search Queries


  • Angular NgRx (Using RxJS in Angular).
  • Flux / Redux principles.
  • Angular state management principles.

19. Dependency and zone injection


Dependency injection is a massive, universal concept. If you are not very familiar with it, you should study it. Angular has many ways to accurately inject dependencies. This is mainly achieved through the use of constructors. It is about importing into the code only what is really needed. This helps improve application performance.

The concept of zones, like the idea of ​​dependency injection, is not unique to Angular. This is a mechanism that allows an application to monitor the status of asynchronous tasks throughout their life cycle. This is an important concept, since asynchronous tasks can change the internal state of the application, which means that what the user sees. Zones help organize change detection processes.

▍Search Queries


  • Angular zones (Zones in Angular).
  • Dependency injections.
  • Angular DI (Dependency Injection in Angular).

Summary


Creating Angular applications is a huge topic. And while training during application development is a good way to learn something new, sometimes it happens that a person simply does not know what exactly he does not know. It is especially difficult for beginners to understand the boundaries of their knowledge and look behind them. We hope this material has helped everyone interested in Angular to chart ways to deeply explore this framework.

Dear readers! What would you advise novice Angular developers to pay attention to?


Also popular now: