{{ ngNoob }}

UI as route

改變 URL 之後，能夠在不變動(也不重載) view 的內容的情況下吃到新的參數而產生不一樣的 state。

用講的很抽象，這邊來看一個例子。

建議使用 popout 模式觀看，比較能夠看出網址列的變化。

從例子中可以發現這是應該是一個製作 webapp 常常會使用到的功能，接下來就來看看如何利用 ui-router 實作出來。

用 ui-router 實作

.config 設定

首先在 .config 內的 configuration 內容一般狀態可能如下：

$stateProvider .state('home', { url: '/home', templateUrl: 'home.html', controller: 'HomeCtrl' });

這時候需要利用 ui-router 的巢狀特性，讓子 state 改變的時候不會去 reload 當前(母 state)的 <ui-view> 內容。

由於 home.child 只是做為我們更新 $stateParams 的手段，它根本不需要 <ui-view> directive，這邊就不將 template / templateUrl 及 controller 選項加入它的 state configuration 中(controller 在沒有 template 的情況下還是會 initalize，不過由於已經沒有 on-screen 的 attach 目標，這邊索性不加)。

$stateProvider .state('home', { url: '/home', templateUrl: 'home.html', controller: 'HomeCtrl' }) .state('home.child', { url: '/:pos' });

感知變動並更新 view

一般標準的 $stateChangeSuccess 之後會觸發 controller 去 attach 新的 scope 到目標的 <ui-view> 上，因此我們會把每次 state change 之後執行的內容寫在綁定的 controller 裡面；然而在上面的設定之下，我們已經沒有會跟著 initialize 的 controller，因此需要一些寫法來幫助我們執行在 UI as route 的 state change 之後需要進行的動作。

直接綁定 $stateParams

可以選擇綁在任一上級 $scope 或是 $rootScope 上，綁定的 view model 名稱可以隨意更改(這邊用的是 $stateParams)，以不要與 view 裡面有用到的混淆為準則。

/** * 綁在 $rootScope */ .run(function ($rootScope, $stateParams) { $rootScope.$stateParams = $stateParams; }) /** * 綁在任一上級 $scope */ .controller('MainCtrl', function ($scope, $stateParams) { $scope.$stateParams = $stateParams; })

在 view 裡面使用(假定 pos 輸入為數字)：

<div class="index-number" ng-class="['a', 'b', 'c', 'd'][$stateParams.pos]"> 目前的 pos: {{ $stateParams.pos }} </div>

使用 $scope.$on

用 $scope.$on 的好處是可以擺在特定想要應對的位置，就結構上來講比較沒有用到 scope inheritance，或許對整個 app 的架構有正面的幫助。

.controller('SomeCtrl', function ($scope, $stateParams) { $scope.$on('$stateChangeSuccess', function () { $scope.params = angular.copy($stateParams); }); })

在 view 裡面使用(假定 pos 輸入為數字)：

<div class="index-number" ng-class="['a', 'b', 'c', 'd'][params.pos]"> 目前的 pos: {{ params.pos }} </div>

使用 $scope.$watch

$scope.$watch 的用法類似 $scope.$on。

.controller('SomeCtrl', function ($scope, $stateParams) { $scope.$watch(function (scope) { return $stateParams; }, function (newParams, oldParams) { $scope.params = newParams; }); });

在 view 裡面使用(假定 pos 輸入為數字)：

<div class="index-number" ng-class="['a', 'b', 'c', 'd'][params.pos]"> 目前的 pos: {{ params.pos }} </div>

不同的 UI as route

最後，做為觸類旁通的這個範例展示兩種不同的 UI as route 作法：

使用 state 的 parameter - #/?theater=1

使用 state - #/theater

一樣建議使用 popout 模式觀看。

後記

ui-router 這 module 真的讓 angular app 有了更多的可能性，也期待它繼續發展下去。

環境設定

不載入 jQuery

由於 AngularJS v1.2.0 於本文撰寫時尚在 RC2，並且我自己主 project 在使用的版本為 v1.1.5，因此本文針對的版本為 v1.1.5。

.css() as setter 不會自動加上 px 單位

jQuery 除了部分的 css style，其餘 style 在沒有帶入單位的時候，預設都會加上 px 做為單位，而 jqLite 不會幫你加。

// works iElm.css('font-size', '18px'); // won't work iElm.css('font-size', 18);

Demo

與下一段 getter 一併 Demo。

.css() as getter 不會取 computed style

有些 style 是具有繼承性質的(e.g. font-size, color, etc...)，而 jqLite 的 .css() 不像 jQuery 會想辦法取得瀏覽器計算後的結果，它只能夠取得該 DOM element 上已設定的 style 內容。

