那 angular 那 ajax 那 restful
DESCRIPTION
那 Angular 那 AJAX 那 RESTfulTRANSCRIPT
抓資料↓
顯示出來
3
如果它是 <input type="submit" />1. request 到後端
2. C# 無雙
3. 瀏覽器轉圈圈
4. 生出 HTML
4
如果它是 <input type="button" />1. onclick…
2. JS無雙
3. AJAX
1. 輸入
2. C# 無雙
3. 輸出
4. JS無雙
5. 生出 HTML
5
XMLHttpRequest
6
$.ajax()
7
$http
8
$resource
9
$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/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript
15
自由開始 依序開始
自由顯示
同時顯示
自由開始
自由顯示
依序開始
自由顯示
自由開始
同時顯示
依序開始
同時顯示
自由開始
自由顯示
依序開始
自由顯示
自由開始
同時顯示
依序開始
同時顯示
自由開始
自由顯示
依序開始
自由顯示
自由開始
同時顯示
依序開始
同時顯示
WIKI◦ http://zh.wikipedia.org/wiki/REST
要點及標準◦ CRUD 對應 POST、GET、PUT、DELETE
31
<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
angular
.module('app', ['ngResource'])
.factory('roleApi', ['$resource', function ($resource) {
//設定 $resource
return $resource(
'/api/Roles/:RoleId',
{ RoleId: "@RoleId" },
{ update: { method: "PUT" } }
);
}])
35
.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
//加入新 role
$scope.newRole = function () {
//push 空物件用以編輯
$scope.roles.push({
RoleId: -1,
Name: '',
Conversation: '',
Pic: '',
Info: '',
edit: {},
isEdit: true
});
};
37
//切換編輯模式
$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
//取消編輯
$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
//儲存$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
function defaultError(ex) {
console.log(ex);
alert('尼瑪，報錯啦！');
}
41
42
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
How to access the services from RESTfulAPI in my angularjs page◦ http://stackoverflow.com/questions/16394089/how-to-access-the-services-from-restful-api-in-my-angularjs-page
Restangular◦ https://github.com/mgonto/restangular
沒有銀彈◦ 選擇團隊有共識的做法
44
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
