AngularJS套件

angular-deferred-bootstrap angular-deferred-bootstrap是用來初始化angular應用程式的套件 安裝 bower install --save angular-deferred-bootstrap 用法 deferredBootstrapper.bootstrap({   element: document.body,   module: 'MyApp',   resolve: {     APP_CONFIG: ['$http', function ($http) {       return $http.get('/api/demo-config');     }]   } }); 載入狀態css類別 deferred-bootstrap-loading while the data is loading deferred-bootstrap-error if an error occurs in a resolve function and the app can not be bootstrapped #loading {     display: none; } .deferred-bootstrap-loading #loading {     display: block !

angular-cron-jobs angular-cron-jobs是用來轉換crontab語法的介面 安裝 bower install angular-cron-jobs 載入模組 angular.module('myApp', ['angular-cron-jobs']); 用法 output:輸出值 config:設定值 init:初始值 <cron-selection output="myOutput" config="myConfig" init="serverData"></cron-selection> 設定值 $scope.myConfig = {     options: {         allowWeek : false,         allowMonth : false,         allowYear : false     } }

安裝指令 <span class="hljs-variable">$ </span>bower install ngprogress`</pre> # 加入css和js <pre class="prettyprint">`<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"app/components/ngProgress/ngProgress.min.js"</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"ngProgress.css"</span>&gt;</span>`</pre> # 載入模組 <pre class="prettyprint">`<span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'progressApp'</span>, [<span class="hljs-string">'ngProgress'</span>]);`</pre> # 注入控制器 <pre class="prettyprint">`<span class="hljs-keyword">var</span> MainCtrl = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($scope, $timeout, ngProgressFactory)</span> {</span>}`</pre> # 建立進度條物件 <pre class="prettyprint">`$scope.progressbar = ngProgressFactory.createInstance();`</pre> # 啟動進度條 <pre class="prettyprint">`$scope.progressbar.start(); $timeout($scope.progressbar.complete(), <span class="hljs-number">1000</span>);`</pre> # API <pre class="prettyprint">`-<span class="ruby"> <span class="hljs-symbol">start:</span> 啟動進度條 </span>-<span class="ruby"> <span class="hljs-symbol">setHeight:</span> 設定進度條高度 </span>-<span class="ruby"> <span class="hljs-symbol">setColor:</span> 設定進度條顏色 </span>-<span class="ruby"> <span class="hljs-symbol">status:</span> 進度條狀態 </span>-<span class="ruby"> <span class="hljs-symbol">stop:</span> 停止進度條 </span>-<span class="ruby"> <span class="hljs-symbol">set:</span> 設定進度 </span>-<span class="ruby"> <span class="hljs-symbol">reset:</span> 重設進度 </span>-<span class="ruby"> <span class="hljs-symbol">complete:</span> 完成進度 </span>-<span class="ruby"> <span class="hljs-symbol">setParent:</span> 設定進度條上層原素 </span>-<span class="ruby"> <span class="hljs-symbol">getDomElement:</span> 取得進度條元素</span> 相關連結 ngProgress 官網 ngProgress GitHub

必要條件 IE9+* AngularJS 不需要JQuery 安裝指令 <span class="hljs-comment">bower</span> <span class="hljs-comment">install</span> <span class="hljs-comment">ng</span><span class="hljs-literal">-</span><span class="hljs-comment">notify</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-comment">save</span> <span class="hljs-comment">npm</span> <span class="hljs-comment">install</span> <span class="hljs-comment">ng</span><span class="hljs-literal">-</span><span class="hljs-comment">notify</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-comment">save</span>`</pre> # CDN <pre class="prettyprint">`<span class="hljs-label">http:</span>//cdn<span class="hljs-preprocessor">.jsdelivr</span><span class="hljs-preprocessor">.net</span>/angular<span class="hljs-preprocessor">.ng</span>-notify/<span class="hljs-number">0.8</span><span class="hljs-number">.0</span>/ng-notify<span class="hljs-preprocessor">.min</span><span class="hljs-preprocessor">.js</span> <span class="hljs-label">http:</span>//cdn<span class="hljs-preprocessor">.jsdelivr</span><span class="hljs-preprocessor">.net</span>/angular<span class="hljs-preprocessor">.ng</span>-notify/<span class="hljs-number">0.8</span><span class="hljs-number">.0</span>/ng-notify<span class="hljs-preprocessor">.min</span><span class="hljs-preprocessor">.css</span>`</pre> # 用法 app.js <pre class="prettyprint">`(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span> <span class="hljs-comment">// 載入模組</span> angular .module(<span class="hljs-string">'myApp'</span>, [<span class="hljs-string">'ngNotify'</span>]) .