console.log( iElm.css('font-size') ); // output: "" // jQuery 的取法 iElm[0].ownerDocument.defaultView.getComputedStyle(iElm[0]).fontSize;

Demo

利用 <input type="text"> 來修改期望的 font-size

用上一段所說的方法實做了兩種 setter 的 directive font-size-success 及 font-size-error

更新 font-size 的同時，另一個 directive get-font-size 會嘗試從沒有被直接設定 style 的 <span> 上取得 jqLite 直接拿的 font-size 以及計算的 font-size

.bind() 與 .unbind() 對 eventType 參數的理解不同

此問題於 v1.2.0rc1 後已修正。

何謂理解不同呢？在 eventType 代入 "play ended pause" 的時候：

.bind() 會視為 play, ended, pause 三個分別處理

.unbind() 沒有把它們切開，於是根本就會找不到這個 event 來 unbind

// 一次綁三個: play, ended, pause iElm.bind('play ended pause', playbackHandler); // 這邊這樣無法 unbind 且不會跳錯誤 iElm.unbind('play ended pause', playbackHandler); // 一樣無法 unbind iElm.unbind('play ended pause'); // 成功 unbind，不過基本上把事件都清光了 iElm.unbind(); // 一個一個來會成功 angular.forEach(['play', 'ended', 'pause'], function (evtName) { iElm.unbind(evtName, playbackHandler); }); // 對，就是一個一個來 iElm.unbind('play', playbackHandler); iElm.unbind('ended', playbackHandler); iElm.unbind('pause', playbackHandler);

Demo

bind-unbind directive 試著將給定的事件 .bind() 至按鈕上並立刻 .unbind()

實作 .unbind() 的方法是上述不會成功的做法，因此嘗試去按鈕上觸發事件還是可以成功執行 bind-unbind-trigger 的內容

歡迎使用 Edit 功能將 directive 裡面的 .unbind() 替換成會成功的做法看看結果

TL;DR

把 jQuery 擺在 AngularJS 前載入，一勞永逸。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>

搜索

我在應用 git-source 到 ngNoob 的初期就有發現到，點進一篇文章之後幾乎就無法用「上一頁」的方式點回來，因為有大量的歷史記錄被塞給瀏覽器。當時我以為是 Tumblr 或是這個 blog theme 的問題所以不以為意，事到如今...

難道是我的 git-source 出的包！？

首先必須要找出問題的來源，於是我在 code 中埋首好一陣子，嘗試各種能夠避免出現上述情況的方法(刪改大法！)；同時也去 ui-router(git-source 的關鍵 module) 那邊看看他們的 example 跟我的寫法有什麼不同(已試過如果嵌入 ui-router 的 example 是不會有同樣現象發生)。

經過了一小時，不可以說是一無所獲，但尚無法掌握決定性的觸發原因.. 基本上已經鎖定在 .config 的時候，就差臨門一腳了。

此時我腦中浮現了一個我曾經看過(但也是不以為意)的 routing behavior。

首先 ui-router 設定如下：

// inside angular app config $stateProvider .state('route1', { url: '/route1?this&is&a&test', templateUrl: 'route1.html' });

接著當你嘗試在網址列以

#/route1?test=1&is=2&this=3&a=4

存取 route1 的時候，你會看到 URL 自動被轉換成

#/route1?this=3&is=2&a=4&test=1

這不就是增加了一次 history 嗎！

真身

經過修改 code 進行交叉比對之後，確認就是在上述的設定下會有被大量幅報 browser history 的現象，而每個內嵌的 iframe 剛好報一個。

這是 ui-router 有意要讓它發生的嗎？重重的疑惑驅始我去 trace ui-router 的 source code...

ui-router 內的 state change 觸發都是由 $state.transitionTo 負責的，而它有參數可以決定本次的 state transition 要不要 update location (即改變 URL)。

循著這個概念，我就直接往與 transitionTo 有關的地方找去，還順便去 github 上 blame 了一下...

於是我找到了關鍵的 commit。

(Bug) Demo

現象

在 發現 / 搜索 bug 過程中擔任關鍵角色的現象。

下方的 location change log 會在每次準備進行 state transition 的時候清空 (也就是 $stateChangeStart 的時候)，讓我們可以清楚的觀察到 URL 改變的觸發情況。

直搗黃龍

直接使用 $state.transitionTo() 來做第三個參數代入 false 的 state transition。如果 $state.transitionTo() 真的沒有問題，理應下方的 location change log 在切換 route 時會保持空白。

後記

ui-router 還是很好用啦...

然後我已經 report issue 了，只好先用 fork 來的 custom build 撐一下：

