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)
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/
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,
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:
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
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.
<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)
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
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.
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
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:
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
