Home > Article > Web Front-end > 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.
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.
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 .
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
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;
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(); // 当前时间
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.
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 discreditG2
here. NowG2
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!