如何在AngularJS中使用插件

在實習期間，因爲項目的需求，我第一次系統的使用了angular這一優秀的js框架，其所擁有的許多優秀特性極大的方便了項目的開發，然而在開發中也遇到過很多的問題，如今趁本身被抓回學校無所事事的這段時間將本身的開發經歷分享給第一次接觸angularjs的開發人員用以參考。（這裏將會使用angularjs1結合百度的圖表插件echart做爲例子用以演示）

---

1.準備

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

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

在安裝完畢後你將會獲得一個命名爲node_modules的文件夾，而咱們須要的東西都在裏面，當一切準備完畢後咱們就能夠開始咱們的開發了。

2.開發

我認爲在angular中使用其餘插件的最好方法是使用指令的形式在項目中引入，這樣作有許多好處，其中最明顯的好處即是當項目中須要引入多種插件時可使用各類不一樣的指令將他們分離而且還具備一次開發各處使用的組件化特色。
首先我建立了以下目錄的angular的項目
s
其中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的項目中進行操做了。