文章

目前顯示的是 十一月, 2014的文章

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

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-…

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>

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)

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

開工啦!

win7 下建立符號連結

mklink /D C:\abc D:\source
建立 C:\abc 目錄指向 D:\source 目錄

參考資料:
http://www.dotblogs.com.tw/chhuang/archive/2012/09/10/74700.aspx

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大小