2014年11月30日 星期日

Angular Datetime Picker

Home Page and Demo

最近需要用到日期時間的挑選器,試了一下 HTML5 的 input type="datetime",效果不滿意,找到這個 for angularjs 的 directive,還算可以接受啦,使用上也不會太複雜....

1. 下載 moment.js,多國語系應該是靠它啦,我是下載 moment+locales 的 min 版本

官網

2. 載入 css 與 js
<link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="libs/angular-bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet">

<script src="libs/angular-bootstrap-datetimepicker/js/moment-with-locales.min.js"></script>
<script src="libs/angular-bootstrap-datetimepicker/js/datetimepicker.js"></script>

3. angular.module DI 加入 ui.bootstrap.datetimepicker

4. view 加入 directive

細節可以參考 github

2014年11月20日 星期四

ubuntu 14.10 安裝 ionic

1. 安裝java sdk
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java8-installer

確認版本
java -version

 2. 安裝 Apache Ant

http://ant.apache.org/bindownload.cgi

下載後解壓縮至家目錄,原資料夾名稱太長,所以更名為 apache-ant

3. 安裝 Android SDK

http://developer.android.com/sdk/index.html

下載後解壓縮至家目錄,原資料夾名稱太長,所以更名為 adt-bundle-linux

4. 設定 PATH

vim .profile ,在最後一行:
ANDROID_HOME="$HOME/adt-bundle-linux/sdk"
PATH="$HOME/apache-ant/bin:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools:$PATH"

存檔後執行:
source .profile

5. 安裝nodejs

原套件庫中的版本較舊,改從 PPA 安裝
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

6. 安裝 cordova
sudo npm install -g cordova

如果有問題,執行:
sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0

7. 安裝 ionic
sudo npm install -g ionic

8. 執行 eclipse,開啟 Android SDK Manager,安裝 Android 4.4.2(API 19)(ionic 預設採用)

如果執行 eclipse 時遇到 libstdc++.so.6 cannot open shared object file 的問題,試著執行:
sudo apt-get install lib32stdc++6 lib32z1 lib32z1-dev

9. 新增 ionic project,加入 android platform
ionic start new_project_name
cd new_project_name
ionic platform add android

若 ionic platform add android 時出現以下錯誤:
Error: ANDROID_HOME is not set and "android" command not in your PATH.

則檢查 .profile 中是否有設定 ANDROID_HOME

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

收工啦!!

下面這一篇文章有一支 sh 檔,有興趣的可以試試看,不過軟體版本可能要自己變更一下喔。

http://blog.nraboy.com/2014/09/install-android-cordova-ionic-framework-ubuntu/

ionic + laravel 實作 android gcm 推播

這次實作 android 部份使用 ionic + cordova + ngCordova,gcm server 部份使用 laravel 4.2 + MySQL,話說這還是我第一次使用 ionic 呢........

ionic的部份:


新增一個空白專案
ionic start gcm-client blank
cd gcm-client
ionic platform add android

安裝 Push Notification Plugin for iOS and Android
cordova plugin add https://github.com/phonegap-build/PushPlugin.git

下載 ngCordova ,解壓縮後將 ng-cordova.js 或 ng-cordova.min.js 放到 www/js/ 下,並在 www/index.html 中引入(cordova.js 之前)
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>

2014年11月16日 星期日

hybridauth in laravel:Facebook與Google篇

前一篇新北市NTPCOpenID provider是額外新增的,Facebook與Google之provider已內建在hybridauth中,只需啟用並填入申請到之 app id 和 secret 即可,連至Facebook與Google認證之URL query string中provider改為facebook與google(例如:http://your_site_url/login/social?provider=facebook或http://your_site_url/login/social?provider=google

2014年11月15日 星期六

hybridauth in laravel:新北市OpenID篇

hybridauth支援許多第三方帳號,如很多人用的Google、Facebook,以及各縣市使用的OpenID,這篇文章示範如何整合新北市的OpenID當作帳號來源。

Demo:


http://oyanix.com/opensource/hybridauth/social_hub/login.php

環境:



  • composer

  • Laravel 4.2

  • hybridauth 2.3.0-dev

  • laravel專案名稱為hybridauth-test,並在web server建立hybridauth-test連結到hybridauth-test/public


開工啦!

2014年11月3日 星期一

ui-router查詢當前的state name

currentStateName = $state.$current.self.name;

currentStateName = $state.current.name;

$state.$current 物件包含的內容較詳細,除了 self 為當前 state 的物件之外,還包含了其上層 state 物件,應該是從根 state 開始,其中 $state.$current.path.length 為當前 state 之深度。console.log 輸出如下:
I {self: Object, resolve: Object, toString: function, parent: I, data: undefined…}
data: undefined
includes: Object
locals: I
navigable: I
ownParams: Array[0]
params: Array[0]
parent: I
path: Array[2]
resolve: Object
self: Object
toString: function (){return this.name}
url: n
views: Object
__proto__: Object

 

$state.current 物件只包含當前 state 物件而已,colsole.log 輸出如下:
Object {url: "/home", templateUrl: "partial/home.html", controller: "HomeCtrl", name: "index.home"}

 

CSS 讓圖片自動縮放

.container > img {
width: auto;
height : auto;
max-height: 100%;
max-width: 100%;
}

用一個 div ( class="container" ) 包住一個 img,可視需要加入min-width、min-height,除百分比也可以用像素。

參考資料:http://miko2.cglandmark.net/115/keep-image-correct-ratio-in-html-with-css/

另一篇的方法應該也可以:[CSS]讓圖片自動適應div大小