About Time

雖然說 Travis CI 這玩意兒不是新鮮事了，不過之前一直都懶得碰，直到現在做某個專案時，

寫完測試，就順便來導入 Travis CI，原本心想應該不會太難搞，但實際在導入的過程還是碰

上了一些鳥事，整個過程步驟如下：

1. 註冊帳號（一定要有 github accont） - Travis CI

2. 指定要加入 CI 的 repository

1. brew update

2. brew install mariadb

3. mysql.server start

4. 透過 /usr/local/bin/mysql_secure_installation 來設定root

5. 設定完後登陸使用mariadb command line

遇到一個 angular(1.0.8) 的問題，趕快來筆記一下。

在 ng-repeat 中，有 directive 是以 templateUrl 的方式去載入 template，有一些靈異現象會發生.....

若按下 x 會發現沒有反應。

目前的解法是不要將 alert directive 和 ng-repeat 寫在同一個 tag 上，可以加上 transclude: true 來達到或者直接分開寫，或是改換 template 的寫法，不用 templateUrl

參考資料：

原文出處：http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.html

這篇文章主要是要探討 AngularJS 的 DI 機制，但我覺得還有令一個重點是再留言的部份，就是提到了 Require 和 DI 的差別，AngularJS 的作者 misko 的敘述如下：

Require and DI are similar concepts. Because they are similar developers often get confused and they think they can substituted one for the other, but in reality they are complementary.

require.js is concerned with loading the right code into the VM in the right order once before the application can run.
DI is concerned by instantiating the right classes in the right order many times during the application runtime.

用 AngularJS 一定會想要做 Directive，今天要來說說 $eval, $parse 和 $observe 的使用狀況，最基本的狀況如下 (沒有 isolate scope)：

angular.directive('foo', function() {

  var linker = function(scope, element, attrs) {

    ...

  };

時常看到拖拉式的方法上傳檔案，會有一個 Drop zone 讓檔案拖拉進去，在製作的過程中，我希望拉近去 Drop zone 的時候邊框會變色，所以綁了一個 dragenter 和 dragleave event 在 Drop zone container 中，但 Drop zone container 中有 child element 的話，如果拖拉的時候有碰觸到 child element 的話也會觸發我所綁定的 event，想了一些方式，但都是從 Javascript 的方面著手，像是比對目前觸發的 element 是不是 Drop zone container 之類的方式，寫起來個人還是覺得髒....，沒想到這個問題可以用 CSS3 來解決，CSS3 真的很威阿~~~。

只要將 child element 加上一個屬性：

pointer-events: none;

就這樣子解決了~~歡呼~~~

不過 IE 不支援，反正我也好久沒管他了~~呵呵呵

在開發了幾支 Web App 下來，透過 Yeoman 的 Livereload 開發都還順利，不過在遇到使用 AngularJS html5Mode 時，碰上了釘子，我不能 reload page，這在開發上就不順手了，找了一下解法，終於找到囉！

說明一下我的開發環境：

Yeoman(yo, grunt, bower) + generator-angular

說明一下問題：

如果沒有開啟 html5Mode，基本上不會有太大的問題，因為 Angular 會透過 hash 來控制好 route，所以即便是 refresh page，也是去要個 index.html(畢竟是 single page 嘛)，但是若啟用 html5Mode，網址是變得很順眼，不會有 hash 出現，但在 refresh page 時，browser 會針對網址的 url 送 request，例如：網址是 http://localhost:9000/test，重新整理網頁時，會送出 GET /test 的 request，這時就會回 404....

最近在工作上要做一個新的 web app, 有一個功能是要上傳圖檔, 我想要讓使用者直接拖拉圖片之後就能顯示圖片的 thumbnail, 方法不只一種, 我選擇用 window.URL.createObjectURL 的方式來做, 產生一個 Blob 的連結, 當然是這個方法不支援 IE (IE10 沒測~不知道), 之後透過 AngularJS 的 ng-src 來顯示 thumbnail。

概念如下：

AngularJS 版本： 1.2.0rc

瀏覽器：Chrome

<img ng-src="{{thumbnail.url}}" />

在 JS 中有一個規則就是，同源策略，例如網頁內容有 iframe 而 iframe 的來源可能是子網域的內容或者是外站的內容，兩者都屬於跨網域的溝通，不過若是要與子網域溝通的話，可以透過

document.domain

來暫時解除限制，這只適用於與子網域溝通，例如：www.helloworld.com.tw 有內嵌一個 test.helloworld.com.tw 的 iframe, 可以在兩個頁面中加入 document.domain = 'helloworld.com.tw';

兩者就可以溝通了。

P.S. 有一個例外狀況，假設自己的網站是內嵌在其他網站的頁面中可以在自己的網站內使用 top.location.href 來設定網址，這可以避免自己網站被其他剪報類型的網站給內嵌。

Node 在接收上傳檔案的時候，會有一個暫存區，接收完後，

執行 fs.rename 就不用再用 fs.unlink 了，因為 rename

的行為是將暫存的檔案搬移到指定的地方去，所以就不需要

unlink 暫存的檔案囉！

今年打算和在一起四年左右的女友結婚，很高興她能答應我，於是我們開始籌備我們的婚禮。老婆在網路上找了很多自助婚紗相關的資料，找到了米嘉叔康工作室，深深被他們的風格給吸引

雖然有點貴，再經過一番討論後就決定讓找他們拍囉!拍攝婚紗的心得之後再寫一篇記錄，這間自助婚紗工作室本身不提供婚紗，所以我們要自己找外拍的婚紗。此篇最主要是分享兩間單租外拍婚紗的過程。

基本上我希望我老婆是開開心心的結婚，但在婚紗上私心又不想要租到太貴，所以還是找中間平價的婚紗，我希望是在五六千塊就能租到兩套外拍婚紗。一開始我們到愛國東路婚紗街去找，是有看到幾件不錯的，但是租起來都要四五千塊一件，當下就是爆預算，回家上網找了資料後，發現了幾間婚紗店能符合我們的需求，我們去了

兩間:

1. My party

最近想要讓自己更有生產力一些，想到了 WebStorm，這款 IDE 真的頗強大的

大家可以到官網看看。

由於最近都在寫 angular project，我就想要將 yeoman , generator-angular

和 WebStorm 做個結合，能讓我在 windows 上的 webstorm 直接 call angular

generator 的 command 來產生檔案，例如: angular:controller test