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

Original author: Aphinya Dechalert
  • Transfer


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

Angular is constantly changing and updating, but something remains the same. I will talk about the basic Angular concepts that you need to learn if you want to use this JavaScript framework in the best way.

There is a lot to learn to work with Angular, and newcomers often get stuck at the entry level just because they don’t know where and what to look for. Therefore, I wrote a guide (which includes a brief summary of the basics of Angular), which I myself would be very useful when I just started working with Angular 2+.

Translated to Alconost

1. The modular architecture of Angular


Theoretically, you can put all the Angular code on one page and in one big function, but this is not recommended: this is an inefficient way to structure the code that prevents you from revealing the purpose of Angular.

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

There are a variety of ways to organize modules in an application. By exploring various architectural structures, you can determine how the application will scale as it develops, and also learn how to isolate code and reduce interdependence.

What to google:

  • Angular architectural patterns,
  • Angular scalable application architecture.

2. One-way data flow and immutability


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

It turned out that bilateral binding is not needed everywhere

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

What to google:

  • work with data streams in Angular,
  • unidirectional flow in Angular,
  • benefits of one-way snapping.

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 change the layout by adding or removing DOM elements.

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

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

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

What to google:

  • Angular attribute directives,
  • Angular structural directives,
  • Angular structural directive templates.

4. Component lifecycle handlers


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

создание → отрисовка → отрисовка дочерних элементов → проверка изменения свойств при связывании данных → уничтожение → удаление из DOM

We have the opportunity to process the key points of this cycle and focus on specific points in time or events. This allows you to create appropriate responses and customize the behavior in accordance with the various stages 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, this can be done at the moment ngOnDestroy().

What to google:

  • component life cycle handlers in Angular;
  • component life cycle.

5. Observed services and HTTP


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

What to google:

  • JavaScript observer patterns
  • observed objects and HTTP in Angular,
  • Observed objects in ES7.

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 dumb 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”. "Silly" components usually do not track the state, and their behavior is easy to predict and understand - if possible, components should be made that way.

Smart components are more difficult to understand because they involve inputs and outputs. To take full advantage of Angular's capabilities, you should understand the architecture of smart and stupid components: this way you will 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:

  • smart and stupid Angular components,
  • stupid stateless components
  • presentation components
  • smart angular components.

7. Standard application structures


The 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 well-established processes that have been optimized by the community for many years and which allow you to write more efficient and productive applications.

And Angular here is no exception.

Most complaints about Angular can be heard from those who try to study it without an understanding of the structure. A clear and concise syntax is captured on the fly, however, to understand the structure of the application, you need to know the context, requirements and how it all fits together at a conceptual and practical level. Having studied the various possible structures of Angular applications and recommendations for their application, you will get an idea of ​​how to write your own.

What to google:

  • Angular applications with one repository,
  • Angular libraries, Angular packages,
  • Angular bundles
  • Angular micro-applications.
  • monorepositories.

8. Syntax for template binding


The highlight of the JavaScript framework in question is the binding, and it has also become one of the reasons for its creation. Template binding combines static HTML and JavaScript, and Angular's template binding syntax acts as an intermediary between the two technologies.

If you learn to properly and timely use these features, then turning a static page into something interactive will become much easier and more enjoyable. Explore various binding scenarios: property binding, event binding, interpolation, and two-way binding.

What to google:

  • binding to properties in Angular,
  • event binding in Angular,
  • two-way binding in Angular, interpolation in Angular,
  • passing constants to Angular.

9. Routing and function modules


In the case of Angular, functional modules are usually underestimated, although this is actually a great way to streamline and restrict a set of business requirements. They help to differentiate responsibilities and help prevent code pollution in the long run.

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

What to google:

  • Angular function modules,
  • common functional structures in Angular,
  • function module providers.
  • lazy loading with routing and function modules.

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


Forms are an integral part of front-end development.

And where there are forms, there is data verification.

You can create smart forms that work well with data on the Angular framework in various ways, and reactive forms are the most common approach. However, there are other options, namely template and custom validators.

By understanding how validators and CSS work, you can speed up your workflow and prepare your application for error handling.

What to google:

  • form validation in Angular,
  • template-based data validation,
  • validation of reactive forms,
  • synchronous and asynchronous validators in Angular,
  • built-in validators
  • custom validators in Angular,
  • cross check fields.

11. Projection of content


