gulp+webpack+angular1的一點小經驗(第三部分使用一些angular1的外掛ui-bootstrap與highcharts)
阿新 • • 發佈:2018-12-15
第一個要介紹的是我們的麻煩製造器: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')]);
順利出圖了。謝謝各位網友的無私奉獻!