• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS中如何使用echart插件示例详解

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs示例,angularjs 详解,angularjs 路由详解,angularjs,angularjs菜鸟教程等相关知识,希望在学习及工作中可以帮助到您

第一步:准备

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

 1. cnpm install angular --save
 2. cnpm install echarts --save
</div>

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

第二步:开发

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


其中index.html作为主要页面我们需要在其中利用script标签引入所有会被用到的依赖,但是过多script标签会拖累整个页面的加载速度,需要优化的话可以使用webpack对他们进行打包,这个感兴趣的可以下去自行了解。对于angular来说其项目会自动生成一个作用域,当你想要在angular项目中使用其他独立的插件时通常我们做的第一件事是将这个插件引入到angular的作用域中,因此在项目中我创建了一个factory用于将echart传入到angular的作用域内

.factory('echarts',function(){
 return echarts;
});
</div>

这时只需要在创建的指令中直接引用之前创建的名为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',
 }
}]);
</div>

从控制台中的输出我们很容易的就可以看到echarts被引入到了指令内,这个时候我们就可以利用echarts在angular的项目中进行操作了。

总结

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

</div>

您可能想查找下面的文章:

  • AngularJS折叠菜单实现方法示例
  • AngularJS使用ng-class动态增减class样式的方法示例
  • AngularJS全局警告框实现方法示例
  • AngularJS+bootstrap实现动态选择商品功能示例
  • AngularJS前端页面操作之用户修改密码功能示例
  • angularJS之$http:与服务器交互示例
  • angularjs+bootstrap菜单的使用示例代码
  • AngularJS的Filter的示例详解
  • AngularJS表格样式简单设置方法示例
  • angularjs实现下拉列表的选中事件示例

相关文章

  • 2017-05-30AngularJS框架的ng-app指令与自动加载实现方法分析
  • 2017-05-30利用CSS3在Angular中实现动画
  • 2017-05-30Angularjs CURD 详解及实例代码
  • 2017-05-30Angular2学习笔记——详解路由器模型(Router)
  • 2017-05-30AngularJS中transclude用法详解
  • 2017-05-30AngularJS基础 ng-if 指令用法
  • 2017-05-30Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
  • 2017-05-30初识angular框架后的所思所想
  • 2017-05-30AngularJS 中的Promise --- $q服务详解
  • 2017-05-30AngularJS入门教程之AngularJS 模板

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 详解支持Angular 2的表格控件
    • AngularJS过滤器filter用法总结
    • AngularJS内建服务$location及其功能详解
    • Angular用来控制元素的展示与否的原生指令介绍
    • 详解使用angular-cli发布i18n多国语言Angular应用
    • AngularJs学习第五篇从Controller控制器谈谈$scope作用域
    • AngularJS $on、$emit和$broadcast的使用
    • AngularJS ng-app 指令实例详解
    • 后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
    • Angular2 (RC4) 路由与导航详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有