Shulou(Shulou.com)06/01 Report--

This article is to share with you what are the basic knowledge points of Angular8. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Angular CLI, also known as Angular scaffolding, is used to quickly generate the framework of a project or component to improve efficiency. You can easily generate angular app, component, service, and so on, and you can create them according to your own needs through parameters. It can be said that it is an indispensable tool for angular development.

Reference: https://cli.angular.io/

Ng generate: new component, service, pipe, class, etc.

Ng new: create a new angular app

Ng update: upgrade angular itself, as well as dependency

Ng version: displays the global version of anuglar cli, as well as the local version of angular cli, angular code, etc.

Ng add: add a third-party library. Will do 2 things, 1) install node_modules based on npm, 2) automatically change the configuration file to ensure that the new dependency works properly

About angular dependency injection (dependency injection)

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

Dependency is a service (service) with a series of functions, and various components and instructions (derictives) in an application may require the functionality of the service. Angular provides a smooth mechanism through which we can inject these dependencies into our components and instructions. Therefore, we are just building dependencies that can be injected between all components of the application.

Using dependency injection also has the following benefits

No instantiation is required (new instance). You don't need to care about what parameters are needed in the constructor of class

Once injection (app module is injected through Providers), all components can be used. And the same service instance (Singleton) is used, that is, the data in a service is shared and can be used for data transfer between components.

About the compilation of angular, the difference between AOT and JIT

Every Angular application contains components and templates that the browser does not understand. 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 run time, while in AOT compilation, the application is compiled during construction.

Obviously, AOT compilation has many benefits, so it is the default compilation method for Angular. Main advantages

Because the application is compiled before running inside the browser, the browser loads executable code and renders the application immediately, speeding up rendering.

In AOT compilation, the compiler sends external HTML and CSS files with the application, eliminating separate AJAX requests for those source files, thereby 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 the JS file before running it in the browser. As a result, there are no extra HTML files to read, providing better security for applications.

Angular bidirectional binding

The principle of two-way binding of Angular

The two-way binding of Angular is realized through dirty data checking (Dirty checking).

The basic principle of dirty value detection is to store the old value and compare the new value of the current time with the old value when testing. If it is equal, there is no change, otherwise, a change is detected and the view needs to be updated.

There is Zone.js in angular2. For setTimeout,addEventListener, promise, etc., all are executed in ngZone (in other words, overridden by zone.js encapsulation), angular also setup the corresponding hooks in ngZone, informs angular2 to do the appropriate dirty check, and then updates the DOM.

The efficiency of two-way binding of Angular

For situations where there are so many DOM elements to bind to on a page (hundreds of thousands), you are bound to encounter efficiency problems. (it also depends on PC, browser performance). In addition, there are more than 10 dirty tests (experience? If you think there is something wrong with the program, you will no longer check it.

You can avoid it in the following ways

For data used for presentation only, use one-way binding instead of two-way binding

The data flow of the Angular is top-down, flowing unidirectionally from the parent component to the child component. One-way data flow ensures efficient and predictable change detection. Therefore, componentization is also a means to improve performance.

Less complex logic is written in expressions (and functions called by expressions)

Do not connect too long pipe (often traversing and generating new arrays in pipe, pipe is called filter in anglarJS (v1))

Change detection strategy onPush. Angular has two change detection strategies. Default is the default change detection strategy for Angular, that is, the dirty check mentioned above (all are checked whenever there is a change in value). Developers can set up a more efficient change detection method based on the scenario: onPush. OnPush policy is that the component detects changes only when the reference to the input data changes or when an event is triggered.

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

Three ways of Angular data binding Name {{item.name}} Classes {{item | classPipe}} Classes {{classes (item)}}

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

The result of the binding method call: the classes equation is called once during each dirty value detection. If there are no special needs, this mode of use should be avoided as far as possible.

Pipe mode: it is similar to binding function, where each dirty value detection classPipe is called. However, Angular optimizes pipe and caches it. If item is equal to last time, the result will be returned directly.

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

About the Module of angular

What is angular's Module?

A Module is a place where we can group components (Component), services (service), and pipes (pipe). Modules export or hide these elements to determine whether other modules can use components, instructions, and so on. Each module is defined using the @ NgModule decorator.

The difference between Root Module and Feature Module.

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

Module lazy loading (Lazy-loading)

When a project is very large, in order to improve the loading speed of the first screen, you can use Lazy-loading to load those less commonly used url when you access some specific feature module.

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, the feature module will be a separate js, and only when the user accesses the url (~ / customers) will the user request the independent js from the server, and then load and execute it.

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

What are instructions (Directive)

Directives (Directive) are used to add behaviors to existing 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, the new version of anuglar is recommended to use Observable (belonging to RxJS), and second, for Observable objects, you can use .toPromise () to convert to Promise objects.

Promise, whether or not then is called. The promise is executed immediately; the observables is only created and executed when (subscribe) is called.

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

Observable with additional support for map,filter,reduce and similar operators

Observable can be cancelled, but Promise cannot.

If you improve the performance of Angular

Angular is also a web application, so the general skills to improve web pages are universal. There are also some special optimization techniques for Angular:

AOT compilation. As mentioned earlier, do not compile on the client side.

The application has been minimized (uglify and tree shaking)

Remove unnecessary import statements. If there is a legacy, it will also be called in when packing.

Make sure that unused third-party libraries have been removed from the application. Ditto.

When the project is large, consider delayed loading (Lazy Loading) to ensure the loading speed of the home page.

How to upgrade the Angular version

Angular CLI provides upgrade commands (ng update), as well as upgrade guidelines on the official website (https://update.angular.io/). After you choose which version to upgrade to which version, you will give a step-by-step upgrade command, just execute it directly.

Thank you for reading! This is the end of this article on "what are the basic knowledge points of Angular8?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.