A To-do app is basically the “Hello World” of front-end development. While it covers the CRUD aspects of creating applications, it generally scratches the surface of what frameworks or libraries can do as well.

Angular may seem to change and update all the time – but in reality, some things remain the same. Here’s an overview of the core concepts Angular needs to learn to make proper use of the JavaScript framework.

There’s a lot to learn when it comes to Angular, and many people get stuck in beginner’s circles simply because they don’t know where to search or what keywords to search for. What follows is a guide (and a quick summary of Angular itself) that I wish I had when I first started using Angular 2+.

Modularize the Angular architecture

Theoretically, you could put all Angular code on one page and into one large function, but it’s not recommended, it’s not an efficient way to construct code, and it defeats the purpose of Angular.

Angular makes the concept of modules, a collection of code that has only one raison d ‘etre, an important part of the framework’s architecture. Your Angular app is basically made up of modules – some independent, some shared.

There are several ways to construct modules in your application, and an in-depth understanding of different architectures can also help determine how to scale your application as it grows. It can also help isolate code and prevent code coupling.

Search keywords:

  • Angular architectural pattern

  • Extensible Angular application architecture

2. One-way data flow and immutability

Back in Angular 1, bidirectional binding captured the hearts of many front-end developers. This was actually one of Angular’s original selling points. Over time, however, as the application began to become more complex, it began to cause problems in terms of performance.

As it turns out, bidirectional binding is not needed everywhere.

Two-way binding is still possible in Angular 2+, but only when explicitly requested by the developer — this forces the people behind the code to think about the direction and flow of the data, and it allows the application to be more flexible with the data by determining how it flows.

Search keywords:

  • Angular data flow best practices

  • Unidirectional flow in Angular

  • Advantages of one-way binding

3. Attribute and structural directives

Directives are extensions of HTML through custom elements. Attribute directives allow you to change the attributes of an element, and structural directives change the layout by adding or removing elements in the DOM.

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

Attribute directives are custom behaviors attached to elements, components, or other directives.

Learning how to use these two instructions can extend the functionality of your application and reduce the amount of duplicated code in your project. Attribute directives can also help focus on certain behaviors that are used in different parts of the application.

Search keywords:

  • Angular attribute directives

  • Angular structural directives

  • Angular structural directive pattern

4. Component lifecycle hooks

Each piece of software has its own life cycle that determines how something is created, rendered, and removed. The Angular component lifecycle looks like this: Create → render → Render children → check when data-bound properties change → destroy → remove from DOM

We are able to capture key moments in this cycle and lock him in at specific moments or events. This allows us to create appropriate responses and configure behavior based on the different phases of the component’s existence.

For example, you might need to load some data before rendering the page, which you can do with ngOnInit(), or you might need to disconnect from the database, which you can do with ngOnDestroy().

Search keywords:

  • Angular lifecycle hooks

  • Component life cycle

5.Http and Observable services

This is not Angular specific, but comes from ES7. Angular just happens to implement it as part of the framework support, and just happens to understand that it translates well to React, Vue, and any JavaScript related library or framework.

Observables services are patterns that allow you to work with data efficiently – allowing you to parse, modify, and maintain data in event-based systems. You can’t completely avoid Http and observables, because everything is data.

Search keywords:

  • JavaScript observable pattern

  • Angular HTTP and observables

  • ES7 Observable function

6.Smart/Dumb architecture

When writing Angular applications, we tend to put everything in components. However, this is not best practice. The concept of Smart/Dumb components in Angular needs more discussion, especially among beginners.

Whether or not a component is Smart/Dumb determines the role it plays in the master plan of the application. Dumb components are usually stateless and their behavior is easy to predict and understand. Therefore, make your components Dumb as much as possible. Smart components are harder to master because they involve inputs and outputs. To take advantage of Angular’s capabilities properly, study the Smart/Dumb component architecture, which gives you patterns and ways of thinking about how to deal with code and its relationships.

Search keywords:

  • Smart/Dumb presents components

  • Stateless Dumb components

  • Presentation components

  • Smart component in Angular

7. Application structure and best practices

The CLI takes you only so far in terms of structure and best practices. Building an Angular application (or any application in general) is like building a house. The community has been optimizing the setup process for years to achieve the most efficient and effective applications.

Angular is no exception.

Most complaints about Angular from those trying to learn it are due to a lack of structural knowledge; Syntax is easy to learn and clear. However, knowledge of the structure of an application requires an understanding of the context, requirements, and how they fit together at both conceptual and practical levels. Understanding Angular’s different potential application structures and their best practices will give you a new perspective on how to build applications.

Search keywords:

  • A single repository Angular Apps

  • Angular library, Angular package

  • Angular

  • Angular microapplications

  • A monolithic repository

8. Template binding syntax

Bindings are the fruit of JavaScript frameworks and are one of the first reasons they exist. Template binding Bridges the gap between static HTML and JavaScript, and Angular’s template binding syntax acts as a facilitator between the two technologies.

Once you learn how and when to use them, turning a once-static page into an interactive one becomes a lot easier and less annoying. Explore different scenarios for binding, such as property binding, events, interpolation, and bidirectional binding.

Search keywords:

  • Angular property binding

  • Angular event binding

  • Angular bidirectional binding, Angular interpolation

  • Angular passes constants

9. Feature modules and routes

In Angular, feature modules are underrated. It’s actually an excellent way to organize and respond to business needs. In the long run, it limits liability and helps prevent code contamination.

There are five types of feature modules (domain feature module, routing feature module, routing feature module, service feature module, and recognizable component feature module), each of which handles a specific type of functionality. Learning to use feature modules in conjunction with routing can help create discrete sets of functionality and apply a good and clear separation of concerns to your application.

Search keywords:

  • Angular feature modules

  • Shared feature structures in Angular

  • Feature module provider

  • Lazy loading of routes and feature modules

10. Forms and validation (reactive forms and validators)

Forms are an inevitable part of any front-end development.

Along with the form comes validation.

There are many ways to build smart, data-driven forms in Angular. The most popular form iteration is reactive forms. However, there are other options, namely template-driven forms and custom validators.

Understanding how validators work with CSS will help speed up the workflow and turn your application into a ready space for validating errors.

Search keywords:

  • Angular formal validation

  • Template-driven validation

  • Reactive form validation

  • Synchronous and asynchronous validators in Angular

  • Built-in validator

  • Angular custom validators

  • Cross-validation across fields

11. Content projection

Angular has something called content projection that effectively passes data from parent to child components. While this may sound complicated, it’s actually the act of putting a view in a view to generate a master view.

We usually understand content projection in a superficial sense – when we nest child views in a superview. However, to expand our understanding, we also need to understand how data is passed between different views. This is where understanding content projections comes in handy.

Understanding content projections can help you determine the data flow of your application and where variability is occurring.

Search keywords:

  • Angular Content projection

  • Angular parent-child view relationships

  • Angular views data relationships

12. OnPush change detection

By default, Angular uses the default change detection strategy. This means that components are always checked. While there is nothing wrong with using the default, it can be an inefficient way to detect changes.

The speed and performance are good for small applications. However, once an application reaches a certain size, it can become cumbersome to run, especially in older browsers.

The onPush change detection strategy will significantly speed up the application because it relies on specific triggers rather than constantly checking to see if anything has happened.

Search keywords:
  • Angular onPush change detection

13. Path protection, preloading, lazy loading

If you have some type of login, you will need path protection. You can protect certain views from unauthorized views, which is an essential requirement in many applications. Path protection acts as an interface between the router and the request route. It is up to the decision maker to decide whether a particular route is allowed access. There is a lot to explore in the world of path protection – namely path decisions based on token expiration, user authentication, and path security.

Preloading and lazy loading can also enhance the user experience by speeding up the loading time of your application. It is worth noting that preloading and lazy loading do more than just decide whether to load a particular set of images; it can also enhance the architecture of bindings and load different parts of an application that may exist on different scopes and domains.

Search keywords:

  • Angular path Protection

  • Angular authentication mode

  • Angular preloads and lazy loads modules

  • Angular Secure path pattern

14. Customize pipes

Using Angular pipes makes data formatting incredibly easy. While many pre-configured and out-of-the-box pipes cover a lot of things like dates, currencies, percentages, and character capitalization, it doesn’t cover everything you need.

This is where custom pipes come in handy. You can easily create your own filters and convert the data format to your liking. It’s really easy, so go check it out!

Search keywords:
  • Angular custom pipes

15.@viewChild and the @contentChild decorator

ViewChild and contentChild are how components communicate with each other. The point of Angular is that you have multiple components that compile together like a puzzle, but the puzzle doesn’t really work if the components are isolated from each other.

This is where viewChild and contentChild come in. Learning to use these two modifiers gives you access to related components. This makes the task of sharing data easier to implement and transfers data and events triggered by related components.

Search keywords:

  • Presents the decorator

  • Viewchild and ContentChild in Angular

  • Angular component data sharing

Dynamic components and nG-templates

Components are Angular building blocks. However, not all components are fixed, and some of them need to be created dynamically rather than precompiled.

Dynamic components allow applications to create certain components dynamically. Static components assume that things don’t change. It can predict from expected inputs and outputs.

However, dynamic components are rendered on demand. They become handy when building responses to actions on applications or pages that may be listening for external sources and their updates.

Search keywords:

  • Dynamic components in Angular

  • Dynamic components and NG-Templating

17. @ Host @ Hostingbinding and exportAs

@host, @hostingBinding, and exportAs are Angular directive modifiers that extend the attached parameters. They also enable you to create compact templates that can be exported in your application for use.

If this sounds confusing, you should first look up Angular directives and their purpose. @host, @hostingBinding, and exportAs are features of the directive that help to implement it.

Search keywords:

  • Angular directive pattern

  • Angular @host, @hostingBinding, and exportAs

18. Use RxJs for state management

The state of the application ultimately determines what data is displayed to the user. If your state is a mess of spaghetti, chances are your entire data structure will be vulnerable to any change.

When you start to understand how state works in Angular, you’ll learn how and why data behaves.

Although Angular has its own state management system, RxJs is an excellent way to centralize state and its associated data. Data may be lost in the parent-child chain. RxJs decouples by creating a centralized store.

Search keywords:

  • Angular RxJs

  • The Flux/Redux principle

  • Angular state management principles

19. Dependency injection and regions

“Dependency injection” is often a big concept, so if you’re not familiar with the concept, this is something you really need to look for. There are several ways to create dependency injection efficiently in Angular, primarily through constructors. This is a way to make your application more efficient by importing only what you need, rather than loading everything.

Like dependency injection, regions are a concept unique to Angular. It is a way for an application to detect asynchronous tasks from start to finish. This is important because these asynchronous tasks can change the internal state of the application and therefore the view. Zones facilitate the change detection process.

Search keywords:

  • Presents the regional

  • Dependency injection

  • Angular DI

The last word

Angular is a big topic. While building Angular applications can help the learning process, sometimes you just don’t know what you don’t know. It’s hard to know what you don’t know when you’re starting out. Hopefully, this short guide will inspire you beyond your usual Angular tutorials and give you a fuller understanding of Angular.

Welcome to click on the “link” to learn more about jingdong Cloud content

Scan code to pay attention to jingdong cloud developer community, there are wonderful industry information every day!

Read the original