Posts match “ post ” tag:

jqLite Orz list (v1.1.5)

jqLite 是 AngularJS 為了方便進行 DOM 操作而又不希望讓 jQuery 成為 dependency 的解決方案,官方文件如是說:

jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM. jqLite implements only the most commonly needed functionality within a very small footprint, so only a subset of the jQuery API - methods, arguments and invocation styles - are supported.

並且在文件下方給了一串相關 API 文件的連結,連到 jQuery API Documentation 去。

嗯?連到 jQuery API Documentaion 有什麼不對嗎?

前言

爬一爬 jqLite 的 source code 就可以知道,其實它是嘗試照著 jQuery 的部分 API 做 subset-implementation,結果就是雖然它給了 jQuery API Documentation 的連結,它部分 API 的部分功能是與 jQuery 不同的。如果你還是照著使用 jQuery 的用法來使用 jqLite 而沒有做好爬 jqLite source code 的心理準備,應該會有點 happy ...

本文整理了 v1.1.5 幾個比較常碰到的地雷,與各位共勉之。

Read on

踩到 ui-router 0.2.0 的 bug

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

竹林中

陰影

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

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

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

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

Read on

用 ngQueue 來完成需要排隊的非同步工作

$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 即可)
Read on

Programmatical form submission

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.

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

Read on