gulp+webpack+angular1的一点小经验(第三部分使用一些angular1的插件ui-bootstrap与highcharts)
第一个要介绍的是我们的麻烦制造器: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')]);
顺利出图了。谢谢各位网友的无私奉献!