1. 程式人生 > >gulp+webpack+angular1的一點小經驗(第三部分使用一些angular1的外掛ui-bootstrap與highcharts)

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')]);

  順利出圖了。謝謝各位網友的無私奉獻!