AngularJS中如何使用echart插件示例详解


Posted in Javascript onOctober 26, 2016

第一步:准备

首先我们要做的是在我们的项目中引入我们所需要的依赖,假设你已经在你的电脑上已经安装好了nodecnpm只需要利用控制台在你的项目目录下使用如下命令

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

在安装完毕后你将会得到一个命名为node_modules的文件夹,而我们需要的东西都在里面,当一切准备完毕后我们就可以开始我们的开发了。

第二步:开发

我认为在angular中使用其他插件的最好方法是使用指令的形式在项目中引入,这样做有许多好处,其中最明显的好处便是当项目中需要引入多种插件时可以使用各种不同的指令将他们分离并且还具有一次开发各处使用的组件化特点。
首先我创建了如下目录的angular的项目

AngularJS中如何使用echart插件示例详解

其中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中如何使用echart插件示例详解

总结

以上就是在AngularJS中使用插件的全部内容,希望本文的内容对大家学习或者使用AngularJS能有所帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 #Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 #Javascript
BootStrap tooltip提示框使用小结
Oct 26 #Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 #Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 #Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 #Javascript
Bootstrap 实现查询的完美方法
Oct 26 #Javascript
You might like
PHP在Web开发领域的优势
2006/10/09 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
详解Django中Request对象的相关用法
2015/07/17 Python
python学习 流程控制语句详解
2016/06/01 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
python 如何区分return和yield
2020/09/22 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
墨西哥购物网站:Elektra
2020/01/21 全球购物
财务工作个人求职的自我评价
2013/12/19 职场文书
小学数学国培感言
2014/03/10 职场文书
协议书格式
2014/04/23 职场文书
诚信承诺书模板
2014/05/26 职场文书
影子教师研修方案
2014/06/14 职场文书
学校师德师风整改措施
2014/10/27 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript