AngularJS中如何使用echart外掛程式樣本詳解_AngularJS

第一步：準備

首先我們要做的是在我們的項目中引入我們所需要的依賴，假設你已經在你的電腦上已經安裝好了node與cnpm只需要利用控制台在你的項目目錄下使用如下命令

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

在安裝完畢後你將會得到一個命名為node_modules的檔案夾，而我們需要的東西都在裡面，當一切準備完畢後我們就可以開始我們的開發了。

第二步：開發

我認為在angular中使用其他外掛程式的最好方法是使用指令的形式在項目中引入，這樣做有許多好處，其中最明顯的好處便是當項目中需要引入多種外掛程式時可以使用各種不同的指令將他們分離並且還具有一次開發各處使用的組件化特點。
首先我建立了如下目錄的angular的項目

其中index.html作為主要頁面我們需要在其中利用script標籤引入所有會被用到的依賴，但是過多script標籤會拖累整個頁面的載入速度，需要最佳化的話可以使用webpack對他們進行打包，這個感興趣的可以下去自行瞭解。對於angular來說其項目會自動產生一個範圍，當你想要在angular項目中使用其他獨立的外掛程式時通常我們做的第一件事是將這個外掛程式引入到angular的範圍中，因此在項目中我建立了一個factory用於將echart傳入到angular的範圍內

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

這時只需要在建立的指令中直接引用之前建立的名為echarts的factory我們就可以在指令內直接使用echarts的這一外掛程式了。

測試時的代碼如下

.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', }}]);

從控制台中的輸出我們很容易的就可以看到echarts被引入到了指令內，這個時候我們就可以利用echarts在angular的項目中進行操作了。

總結

以上就是在AngularJS中使用外掛程式的全部內容，希望本文的內容對大家學習或者使用AngularJS能有所協助，如果有疑問大家可以留言交流，謝謝大家對雲棲社區的支援。