How to use third-party libraries in angularjs? Detailed explanation of using third-party libraries in angularjs

This article introduces angularjsHow to use third-party libraries, which third-party libraries can be used by angularjs, let us enter the article with questions.

Angular’s ​​components and modules seem to be a bit incompatible with the use of various existing third-party libraries (such as: lodash, moment, etc.), which is very strange. The big reason is the illusion caused by TypeScript. The three pillars of front-end are actually the same, no matter what kind of front-end framework, these third-party libraries can be used.

Below I will explain from another perspective how Angular uses third-party libraries as an experience.

1. Written in front

Before you start, you need to understand the TypeScript module system - a module refers to execution in its own scope, not in the global scope; a module The relationship is established between export and import. During the compilation process, the compiler also relies on this relationship to locate the files that need to be compiled.

TypeScript still publishes class libraries in the form of JavaScript files, which results in types that cannot be expressed and require a declaration file to describe the type; therefore, the declaration file has become an indispensable part of the class library.

2. Classification

Angular is developed using TypeScript language. As mentioned in the previous section, in order for a class library to be used, the requirement is whether there is a declaration file .

There is a declaration file

To distinguish whether the class library has a declaration file*.d.ts, you can confirm this from two aspects:

1. The class library comes with

After installing a dependent package from Npm, you can directly check whether the package.json of its library contains typings Node, for example moment:

"typings": "./moment.d.ts"

2, TypeSearch retrieval

TypeScript provides a website called TypeSearch, you can directly enter keywords to check Whether to include the declaration file of this class library.

For examplelodash You can click in the list to jump to the npm website, and you will see a command like this:

npm install --save @types/lodash

No declaration file

This kind of situation is quite common. For example, there was no declaration file earlier G2. In this case, you can only write the declaration file by yourself.

The project created by Angular Cli will contain a src/typings.d.ts declaration file, which will be automatically included in the global declaration definition, and these classes The declaration information of the library is ideally written here.

Generally speaking, it is difficult to write a complete declaration file for a class library. This is too cost-effective, so it is often only done for some global objects. any (Indicates that the static type check is ignored) Alternatively, for example:

// src/typings.d.ts
declare var G2: any;

3. How to use it?

The declaration file is a link, and it is still used in this way to divide how to use it.

For declaration files, there is no need to do anything extra. Just use import where the module is needed to import it, for example:

import * as moment from 'moment';

moment(); // 当前时间

No declaration file

It is important to look at what to do when there is no declaration file. As mentioned earlier, using any to indicate ignoring static type checking means that the user cannot enjoy the pleasure of smart prompts brought by the declaration file.

Like G2, we can use it directly anywhere in the project, but it can only recognize G2 variables, and the methods or properties of the instance are unknown of.

// app.component.ts

const g2 = new G2();
g2. // 输入 `.` 后是不会有任何方法或属性

In addition, TypeScript will not perform any type check on G2 during the compilation process. Whether G2 really exists can only be determined by yourself. For Angular, these modules need to be explicitly loaded on the scripts node of .angular-cli.json. (If you want to learn more, go to the PHP Chinese website AngularJS Development Manual to learn)

// .angular-cli.json
"scripts": [
    "../node_modules/@antv/g2/dist/g2.min.js"
]

TypeScript is still JavaScript code after compilation, if you do not manually load G2 related JavaScript file, naturally an error of G2 not found will be provided during the running process.

Summary

Looking at how to use third-party libraries from a TypeScript perspective, you will have a different feeling. It is just a simple unreliable but effective description. I hope people who know better will show mercy.

There is no intention to discredit G2 here. Now G2 has provided a declaration document.

Okay, this article ends here (if you want to see more, go to the PHP Chinese website AngularJS User Manual to learn). If you have any questions, you can leave a message below.

The above is the detailed content of How to use third-party libraries in angularjs? Detailed explanation of using third-party libraries in angularjs. For more information, please follow other related articles on the PHP Chinese website!