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

第一步：准备

首先我们要做的是在我们的项目中引入我们所需要的依赖，假设你已经在你的电脑上已经安装好了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能有所帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • AngularJS自定义插件实现网站用户引导功能示例

    AngularJS自定义插件实现网站用户引导功能示例

    本文实例讲述了AngularJS自定义插件实现网站用户引导功能.分享给大家供大家参考,具体如下: 最近由于项目进行了较大的改版,为了让用户能够适应这次新的改版,因此在系统中引入了"用户引导"功能,对于初次进入系统的用户一些简单的使用培训training.对于大多数网站来说,这是一个很常见的功能.所以在开发这个任务之前,博主尝试将其抽象化,独立于现有系统的业务逻辑,将其封装为一个通用的插件,使得代码更容易扩展和维护. 无图无真相,先上图: 关于这款trainning插件的使用很简单,它采

  • AngularJS ng-table插件设置排序

    AngularJS ng-table插件设置排序

    基础概念 ng-table提供了一个表头来提供,基础的过滤信息: (1)指定一列的过滤器,然后模板就会使用. (2)ngTable支持number, text, select 和 select-multiple的值模板. (3)可以有选择的为NgTableParams提供初始过滤值. <div class="row"> <div class="col-md-6" ng-controller="demoController as demo&

  • AngularJS创建自定义指令的方法详解

    本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n

  • AngularJs自定义服务之实现签名和加密

    AngularJs自定义服务之实现签名和加密

    写在前面: AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. angularJS是google公司主推的js开发优秀框架... 页面展示: 在应用中进行加密是普遍存在的,个人建议在前端实现加密签名(前端加密是否必要来自知乎:http://www.zhihu.com/question/25539382) 对base64.md5.sha1加密算法

  • 详解AngularJS中自定义过滤器

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).limitTo(限制个数).lowercase(小写).uppercase(大写).number(数字).orderBy(排序).总共九种.除此之外还可以自定义过滤器,这个就强大了,可以满足任何

  • AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】

    本文实例讲述了AngularJS验证信息框架的封装插件用法.分享给大家供大家参考,具体如下: AngularJS 的表单验证规则 angular.js 的表单验证规则有 required(必填项),type="number"(必须为数字),type="email"(必须为邮箱地址),ng-max(最大值),ng-min(最小值),ng-max-length(最大长度),ng-min-length(最小长度),ng-pattern(正则验证)等等,而且angular写

  • 在AngularJS中使用jQuery的zTree插件的方法

    在AngularJS中使用jQuery的zTree插件的方法

    前段时间一直在看AngularJS的资料,感觉是个很好的框架,很想有机会尝试用它做点什么. jQuery ZTree是国内非常不错的JQuery插件,功能齐全,文档和API也非常的友好,之前项目上常用此插件. AngularJS 功能虽然非常强大,但UI上提供的插件不像JQuery那么多,而且只能通过directive定义扩展的UI插件,虽然国外已经提供了一些基于 directive的Tree功能实现,但毕竟不像ZTree那样强大,而且Tree是做项目中很长用的一个基本功能. 因此,花了一点时间

  • angularjs封装bootstrap时间插件datetimepicker

    angularjs封装bootstrap时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库.然而,它是否能与angularjs结合呢? 很多angularjs原教旨主义者对此持否定态度.他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用.任

  • AngularJS 自定义过滤器详解及实例代码

    AngularJS 自定义过滤器详解及实例代码

    AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果. 通过使用管道,可以便于双向的数据绑定中视图的展现. 过滤器在处理过程中,将数据变成新的格式,而且可以使用管道这种链式风格,还能接受附加的参数. 实现方式 下面看一下如何定义声明一个过滤器,首先依然是要创建我们自己的模块myAppModule var myAppModule=agular.module("myApp",[]); 接下来在模块的基础上,创建过滤器: myAppModule.fil

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

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

    第一步:准备 首先我们要做的是在我们的项目中引入我们所需要的依赖,假设你已经在你的电脑上已经安装好了node与cnpm只需要利用控制台在你的项目目录下使用如下命令 1. cnpm install angular --save 2. cnpm install echarts --save 在安装完毕后你将会得到一个命名为node_modules的文件夹,而我们需要的东西都在里面,当一切准备完毕后我们就可以开始我们的开发了. 第二步:开发 我认为在angular中使用其他插件的最好方法是使用指令的形

  • AngularJS中使用three.js的实例详解

    AngularJS中使用three.js的实例详解 一.轨迹球的引入问题 一开始我是用下面的方式引如轨迹球,但是会报Trackballcontrols is undefined的错. import * as THREE from 'three'; import * as Trackballcontrols from 'three'; 但其实我是能够在node_module下的threejs的包中找到Trackballcontrols的文件的,我一开始以为是引用的路径没对然后修改路径到对应包下Tr

  • Go语言中的字符串处理方法示例详解

    1 概述 字符串,string,一串固定长度的字符连接起来的字符集合.Go语言的字符串是使用UTF-8编码的.UTF-8是Unicode的实现方式之一. Go语言原生支持字符串.使用双引号("")或反引号(``)定义. 双引号:"", 用于单行字符串. 反引号:``,用于定义多行字符串,内部会原样解析. 示例: // 单行 "心有猛虎,细嗅蔷薇" // 多行 ` 大风歌 大风起兮云飞扬. 威加海内兮归故乡. 安得猛士兮守四方! ` 字符串支持转义

  • 对angularJs中自定义指令replace的属性详解

    如下所示: <div ng-app="module"> <div my-exam></div> </div> <script> var m = angular.module('module', []); m.directive('myExam', [function () { return { restrict: 'EA', template: '<h1>欢迎浏览泠泠在路上</h1>', /*1.rep

  • C++中#include头文件的示例详解

    fstream是C++ STL中对文件操作的合集,包含了常用的所有文件操作.在C++中,所有的文件操作,都是以流(stream)的方式进行的,fstream也就是文件流file stream. 最常用的两种操作为: 1.插入器(<<) 向流输出数据.比如说打开了一个文件流fout,那么调用fout<<"Write to file"<<endl;就表示把字符串"Write to file"写入文件并换行. 2.析取器(>>

  • Python中bisect的用法及示例详解

    bisect是python内置模块,用于有序序列的插入和查找. 查找: bisect(array, item) 插入: insort(array,item) 查找 import bisect a = [1,4,6,8,12,15,20] position = bisect.bisect(a,13) print(position) # 用可变序列内置的insert方法插入 a.insert(position,13) print(a) 输出: 5 [1, 4, 6, 8, 12, 13, 15, 2

  • Python中三种花式打印的示例详解

    目录 1. 引言 2. 打印圣诞树 2.1 问题描述 2.2 问题分析 3. 打印字母版圣诞树 3.1 问题描述 3.2 问题分析 4. 打印字母版菱形 4.1 问题描述 4.2 问题分析 5. 总结 1. 引言 在Python中有很多好玩的花式打印,对厉害的高手来说可能是小菜一碟,对入门的小白来说往往让人望而退步,我们今天就来挑战下面三个常见的花式打印吧... 2. 打印圣诞树 2.1 问题描述 编码实现函数christmas_tree(height),该函数输入参数为一个整数表示圣诞树的高度

  • 详解Python中生成随机数据的示例详解

    详解Python中生成随机数据的示例详解

    目录 随机性有多随机 加密安全性 PRNG random 模块 数组 numpy.random 相关数据的生成 random模块与NumPy对照表 CSPRNG 尽可能随机 os.urandom() secrets 最佳保存方式 UUID 工程随机性的比较 在日常工作编程中存在着各种随机事件,同样在编程中生成随机数字的时候也是一样,随机有多随机呢?在涉及信息安全的情况下,它是最重要的问题之一.每当在 Python 中生成随机数据.字符串或数字时,最好至少大致了解这些数据是如何生成的. 用于在 P

  • Go语言中循环语句使用的示例详解

    Go语言中循环语句使用的示例详解

    目录 一.概述 1. 循环控制语句 2. 无限循环 二.Go 语言 for 循环 1. 语法 2. for语句执行过程 3. 示例 4. For-each range 循环 三.循环嵌套 1. 语法 2. 示例 四.break 语句 1. 语法 2. 示例 五. continue 语句 1. 语法 2. 示例 六.goto 语句 1. 语法 2. 示例 一.概述 在不少实际问题中有许多具有规律性的重复操作,因此在程序中就需要重复执行某些语句. 循环程序的流程图: Go 语言提供了以下几种类型循环

  • Python中字典常用操作的示例详解

    目录 前言 初始化 合并字典 字典推导式 Collections 标准库 字典转 JSON 字典转 Pandas 前言 字典是Python必用且常用的数据结构,本文梳理常用的字典操作,看这个就够了,涉及: 初始化 合并字典 字典推导式 Collections 标准库 字典转JSON 字典转Pandas 初始化 # 最常用这种 my_object = { "a": 5, "b": 6 } # 如果你不喜欢写大括号和双引号: my_object = dict(a=5,

随机推荐