2015年5月11日 星期一

好用的提示訊息模組 for angular

Angular Growl 2    Demo  ==> 目前使用中

angular-inform    Demo

angular-bootstrap-growl

bootstrap-notify    Demo  ==> 值得試試

[筆記] angular-loading-bar

ngmodules.org

Github

Demo

用途:

使用 XHR 的方式向後端發出 request 時,於頁面上方顯示進度條與 spinner

用法:

1、module dependency,ngAnimate 可不加

angular.module('myApp', ['angular-loading-bar', 'ngAnimate']);


2、引入 css、js,路徑及載入檔案依實際狀況調整

<link href="build/loading-bar.min.css" media="all" rel="stylesheet" type="text/css"></link>
<script src="build/loading-bar.min.js" type="text/javascript"></script>


3、可以調整 css 以自訂外觀、位置,基本上這樣就可以用囉。

----------------------------------------------------

進階設定:

預設 loading bar (頁面頂端)和 spinner (上 10px、左 10px)都會出現,在 XHR request 發起後 100ms 啟動。















1、關閉 loading bar 或 spinner,設定啟動延遲時間

.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {

    cfpLoadingBarProvider.includeSpinner = false; // 關閉 spinner

    cfpLoadingBarProvider.includeBar = false; // 關閉 loading bar

    cfpLoadingBarProvider.latencyThreshold = 500; // 設定啟動延遲時間為 500ms

 }])


2、忽略指定的 XHR request

於 headers 物件加入 ignoreLoadingBar: true

$http.get('/status', {
    ignoreLoadingBar: true
});

$http.post('/save', data, {
    ignoreLoadingBar: true
});

.factory('Restaurant', function($resource) {
    return $resource('/api/restaurant/:id', {id: '@id'}, {
        query: {
            method: 'GET',
            isArray: true,
            ignoreLoadingBar: true
        }
    });
});

一般使用大概就這樣囉。

如果不使用 interceptor,只使用 service ,或是想了解相關 event,請參考 Github 頁面。

PS. 我搭配 restangular 加入 ignoreLoadingBar: true 時似乎沒有作用....

SQLite GUI tools in Ubuntu

最近用 Laravel 開發時本機資料庫都是用 SQLite ,找了 2 個 GUI tool 來用,Ubuntu 軟體中心用 sqlite 搜尋一下就有了。

Sqliteman ==> 目前比較喜歡用這個 ^_^



















SQLite Database Browser


2015年5月7日 星期四

Laravel Eager Loading 時選擇要載入的欄位

Eager Loading 是個很方便的功能,不過預設會載入所有欄位,如果只想載入部份欄位呢?

可以在取資料時以 closure 處理或是在 model 中定義 relation 時指定。


public function roles()
{
 //指定只要 Role 的 id 與 name 欄位
 return $this->belongsToMany('App\Role')->select(['id','name']);
}


User::with(['roles'=>function($query){
                $query->addSelect('id','name');
            }])->get();


PS.傳入select和addSelect之參數應該用陣列或字串形式都可以吧....

參考資料:
Eager Loading in Laravel 4
Laravel Eager Loading - Load only specific columns
Column selection in eager loading

如果有 group 又有分頁和 Eager Loading,效能問題要考慮一下囉
Laravel pagination with grouping and eager loading

2015年5月2日 星期六

angularjs $scope 的 $root 屬性

angularjs 中所有的 $scope 都是 $rootScope 的 child,$scope 其中一個 $root 屬性,為 $rootScope 的參照,所以以下兩種用法是一樣的:

假設 $rootScope.mydata = "Hello";

console.log( $rootScope.mydata );

console.log( $scope.$root.mydata );

在 view 裡要取用 $rootScope.mydata 可以這樣用:

{{ $root.mydata }}


-------------------------------------------------------
參考資料:
https://docs.angularjs.org/api/ng/type/$rootScope.Scope
最下方的 Properties

stackoverflow:what-is-the-difference-between-scope-root-and-rootscope