Geekly Articles each Day
📜 ⬆️ ⬇️

What you need to know for effective development on the framework of Angular



It is believed that in front-end development, the equivalent of “ Hello world ” is an application - a task list. Yes, it allows you to cover the CRUD-aspect of creating an application, but the capabilities of the framework or library used are often very superficially affected.

Angular is constantly changing and updating, but something remains unchanged. I’ll talk about the basic concepts of Angular that you need to learn if you want to use this JavaScript framework in the best possible way.
')
To work with Angular, you need to learn a lot, and at the same time, beginners often get stuck at the initial level just because they do not know where and what to look for. Therefore, I wrote a manual (which includes a brief summary of the basics of Angular), which I myself would very useful when I first started working with Angular 2+.

Transferred to Alconost

1. Angular modular architecture


Theoretically, you can put all Angular code on one page and into one big function, however, it is not recommended to do this: it is an inefficient way of structuring code that prevents Angular from expanding its purpose.

Part of the architecture of this framework is the active use of the concept of modules, which are code that has a single purpose. The Angular application basically consists of modules, some of which are isolated and others are common.

You can organize modules in the application in a variety of ways. By studying various architectural structures, you can decide how the application will scale as it develops, and also learn how to isolate code and reduce interdependence.

What to google:


2. One-way data flow and immutability


Bilateral binding won the hearts of many front-end developers in the time of Angular 1 - in fact, it was one of the main distinguishing features of this framework. However, as the application developed, such an approach began to create problems in terms of performance.

It turned out that double-sided binding is not needed everywhere.

Angular 2+ still makes it possible to implement it, but for this it needs to be explicitly requested - so the developer has to think about data flows and their direction. In addition, it allows an application to handle data more flexibly, since you can specify how to transmit it.

What to google:


3. Attributive and structural directives.


A directive is an extension of HTML with additional elements. Attribute directives allow you to change the properties of an element. Structural directives modify the layout by adding or removing DOM elements.

For example, ngSwitch and ngIf are structural directives: they evaluate parameters and determine whether specific parts of the DOM should exist.

Attribute directives are custom behavior attached to an element, component, or other directive.

By learning how to use these two types of directives, you can extend the capabilities of your own application and reduce code duplication in a project. Attribute directives also help centralize specific behavior used in different parts of an application.

What to google:


4. Component Life Cycle Handlers


Each application has a life cycle that determines how objects are created, processed, and then deleted. In the Angular framework, the life cycle of a component looks like this:

  →  →    →       →  →   DOM

We have the ability to handle key points in this cycle and target specific points in time or events. This allows you to create appropriate responses and customize the behavior in accordance with the various phases of the component.

For example, if you want to load some data before rendering the page, you can do this via ngOnInit() . And if you need to disconnect from the database, you can do this at the moment of ngOnDestroy() .

What to google:


5. Observed Services and HTTP


The observed services are not a unique Angular feature, but rather something from ES7. Nevertheless, this functionality has been implemented within the framework of the framework, and the corresponding ideas are well transferred also to React, Vue and other JavaScript-related libraries and frameworks.

What to google:


6. The architecture of "smart" and "stupid" components


Often, when writing applications on Angular, everything is dumped into one component, but this is not the best approach. The concept of “smart” and “stupid” components in Angular definitely deserves more attention, especially among beginners.

The role of the component in the general plan of the application is determined by whether it is “stupid” or “smart”. "Stupid" components usually do not monitor the state, and their behavior is easy to predict and understand - if possible, these are the components to be made.

Smart components are harder to understand because they have inputs and outputs. To effectively use the capabilities of Angular, you should understand the architecture of “smart” and “stupid” components: this is how you master patterns and ways of thinking that will help you write more productive code and build the right interaction within the application.

What to google:


7. Standard Application Structures


Ability to work with the command line in determining the structure of the application is useful, but it is not a panacea. Creating an application on Angular (and any application in general) is similar to building a house: there are established processes that have been optimized by the community for many years, which allow you to write more efficient and productive applications.

And Angular is no exception.

Most complaints about Angular can be heard from those who are trying to study it without having an understanding of the structure. Understandable and concise syntax is set on the fly, however, to understand the structure of the application, you need to know the context, the requirements and how it all fits together at the conceptual and practical levels. After studying the various possible structures of applications on Angular and recommendations for their application, you will get an idea of ​​how to write your own.

What to google:


8. Syntax to bind to pattern


The highlight of this JavaScript framework is the binding, which was one of the reasons for its creation. Template binding binds static HTML and JavaScript, and Angular syntax for template binding acts as an intermediary between these two technologies.

If you learn to use these features correctly and in a timely manner, then turning a static page into something interactive will become much easier and more enjoyable. Examine various binding scenarios: binding to properties, events, interpolation, and two-way binding.

What to google:


9. Routing and Function Modules


In the case of Angular, functional modules are usually underestimated, although in reality it is a great way to streamline and limit a set of business requirements. They make it possible to delineate responsibility and help prevent code contamination in the long run.

Functional modules are of five types (domain, routable, routing, service, and widget), and each has its own set of capabilities. By learning how to use functional modules in conjunction with routing, you can create separate sets of functions and provide a clear and convenient separation of application capabilities.

What to google:


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


Forms are an integral part of front-end development.

And where the forms, there is data verification.

