Pymaster

其實這是一個看一看 ui-router 的 wiki，再瞄一下 source code 就可以發現的 bug ，不過由於影響不是慎大，也沒有寫在 test spec 裡，它就這樣在 0.2.0 release 接近兩個月的現在還躺在那兒。

竹林中

陰影

昨天在忙 git-source (其實也就是在忙這個 blog)，觀察到一件讓我非常在意的事情。

下面是一頁我在 localhost 測試嵌入 git-source 到頁面中的截圖，這頁一開進去，歷史記錄馬上就有三筆。

緊接著，我按一次「重新整理」，變成下面這樣：

此刻，我驚覺這不是一個小問題，弄不好可能會毀掉我的 git-source 專案…

https://github.com/pc035860/git-source

git-source shows off your github pages hosted source codes and examples.

最近終於完成的小專案，其實是為了寫 blog 特別設計的，希望能夠同時滿足四件事情

• 程式碼上色
• 能看結果
• 可以編輯
• 速度快

原本 hosting 有考慮過 Plunker，不過 Plunker 的穩定度跟速度實在有待加強，最後就決定採用 GitHub Pages。

因此目前 blog 內的 內嵌 demo 都是透過 git-source 實現的。 更新：Blog 搬移到 logdown 之後還是改用 Plunker了。

http://angular-tips.com/blog/2013/08/tip-directives-with-the-same-name/

By doing this we can write directives that we need to run when other directive appears. So if we need to do something in every <input> we only need to write another input directive… etc.

Angular will run both.

$q promise 是使用 AngularJS 時相當重要的一環，熟悉並活用之後可以讓許多原本看似較雜亂的 event-base 程式碼看起來謹然有序（當然也不是所有的 event-base 程式都適合使用 promise 來實現）。

排隊的需求

有時候我們會碰到一些特別的情況：

一段一段的動作是依序進行，但觸發的時候卻又是一次性的（比如說在一個 loop 中一次排定 10 個非同步的工作，需要依序執行）。

用程式碼表示大概是這樣：

var taskIds = [1, 2, 3, 4, 5];

angular.forEach(taskIds, function (taskId) {

  // 以 $http 為例
  $http.get('/someUrl', {params: {taskId: taskId}});

});

console.log('工作順利完成！');

然而我們真正想做的事情是這樣：

$http.get('/someUrl', {params: {taskId: 1}})
.then(function () {
  return $http.get('/someUrl', {params: {taskId: 2}});
})
.then(function () {
  return $http.get('/someUrl', {params: {taskId: 3}});
})
.then(function () {
  return $http.get('/someUrl', {params: {taskId: 4}});
})
.then(function () {
  return $http.get('/someUrl', {params: {taskId: 5}});
})
.then(function () {
  console.log('工作順利完成！');
});

在上面的例子中，工作只有五項所以固然可以自己打一打程式碼解決，一般來說碰到的情況會有下面的困境：

• 工作項目數未知（為動態的或為參數）
• 同時可以進行的工作數不只一項（以上面為例即 1, 2 可以同時進行，而 3, 4 可以同時進行，最後再單獨執行 5 即可）

AngularJS 做為一個以建立 Single Page App 為目標的 framework，當然是不希望你在 web app 中碰到需要與後端做資料溝通時會需要 refresh 整個網頁，因此它提供了完整的 HTML <form> 解決方案，諸如：

• 透過 form directive 攔截預設的 form submission
• 多樣化而且可以自訂的 validation 功能
• 提供 ng-submit 以及 [type=“submit”] 上的 ng-click 作為真正送出 form 時候的程式動作

問題

然而，我們不時的還是會碰到真正需要 page refresh 的 form submission

• 該功能還沒有做 API 的時候（容易發生在從 backend-based 轉移成為 SPA 的時候）
• 介接第三方網站功能的時候（例如金流業者）

貼心如 AngularJS，當然也理解你的困難，於是

Angular prevents the default action (form submission to the server) unless the <form> element has an action attribute specified.

可惜天下的事情通常都不會如此順利(蛤)。