http://pc035860.github.io/ui-router/build/angular-ui-router.js

ngQueue

ngQueue 這個 module 就是為了因應上述的情況而誕生的，特色如下：

支援同步 / 非同步工作

與 $q 結合，並提供傳入 context 及 arguments 的功能

建立 queue 時可以指定可同時執行的工作數量

更多資訊可以去 http://github.com/pc035860/ngQueue 看看

開始使用 ngQueue

首先頁面內載入 ngQueue.js

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> <script src="http://pc035860.github.io/ngQueue/ngQueue.min.js"></script>

接著在 AngularJS app 中載入 ngQueue module

angular.module('myApp', ['ngQueue']);

排入工作

首先先用 ngQueue 提供的 $queueFactory 建立 queue instance

// 建立同時執行兩件工作的 queue var queue = $queueFactory(2);

同步

接著可以排入同步的工作(即不是非同步的工作)，範例中我們也嘗試傳入自訂的 context 以及 arguments。

queue.enqueue(function (inA, inB, inC) { console.log(this); // {name: "context"} console.log(inA, inB, inC); // hello world ! doSomething(); // 傳入 context 以及 arguments }, {name: 'context'}, ['hello', 'world', '!']);

非同步

此類工作與同步工作在排入時最大的區別在於，工作內容最後的 return 值必須是 promise。

下面以兩種為例，分別具有各自的代表性：

使用 $timeout 與 $q - 自訂的 promise 工作

// $timeout delay queue.enqueue(function () { var dfd = $q.defer(); $timeout(function () { dfd.resolve(); // or dfd.reject() }, 100); return dfd.promise; });

使用 $http - AngularJS 內建就會 return promise 的工作

// $http request queue.enqueue(function () { return $http.get('/some/api/call') .success(function () { // do something if success }) .error(function () { // do something if error }); });

Demo

這個 demo 演示了 ngQueue 處理排入的同步 / 非同步工作的實際情況。 可以透過上方的按鈕選擇排入「同步」、「非同步」以及「亂數 10 個」的工作，而 queue 的 instance 在建立的時候設定為同時能夠執行兩個工作，因此我們在 demo 中可以看到同時會有兩個數字在倒數。

任務完成

所以最後回頭修改本篇的第一個範例，得到我們使用 ngQueue 之後的版本。

需要注意的是，如果 taskId 不用 argument 的方式傳入 enqueue 的 function 的話，真的輪到該 function 執行的時候，會無法透過 closure 抓到正確的 taskId。

問題在於，有加上 action 屬性的 <form> 元素只有在直接被使用者操作的情況下才能夠成功送出。

於是我們還是會碰到 AngularJS natively 提供的 solution 無法解決的問題：

需要先與後端確認資料正確性之後再送出 - 無直接操作送出的動作

需要送出隱藏的 <form> - 無法透過使用者操作

過往我們怎麼做的？在 AngularJS 裡我們又該何去何從呢？

// jquery way $('form')[0].submit() // angular way? // $document injectable $document.find('form')[0].submit(); // $element injectable $element.find('form')[0].submit();

這樣當然不是好的做法！

Controller 裡面不要做 DOM 操作

如果純靠 jQLite 的 selector 能力(即不使用 jQuery)，頁面上有多個 <form> 的時候使用起來是相對難以選擇到真正的目標(因為 jqLite 的 selector 只支援 tag)

directive: submit-it

angular.module('submitIt', []) /** * @ngdoc directive * @description form submission trigger * * @param {boolean} submit-it submit form on `true` * @param {string} si-action submit action(optional) * @param {string} si-method submit method(optional) */ .directive('submitIt', [ '$timeout', function ($timeout) { return { restrict: 'A', link: function postLink(scope, iElm, iAttrs) { var _submitWatch = scope.$watch(iAttrs.submitIt, _onSubmitWatch), _savedAction, _savedMethod; iAttrs.$observe('siAction', function (val) { if (val) { _savedAction = val; } }); iAttrs.$observe('siMethod', function (val) { if (val) { _savedMethod = val; } }); function _onSubmitWatch(submit) { if (submit && iElm[0].tagName === 'FORM') { if (_savedAction) { iElm.attr('action', _savedAction); } if (_savedMethod) { iElm.attr('method', _savedMethod); } $timeout(function () { iElm[0].submit(); }); _submitWatch(); } } } }; }]);

用法

submit-it 本身做為「送出 <form>」的觸發器，其值為 true 時即會送出 <form>

附加的 si-action、si-method 則是提供了於送出 <form> 前的瞬間設定 <form> 的 action 及 method 的功能

Demo