On the Angular framework, you can create smart, well-functioning forms with data in various ways, and the most common approach is reactive forms. However, there are other options, namely template and user validators.

Having studied the principles of validators and CSS, you can speed up the workflow and prepare the application for error handling.

What to google:


11. Content projection


In the framework of Angular there is such a thing as content projection, which allows you to efficiently transfer data from parent components to children. At first it may seem difficult, but in fact in this case the representations are placed inside other representations - this is how the main presentation is created.

Often, content projection is understood superficially: it’s as if we are putting child views into the parent view. However, for a deeper understanding of the framework, it is necessary to understand how data is transferred between different views - here the knowledge of the concept of content projection is useful.

After studying the projection of the content, you will learn to understand the data flow of the application and determine where it is undergoing changes.

What to google:


12. The onPush change detection strategy


By default, Angular uses a standard change detection strategy, in which components are always checked. There is nothing wrong with using default behavior, but such a change detection may be ineffective.

In the case of small applications, the speed and performance remain at a satisfactory level. But as soon as the application reaches a certain size, the launch of some elements slows down, especially in older browsers.

The onPush change detection onPush significantly speeds up the operation of the application, since it does not rely on constant verification, but depends on the triggering of specific triggers.

What to google:


13. Defenders of routes, preliminary and delayed loading


If the application has a login account, you will need route advocates. The bottom line is to protect certain views from unauthorized viewing, which in many cases is a must. Route defenders act as an interface between the router and the requested route: they determine whether to allow access to a particular route or not. This is a fairly extensive topic: for example, this includes the issue of making routing decisions based on the validity of tokens, authentication of user roles and route protection.

Pre-load and delayed downloads will also help speed up the loading of the application and make it more convenient to work with it. It should also be noted that these tools do not just make it possible to decide whether to load a specific set of images: they help improve the connected architecture and load various parts of the application that may be in different domains and areas of definition.

What to google:


14. Non-standard channels


The channels of the Angular framework greatly simplify data formatting. Many types of formatting (dates, currencies, percentages, and character case) are already covered by pre-configured, ready-to-use channels, but you will probably need something else.

And this is where non-standard channels come in handy, which make it easy to create your own filters and convert data formats as required. It's pretty easy - try it.

What to google:


15. Decorators @ViewChild and @ContentChild


ViewChild and ContentChild are used to communicate components between themselves. The essence of the Angular framework is that several components are assembled together as a mosaic. However, this design can not do anything if its pieces are isolated from each other.

For this, we need the ViewChild and ContentChild decorators, learning how to use which you can access related components, and this simplifies the task of data exchange, and also makes it possible to transfer data and events caused by related components.

What to google:


16. Dynamic components and “ng-template”


In the Angular framework, applications are built on the basis of components. However, not all components are static - some need to be created on the fly, and not precompiled.

The components created by the application on the fly are called dynamic. Static components assume a certain immutability: we expect certain values ​​in the input and output and the corresponding predictable behavior.

Dynamic components are drawn as needed. It is convenient to use them when creating applications that can listen to external sources, change their state or represent reactions to actions that occurred on the page.

What to google:


17. Host , Host Binding and "exportAs"


@Host , @HostBinding are the decorators, and exportAs is the property of the @Directive decorator. Their purpose is to expand the effect of the parameters to which they are attached. They also provide the ability to create small export templates for use within the application.

If the above sounds incomprehensible, you should study the Angular directives and understand their purpose. @Host , @HostBinding and exportAs are important elements of the concept of directives.

What to google:


18. Condition Management with NgRx


The state of the application ultimately determines the data displayed to the user. And if the application is a lump of spaghetti, then there is a possibility that the entire data structure will become unreliable and in the event of any changes it will simply collapse.

Understanding what Angular needs states for, you'll understand how and why the data behaves this way and not otherwise.

Angular has its own state control system, but NgRx does a great deal in centralizing states and the data associated with them much better. In a chain of parent-child relationships, data can be lost, and NgRx creates centralized storage for them and thus eliminates this problem.

What to google:


19. Zones and dependency injection


The introduction of dependencies is generally a large-scale concept, so if you are not quite in the subject, you should understand more. As part of Angular, there are several ways to accurately implement dependencies, but this is mainly done using a constructor. Thus, you can not download everything, but import the most necessary - and, therefore, increase the efficiency of the application.

As well as dependency injection, “zones” were before Angular. They allow an application to detect asynchronous tasks. This is important because asynchronous tasks can change the internal states of the application - and hence the view. Zones also make it easy to detect changes.

What to google:


Conclusion


Angular is an extensive topic to explore. Creating applications on this framework, you can learn a lot, but sometimes it is completely incomprehensible what to look for and where to dig. In the beginning, it is difficult to navigate in unfamiliar surroundings. I hope this brief guide gave some insight into concepts that go beyond the usual lessons on Angular, and allowed us to take a broader look at this framework as a whole.

About the translator

Translation of the article is made in Alconost.

Alconost is engaged in the localization of games , applications and websites in 70 languages. Language translators, linguistic testing, cloud platform with API, continuous localization, 24/7 project managers, any string resource formats.

We also make advertising and training videos - for sites selling, image, advertising, training, teasers, expliners, trailers for Google Play and the App Store.

→ Read more

Source: https://habr.com/ru/post/455906/

More articles:


All Articles