当前位置: 首页 > 工具软件 > Highcharts-ng > 使用案例 >

gulp+webpack+angular1的一点小经验(第三部分使用一些angular1的插件ui-bootstrap与highcharts)

倪鸿禧
2023-12-01

  第一个要介绍的是我们的麻烦制造器:angular-ui-bootstrap
  ui-bootstrap可以有很多通用的插件给大家用,比如弹窗啊(modal),翻页控件啊(pagination),为什么说它麻烦呢,因为它家官网被墙了,看不到文档!可我就是要用啊,怎么办?老办法,下载来再说:

npm install --save-dev angular-ui-bootstrap

  然后到mode_modules文件夹里找到这家伙,比如我要用pagination:

\node_modules\angular-ui-bootstrap\src\pagination\docs\demo.html

  每个里边都有个例子文件,供大家学习使用,看了以后就知道怎么用了。还有这个modal,网上都是这样的代码注入:$modal,可是实际上demo里的是这样:$uibmodal(血与泪的经验,没文档好难过)。
  
  第二个要介绍的是:highcharts
  说一下怎么在这里用highcharts绘图表:网上查了很多资料,首先:

npm install highcharts-ng

  用以在angular中作为依赖引入:

var statisticModule = angular.module('statisticModule', [require('highcharts-ng')]);

  然后就一直报这个Chart未定义的错误,搞了好久,原来意思是:这个highcharts-ng并不是highcharts的主体,而是highcharts的一个插件而已,所以还要引入highcharts的主体,那好:

npm install --sava-dev highcharts

  然后代码里:

var statisticModule = angular.module('statisticModule', [require('highcharts'),require('highcharts-ng')]);

  这样还是不行,报错很明显。。。网上查了说:要引入一个commonjs版的highcharts,好的。。。

npm install --sava-dev commonjs-highcharts

  还是不行。。。然后我仔细想了一下,highcharts本身并不用导入angular,有highcharts-ng做代理,这个应该这么写:

require('commonjs-highcharts');
var statisticModule = angular.module('statisticModule', [require('highcharts-ng')]);

  顺利出图了。谢谢各位网友的无私奉献!

 类似资料: