How to use plug-ins in angularjs

Time:2020-11-16

During the internship, due to the needs of the project, for the first time, I systematically used angular, an excellent JS framework, which has many excellent features, which greatly facilitates the development of the project. However, I have also encountered many problems in the development. Now I will share my development experience with the developers who contact angularjs for the first time when I am caught back in school and have nothing to do For reference. (angularjs1 and chart plug-in echart of Baidu will be used as an example to demonstrate)


1. Preparation

The first thing we need to do is to introduce the dependencies we need into our project. Assuming that you have installed node and cnpm on your computer, you only need to use the console to use the following commands in your project directory

 1. cnpm install angular --save
 2. cnpm install echarts --save

After installation, you will get a node named node_ Modules folder, and everything we need is in it. When everything is ready, we can start our development.

2. Development

In my opinion, the best way to use other plug-ins in angular is to introduce them into the project in the form of instructions. This has many advantages. The most obvious advantage is that when multiple plug-ins need to be introduced into the project, they can be separated by various instructions, and they also have the componentization characteristics that are used everywhere in one development.
First I created the angular project in the following directory
s
How to use plug-ins in angularjsamong index.html As the main page, we need to use script tags to introduce all the dependencies that will be used. However, too many script tags will slow down the loading speed of the whole page. If you need to optimize, you can use webpack to package them. If you are interested, you can go down and learn by yourself. For angular, its project will automatically generate a scope. When you want to use other independent plug-ins in angular project, the first thing we usually do is to introduce this plug-in into angular’s scope. Therefore, in the project, I created a factory to transfer echart into angular’s scope

.factory('echarts',function(){
    return echarts;
});

At this time, we only need to directly refer to the factory named echarts created before in the created instruction, and we can use the echarts plug-in directly in the instruction.
The code for testing is as follows

.directive('paintDirective',['echarts',function(echarts){
    console.log(echarts);
    return {
        restrict:'E',
        controller: ['$scope','$rootScope',function($scope,$rootScope){
            console.log('123');
        }],
        templateUrl:'../scripts/template/paintTemplate.html',
    }
}]);

From the output of the console, we can easily see that echart is introduced into the instruction. At this time, we can use echarts to operate in angular project.

How to use plug-ins in angularjs

Recommended Today

Think about open source project promoting rust search extension: quickly search rust documents in the browser address bar

Open source project name:Rust Search Extension Introduction to open source projects:Quick search for rust documents in the browser address barOpen source project type:teamProject creation time:2020 GitHub data:375 Star,18 ForkGitHub address:https://github.com/huhu/rust-search-extension Rust search extension is a plug-in that can quickly search rust documents, Crites, built-in properties and error codes in the browser address bar. It supports […]