2016年4月8日 星期五

AngularJS ngProgress 套件

安裝指令

$ bower install ngprogress

加入css和js

<script src="app/components/ngProgress/ngProgress.min.js"></script>
<link rel="stylesheet" href="ngProgress.css">

載入模組

var app = angular.module('progressApp', ['ngProgress']);

注入控制器

var MainCtrl = function($scope, $timeout, ngProgressFactory) {}

建立進度條物件

$scope.progressbar = ngProgressFactory.createInstance();

啟動進度條

$scope.progressbar.start();
$timeout($scope.progressbar.complete(), 1000);

API

- start: 啟動進度條
- setHeight: 設定進度條高度
- setColor: 設定進度條顏色
- status: 進度條狀態
- stop: 停止進度條
- set: 設定進度
- reset: 重設進度
- complete: 完成進度
- setParent: 設定進度條上層原素
- getDomElement: 取得進度條元素

相關連結

ngProgress 官網
ngProgress GitHub