How to use the Echart plug-in sample in Angularjs _angularjs

The first step: Prepare

The first thing we have to do is to introduce the dependencies we need in our project, assuming that you have already installed on your computer node and cnpm simply need to use the console in your project directory to use the following command

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

At the end of the installation you will get a folder named Node_modules, and everything we need is in there, and when we're ready we can start our development.

Step Two: Develop

I think the best way to use other plug-ins in angular is to introduce them into the project using the form of instructions, there are a number of benefits, the most obvious of which is that when a variety of plug-ins are introduced in a project, they can be separated by different instructions and have a modular feature used throughout the development.
First I created the angular project for the following directory

Where index.html as the main page we need to use the script tag to introduce all the dependencies that will be used, but too many script tags will drag the entire page loading speed, need to optimize words can use Webpack to package them, this interested can go down to understand. For angular, the project automatically generates a scope, and the first thing we do when you want to use other standalone plug-ins in the angular project is to introduce the plugin into the scope of the angular, So in the project I created a factory to pass Echart into the scope of angular

. Factory (' Echarts ', function () {return
 echarts;
});

In this case, you only need to refer directly to the created instruction in the factory named Echarts and we can use the Echarts plugin directly within the instruction.

The code for the test 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 console's output we can easily see echarts being introduced into the instruction, at which point we can use echarts to operate in angular projects.

Summarize

The above is angularjs in the use of all the content of plug-ins, I hope the content of this article for everyone to learn or use ANGULARJS can help, if there is doubt you can message exchange, thank you for your support cloud habitat community.