The Angular framework has such a concept as projecting content, which allows you to effectively transfer data from parent components to child ones. At first, this may seem complicated, but in fact, in this case, the views are placed inside other views - this creates the main view.

Often projection of content is understood superficially: as if we are embedding child views in the parent view. However, for a deeper understanding of the framework, it is necessary to understand how data is transferred between different representations - this is where knowledge of the concept of projecting content is useful.

Having studied the projection of content, you will learn to understand the application data stream and determine where it undergoes changes.

What to google:

  • projecting content in Angular,
  • relationship of parent and child views in Angular,
  • relationships between data in Angular views.

12. Change Detection Strategy “onPush”


By default, Angular uses a standard change detection strategy in which components are always checked. There is nothing wrong with using the default behavior; however, such detection of changes can be ineffective.

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

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

What to google:

  • detect onPush changes in Angular.

13. Route defenders, pre and delayed loading


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

To speed up the loading of the application and make working with it more convenient, preliminary and delayed loading will also help. It should also be noted that these tools do not just make it possible to decide whether to download a specific set of images: they help improve the associated architecture and load different parts of the application that may be in different domains and areas of definition.

What to google:

  • route guards in Angular,
  • authentication patterns in Angular,
  • Angular pre and post load modules
  • secure route templates in Angular.

14. Custom channels


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

And here non-standard channels are useful, which make it easy to create your own filters and convert data formats in the desired way. It's pretty easy - try it.

What to google:

  • non-standard channels in Angular.

15. Decorators @ViewChild and @ContentChild


ViewChildand ContentChildare used to communicate between components. The essence of the Angular framework is that several components assembled together, like a mosaic, are used. However, this design cannot do anything if its pieces are isolated from each other.

For this, decorators are needed ViewChildand ContentChild, having learned how to use them, you will be able to access related components, which simplifies the task of exchanging data, and also makes it possible to transfer data and events caused by related components.

What to google:

  • Angular decorators,
  • ViewChildand  ContentChildin angular,
  • data exchange between components in Angular.

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 must be created on the fly, not pre-compiled.

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

Dynamic components are rendered as needed. They are convenient to use 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:

  • dynamic components in Angular,
  • dynamic components and ng-template.

17. Host , Host Binding and “exportAs”


@Host, Are @HostBindingdecorators, and exportAsis a property of the @Directive decorator. Their purpose is to extend 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, @HostBindingand exportAsare important elements of the concept of directives.

What to google:

  • Angular directive usage patterns
  • @Host, @HostBindingand  exportAsin Angular.

18. State management using NgRx


The state of the application ultimately determines the data displayed to the user. And if the application is a bunch of spaghetti, then there is a chance that the entire data structure will become unreliable and in the event of any changes just crash.

Understanding why states are needed in Angular lets you understand how and why data behaves this way and not otherwise.

The Angular framework has its own state management system, but NgRx does a much better job of centralizing states and associated data. Data may be lost in the parent-child relationship chain, and NgRx creates a centralized repository for them and eliminates this problem.

What to google:

  • Angular NgRx,
  • Flux and Redux principles
  • Angular state management principles.

19. Zones and dependency injection


Dependency injection is generally a large-scale concept, so if you are not quite in the topic, you should understand more. Within Angular, there are several ways to carefully inject dependencies, but this is mainly done using the constructor. Thus, you can not download everything in a row, but import the most necessary - and, therefore, increase the efficiency of the application.

Like dependency injection, there were “zones” before Angular. They allow the application to detect asynchronous tasks. This is important because asynchronous tasks can change the internal state of the application - and therefore the presentation. Zones make it easy to detect changes.

What to google:

  • zones in Angular,
  • dependency injection
  • Angular DI.

Conclusion


Angular is an extensive topic to explore. By creating applications on this framework, you can learn a lot, but sometimes it’s completely unclear what to look for and where to dig. At the very beginning it can be difficult to navigate in an unfamiliar environment. Hopefully this short tutorial has provided some insight into concepts that go beyond the usual Angular tutorials, and allowed a broader look at this framework as a whole.

About the translator

Translation of the article was done in Alconost.

Alconost localizes games , applications and sites in 70 languages. Native translators, linguistic testing, cloud platform with API, continuous localization, project managers 24/7, any format of string resources.

We also doadvertising and training videos - for sites that sell, image, advertising, training, teasers, explainers, trailers for Google Play and the App Store.

→  Read more

Also popular now: