Compilation of Angular8+ interview questions: analysis of basic knowledge points

This article will share with you some interview questions based on Angular8, and give you an in-depth understanding of the basic knowledge points of Angular8. I hope it will be helpful to everyone!

Related recommendations: 2022 Big Front-End Interview Questions Summary (Collection)

About Angular CLI

Angular CLI, also known as Angular scaffolding, is used to quickly generate the framework of a project or component to improve efficiency. Angular apps, components, services, etc. can be easily generated, and can be created according to your own needs through parameters. It can be said to be an indispensable tool for angular development. [Related tutorial recommendations: "angular tutorial"]
Reference: https://cli.angular.io/

• ng generate: create new component, service, pipe, class etc
• ng new: Create a new angular app
• ng update: Upgrade angular itself and its dependencies
• ng version: Display the anuglar cli global version and the local angular cli, Versions of angular code, etc.
• ng add: Add a new third-party library. It will do two things, 1) install node_modules based on npm, 2) automatically change the configuration file to ensure that new dependencies work properly

About angular's dependency injection (dependency injection)

Dependency injection is an application design pattern implemented by Angular and is one of the core concepts of Angular.

A dependency is a service with a series of functions. Various components and directives (derictives) in the application may require the functions of the service. Angular provides a smooth mechanism through which we can inject these dependencies into our components and directives. So we're just building dependencies that can be injected between all the components of the application.

Using dependency injection also has the following benefits,

1. No need to instantiate (new instance). You don’t need to care about what parameters are required in the constructor of the class
2. Once injected (the app module is injected through Providers), all components can be used. Moreover, the same service instance (Singleton) is used, which means that the data in a service is shared and can be used for data transfer between components.

About angular compilation, the difference between AOT and JIT

Every Angular application contains components that the browser cannot understand and templates. Therefore, all Angular applications need to be compiled before running inside the browser.

Angular provides two compilation types:

• JIT(Just-in-Time) compilation
• AOT(Ahead-of-Time) compilation

The difference is that in JIT compilation, the application is compiled inside the browser at runtime, while in AOT compilation, the application is compiled during build time.
Obviously, AOT compilation has many benefits, so it is Angular’s ​​default compilation method. Key Benefits

• Because the application is compiled before running inside the browser, the browser loads the executable code and renders the application immediately, resulting in faster rendering.
• In AOT compilation, the compiler will send external HTML and CSS files along with the application, thereby eliminating separate AJAX requests for those source files, thus reducing ajax requests.
• Developers can detect and handle errors during the build phase, which helps minimize errors.
• The AOT compiler adds HTML and templates to JS files before running them in the browser. Therefore, there are no redundant HTML files to read, providing better security to the application.

Angular two-way binding

The principle of Angular two-way binding

Angular two-way binding, through Dirty checking is implemented.

• The basic principle of dirty value detection is to store the old value, and when detecting, compare the new value at the current moment with the old value. If they are equal, there is no change. Otherwise, a change is detected and the view needs to be updated.

• Zone.js is included in angular2. For setTimeout, addEventListener, promise, etc. are all executed in ngZone (in other words, they are encapsulated and rewritten by zone.js). Angular sets up the corresponding hook in ngZone, notifies angular2 to do the corresponding dirty check processing, and then updates DOM.

Angular two-way binding efficiency issue

For situations where an extremely large number of DOM elements need to be bound in the page (into Hundreds or thousands), you will inevitably encounter efficiency problems. (The specifics also depend on PC and browser performance). In addition, if the dirty check exceeds 10 times (experience value?), it is considered that there is a problem with the program and no more checks will be performed.
You can avoid this in the following ways

• For data that is only used for display, use one-way binding instead of two-way binding;

• Angular's data flow is top-down, flowing in one direction from parent components to child components. Unidirectional data flow ensures efficient and predictable change detection. Therefore componentization is also a means to improve performance.

• Write less complex logic in expressions (and functions called by expressions)

• Do not connect pipes that are too long ( Often pipe will traverse and generate new arrays. Pipe is called filter in anglarJS (v1))

• Change detection strategy onPush. Angular has two change detection strategies. Default is Angular's default change detection strategy, which is the dirty check mentioned above (check all values ​​as long as they change). Developers can set up a more efficient change detection method based on the scenario: onPush. The onPush strategy means that the component will only perform change detection when the reference to the input data changes or an event is triggered.

• NgFor should be used with the trackBy equation. Otherwise, NgFor will update the DOM for each item in the list during each dirty value detection process.

Three ways of Angular data binding

<div>
    <span>Name {{item.name}}</span>  <!-- 1. 直接绑定 -->
    <span>Classes {{item | classPipe}}</span><!-- 2. pipe方式-->
    <span>Classes {{classes(item)}}</span><!-- 3.绑定方法调用的结果 -->
</div>

• Direct binding: In most cases, this is the best way to perform .

• The result of the binding method call: During each dirty value detection process, the classes equation must be called once. If there are no special needs, this method of use should be avoided as much as possible.

• pipe method: It is similar to the binding function. Every time the dirty value detection classPipe is called. However, Angular has optimized the pipe and added caching. If the item is equal to the last time, the result will be returned directly.

For more optimization tips, refer to the performance optimization tips in angular binding (dirty checking)

About angular’s ​​Module

What is Angular's Module

Module is a place where we can group components, services and pipes. Modules decide whether other modules can use components, directives, etc. by exporting or hiding these elements. Each module is defined using the @NgModule decorator.

The difference between Root Module and Feature Module.

Each Angular application can only have one root module (Root Module), and it can have one or more feature modules (Feature Module). The root module imports BrowserModule, while the function module imports CommonModule.

Module Lazy-loading

When a project is very large, in order to improve the loading speed of the first screen, you can pass Lazy-loading, when certain specific URLs are accessed, only those uncommon feature modules are loaded.

Implementation: Create feature module normally and modify routing configuration. For example:

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  }
];

In this way, after compilation, this feature module will be an independent js. Only when the user accesses the url (~/customers), this independent js will be requested from the server and then loaded. ,implement.

Reference https://angular.io/guide/lazy-loading-ngmodules

What is a directive (Directive)

Directive (Directive) is used to add behavior to an existing There are elements (DOM) or components (Component).
At the same time, multiple instructions can be applied to an element or component.

The difference between Promise and Observable

First of all, the new version of anuglar recommends using Observable (belonging to RxJS). Secondly, for Observable objects, you can use .toPromise() to convert them into Promise objects.

• Promise, regardless of whether then is called. Promises are executed immediately; observables are only created and executed when called (subscribe).

• Promise returns a value; Observable returns 0 to N values. So the operator corresponding to Promise is .then(), and the corresponding operator to Observable is .subscribe

• Observable, which also supports map, filter, reduce and similar operators

• Observable can be canceled, but Promise cannot

If you want to improve the performance of Angular

Angular is still a web application, so The general techniques for improving web page performance are universal. For Angular, there are some special optimization techniques:

• AOT compilation. As mentioned before, don't compile on the client side
• The application has been minimized (uglify and tree shaking)
• Remove unnecessary import statements. If there are any leftovers, they will also be included when packing.
• Make sure that unused third-party libraries have been removed from the application. Same as above.
• When the project is large, consider lazy loading (Lazy Loading) to ensure the loading speed of the homepage.

How to upgrade the Angular version

Angular CLI provides an upgrade command (ng update). At the same time, the official website (https://update.angular.io/) also has an upgrade guide. After selecting which version to upgrade from, step-by-step upgrade commands will be given, just execute them directly.

For more programming-related knowledge, please visit: Programming Learning! !

The above is the detailed content of Compilation of Angular8+ interview questions: analysis of basic knowledge points. For more information, please follow other related articles on the PHP Chinese website!