如何在AngularJS中使用插件

baoxl 發布于2019-08-22 10:41 / 866人閱讀

摘要：開發我認為在中使用其他插件的最好方法是使用指令的形式在項目中引入，這樣做有許多好處，其中最明顯的好處便是當項目中需要引入多種插件時可以使用各種不同的指令將他們分離并且還具有一次開發各處使用的組件化特點。

在實習期間，由于項目的需求，我第一次系統的使用了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的項目中進行操作了。

GPU云服務器云服務器 webrtc如何在web中使用在php中如何使用n 在js中怎樣編寫插件在php中使用組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91057.html

搜索時自動排除angularjs

摘要：不過互聯網嘛，資源豐富，找找肯定有相關功能的，果然，我發現了這個想得真周到，還會在完成搜索以后自動隱藏，體驗又上一個臺階，果然自己不光能力不夠，境界也不夠。這樣一點計算機基礎都沒用的人也同樣可以排除自己不想看到的東西。由于歷史原因在搜索angular的文章時老是有一大堆的angularjs的文章在其中 showImg(https://segmentfault.com/img/bVbr...

張金寶 2019-08-23 17:09 評論0 收藏0
Day 17: 使用 JBoss Forge 和 OpenShift 構建部署 JAVA EE 6

摘要：會警告該插件未簽名。以上命令告訴創建一個名為的項目，使用包。的工具使從部署應用非常方便。域名構成了分配給應用的的一部分。這將為我們創建一個應用容器，自動配置和。同時將創建一個私有的倉庫并克隆到本地。編者注：我們發現了有趣的系列文章《30天學習30種新技術》，正在翻譯，一天一篇更新，年終禮包。下面是第 17 天的內容。今天的30天學習30種新技術挑戰，我決定學習一下JBoss ...

YacaToy 2019-08-14 11:36 評論0 收藏0
總結的AngularJS1版本的一些面試問題

摘要：綜上所述兩者是出于不同的目的被創建的，解決的也是不同的問題。檢測模型變化的過程稱為循環。由指令注冊的事件處理函數執行。該回調函數會更新插值表達式所在的屬性。模塊主要關系腳本加載問題。 AngularJS面試題 1.與jQuery的比較 jQuery js函數庫封裝簡化dom操作使用jquery的思想是：我擁有一個DOM元素并且想讓它去做某件事。也就是命令式編程思想。 angula...

defcon 2019-08-21 16:18 評論0 收藏0
【譯】《精通使用AngularJS開發Web App》（一） --- 相關背景、社區、工具介紹

摘要：下一篇譯精通使用開發二原版書名第一章之道這一章主要是介紹，包括這個框架以及它背后的項目。幸運的是，擁有一個活躍的，支持度高的社區。另外，社區還為已經存在的工具箱里貢獻了許多有意思的工具。下一篇：【譯】《精通使用AngularJS開發Web App》（二）原版書名：Mastering Web Application Development with AngularJS Ch...

ddongjian0000 2019-08-19 14:26 評論0 收藏0
angular1.x和angular2+并行，angular1.x 升級 angular2+方案

摘要：可以在不必打斷其它業務的前提下，升級應用程序，因為這項工作可以多人協作完成，在一段時間內逐漸鋪開，下面就方案展開說明主要依賴提供模塊。在混合式應用中，我們同時運行了兩個版本的。這意味著我們至少需要和各提供一個模塊。 angular1.x 升級 angular2+ 方案我給大家提供的是angular1.x和angular5并行，增量式升級方案，這樣大家可以循序漸進升級自己的應用，不想看...

Olivia 2019-08-26 11:36 評論0 收藏0