那 Angular 那 AJAX 那 RESTful

1. Gordon
http://weisnote.blogspot.tw/

3. 抓資料
↓
顯示出來
3

4. 
如果它是 <input type="submit" />
1.
2.
3.
4.
request 到後端
C# 無雙
瀏覽器轉圈圈
生出 HTML
4

5. 
如果它是 <input type="button" />
1. onclick…
2. JS無雙
3. AJAX
1. 輸入
2. C# 無雙
3. 輸出
4. JS無雙
5. 生出 HTML
5

6. 
XMLHttpRequest
6

7. 
$.ajax()
7

8. 
$http
8

9. 
$resource
9

10. 
$http 返回 promise
◦ 封裝了 XMLHttpRequest 也支持 JSONP
◦ 基于 $q 提供了 promise 的封裝
◦ 提供 success 和 error 方法 用來定義 promise callback

$resource 返回 object
◦ 封裝了 $http
◦ 利於使用 RESTful style
◦ 簡化一些繁複的 callback
10

11. 
Callbacks, Promises, and Coroutines
◦ http://www.slideshare.net/domenicdenicola/ca
llbacks-promises-and-coroutines-oh-my-theevolution-of-asynchronicity-in-javascript
11

15. 自由開始
依序開始
自由顯示
同時顯示
15

16. 自由開始
自由顯示

17. 依序開始
自由顯示

18. 自由開始
同時顯示

19. 依序開始
同時顯示

21. 自由開始
自由顯示

22. 依序開始
自由顯示

23. 自由開始
同時顯示

24. 依序開始
同時顯示

26. 自由開始
自由顯示

27. 依序開始
自由顯示

28. 自由開始
同時顯示

29. 依序開始
同時顯示

31. 
WIKI
◦ http://zh.wikipedia.org/wiki/REST

要點及標準
◦ CRUD 對應 POST、GET、PUT、DELETE
31

34. <div ng-controller="rolesController" ng-cloak>
<button class="btn add" ng-click="newRole()">新增</button>
<hr />
<ul>
<li ng-repeat="role in roles">
<!--顯示模式-->
<div class="showBox" ng-hide="role.isEdit">
<img class="pic" ng-src="{{role.Pic}}" ng-click="showDetail(role)" />
<span class="nameTxt">{{role.Name}}</span>
<span class="conversationTxt">{{role.Conversation}}</span>
<div class="close" ng-click="remove(role)"></div>
<div class="edit" ng-click="editRole(role)"></div>
</div>
<!--編輯模式-->
<div class="editBox" ng-show="role.isEdit">
大名:<input type="text" ng-model="role.edit.Name" />
對話:<input type="text" ng-model="role.edit.Conversation" /><br />
頭像:<input type="text" ng-model="role.edit.Pic" />
<span ng-click="test(role.edit)">test</span><br />
<textarea class="editArea" ng-model="role.edit.Info"></textarea>
<div class="close" ng-click="cancel(role)"></div>
<button class="btn" ng-click="save(role)">確定</button>
</div>
</li>
</ul>
<div class="detailArea">
{{currentRole.Info}}
</div>
</div>
34

35. angular
.module('app', ['ngResource'])
.factory('roleApi', ['$resource', function ($resource) {
//設定 $resource
return $resource(
'/api/Roles/:RoleId',
{ RoleId: "@RoleId" },
{ update: { method: "PUT" } }
);
}])
35

36. .controller('rolesController', ['$scope', '$q', 'roleApi', function ($scope, $q, roleApi) {
/*
所有 role
雖然只有一行 實際上是非同步的
1.先給予 roles 空參考
2.取得資料後塞入該參考
3.靠 Data Binding 機制更新 html
*/
$scope.roles = roleApi.query();
//當前的 role 用於顯示 info
$scope.currentRole = {};
//點擊 role 顯示 info
$scope.showDetail = function (role) {
if (!role.Info) {
roleApi.get({ RoleId: role.RoleId }, showDetailSuccess, defaultError);
function showDetailSuccess(result) {
role.Info = result.Info;
}
}
$scope.currentRole = role;
};
36

37. //加入新 role
$scope.newRole = function () {
//push 空物件用以編輯
$scope.roles.push({
RoleId: -1,
Name: '',
Conversation: '',
Pic: '',
Info: '',
edit: {},
isEdit: true
});
};
37

38. //切換編輯模式
$scope.editRole = function (role) {
//infoPromise 確保有 Info
infoPromise().then(toEditMode);
function infoPromise() {
var deferred = $q.defer();
if (!role.Info) {
roleApi.get(role, getInfoSuccess, defaultError);
function getInfoSuccess(result) {
role.Info = result.Info;
deferred.resolve();
}
} else {
deferred.resolve();
}
return deferred.promise;
}
function toEditMode() {
//將 role 的內容 複製給 role.edit 因為在尚未儲存之前 不應與原本的 role 繫結
role.edit = angular.copy(role);
//標示為編輯中
role.isEdit = true;
};
};
38

39. //取消編輯
$scope.cancel = function (role) {
role.isEdit = false;
if (role.RoleId == -1) {
//移除 temp role
$scope.roles = _.without($scope.roles, role);
}
};
//移除 role
$scope.remove = function (role) {
roleApi.remove({ RoleId: role.RoleId }, removeSuccess, defaultError)
function removeSuccess() {
$scope.roles = _.without($scope.roles, role);
}
};
39

40. //儲存
$scope.save = function (role) {
if (role.RoleId == -1) {
roleApi.save(role.edit, saveSuccess, defaultError);
} else {
roleApi.update(role.edit, saveSuccess, defaultError);
}
function saveSuccess(result) {
role.RoleId = result.RoleId;
role.Name = result.Name;
role.Conversation = result.Conversation;
role.Pic = result.Pic;
role.Info = result.Info;
role.isEdit = false;
}
};
40

41. function defaultError(ex) {
console.log(ex);
alert('尼瑪，報錯啦！');
}
41

42. 42

43. 
Web API in Web Form 之 SPA 明知山有虎 偏向虎山行 上篇
◦ http://weisnote.blogspot.tw/2013/04/web-api-in-web-form-spa.html

AngularJS in Web Form 之 SPA 明知山有虎 偏向虎山行 下篇
◦ http://weisnote.blogspot.tw/2013/04/angularjs-in-web-form-spa.html

AngularJS 玩弄手札 Mr.Q 非關 Jolin
◦ http://weisnote.blogspot.tw/2013/06/angularjs-mrq-jolin.html

AngularJS 玩弄手札 對 REST 用武器 - $resource
◦ http://weisnote.blogspot.tw/2013/07/angularjs-rest-resource.html
43

44. 
How to access the services from RESTful
API in my angularjs page
◦ http://stackoverflow.com/questions/16394089/ho
w-to-access-the-services-from-restful-api-inmy-angularjs-page

Restangular
◦ https://github.com/mgonto/restangular

沒有銀彈
◦ 選擇團隊有共識的做法
44

45. 
AngularJS的$resource
◦ http://www.codingcool.com/2013/08/16/angularjs%E7%9A%84resource/

AngularJS学习笔记 -邹业盛
◦ http://zouyesheng.com/angular.html#toc60

$q
◦ http://docs.angularjs.org/api/ng.$q

$http
◦ http://docs.angularjs.org/api/ng.$http

$resource
◦ http://docs.angularjs.org/api/ngResource.$resource

_
◦ http://underscorejs.org/
45