那 Angular 那 AJAX 那 RESTful
description
Transcript of 那 Angular 那 AJAX 那 RESTful
![Page 2: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/2.jpg)
![Page 3: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/3.jpg)
抓資料↓
顯示出來
3
![Page 4: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/4.jpg)
如果它是 <input type="submit" />1. request 到後端
2. C# 無雙
3. 瀏覽器轉圈圈
4. 生出 HTML
4
![Page 5: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/5.jpg)
如果它是 <input type="button" />1. onclick…
2. JS無雙
3. AJAX
1. 輸入
2. C# 無雙
3. 輸出
4. JS無雙
5. 生出 HTML
5
![Page 6: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/6.jpg)
XMLHttpRequest
6
![Page 7: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/7.jpg)
$.ajax()
7
![Page 8: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/8.jpg)
$http
8
![Page 9: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/9.jpg)
$resource
9
![Page 10: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/10.jpg)
$http 返回 promise◦ 封裝了 XMLHttpRequest 也支持 JSONP
◦ 基于 $q 提供了 promise 的封裝
◦ 提供 success 和 error 方法 用來定義 promise callback
$resource 返回 object◦ 封裝了 $http
◦ 利於使用 RESTful style
◦ 簡化一些繁複的 callback
10
![Page 11: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/11.jpg)
11
Callbacks, Promises, and Coroutines◦ http://www.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript
![Page 12: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/12.jpg)
![Page 13: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/13.jpg)
![Page 14: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/14.jpg)
![Page 15: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/15.jpg)
15
自由開始 依序開始
自由顯示
同時顯示
![Page 16: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/16.jpg)
自由開始
自由顯示
![Page 17: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/17.jpg)
依序開始
自由顯示
![Page 18: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/18.jpg)
自由開始
同時顯示
![Page 19: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/19.jpg)
依序開始
同時顯示
![Page 20: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/20.jpg)
![Page 21: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/21.jpg)
自由開始
自由顯示
![Page 22: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/22.jpg)
依序開始
自由顯示
![Page 23: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/23.jpg)
自由開始
同時顯示
![Page 24: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/24.jpg)
依序開始
同時顯示
![Page 25: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/25.jpg)
![Page 26: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/26.jpg)
自由開始
自由顯示
![Page 27: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/27.jpg)
依序開始
自由顯示
![Page 28: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/28.jpg)
自由開始
同時顯示
![Page 29: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/29.jpg)
依序開始
同時顯示
![Page 30: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/30.jpg)
![Page 31: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/31.jpg)
WIKI◦ http://zh.wikipedia.org/wiki/REST
要點及標準◦ CRUD 對應 POST、GET、PUT、DELETE
31
![Page 32: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/32.jpg)
![Page 33: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/33.jpg)
![Page 34: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/34.jpg)
<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
![Page 35: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/35.jpg)
angular
.module('app', ['ngResource'])
.factory('roleApi', ['$resource', function ($resource) {
//設定 $resource
return $resource(
'/api/Roles/:RoleId',
{ RoleId: "@RoleId" },
{ update: { method: "PUT" } }
);
}])
35
![Page 36: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/36.jpg)
.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
![Page 37: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/37.jpg)
//加入新 role
$scope.newRole = function () {
//push 空物件用以編輯
$scope.roles.push({
RoleId: -1,
Name: '',
Conversation: '',
Pic: '',
Info: '',
edit: {},
isEdit: true
});
};
37
![Page 38: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/38.jpg)
//切換編輯模式
$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
![Page 39: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/39.jpg)
//取消編輯
$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
![Page 40: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/40.jpg)
//儲存$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
![Page 41: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/41.jpg)
function defaultError(ex) {
console.log(ex);
alert('尼瑪,報錯啦!');
}
41
![Page 42: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/42.jpg)
42
![Page 43: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/43.jpg)
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
![Page 44: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/44.jpg)
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
![Page 45: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/45.jpg)
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
![Page 46: 那 Angular 那 AJAX 那 RESTful](https://reader034.fdocuments.us/reader034/viewer/2022042512/559452541a28abe14f8b46ab/html5/thumbnails/46.jpg)