這篇文章算是關於angularjs的筆記了，有時候有些問題自己以前找到方法了，但是現在又忘了，還得從新找資料查，所以，現在來弄這個算是記錯本吧，都是使用的一些正確方法，現在就讓我們一起來看下吧
fromJson 和toJson 方法
angular.fromJson()方法是把json轉換為物件或物件數組，原始碼如下：
function fromJson(json) {
return isString(json) ? JSON.parse(json) : json
}登入後複製
angular.toJson()方法是把物件或陣列轉換json，原始碼如下：
function toJson(obj, pretty) {
return "undefined" == typeof obj ? undefined : JSON.stringify(obj, toJsonReplacer, pretty ? " " : null)
}登入後複製
promise
angular的promise是由$q提供和構件的，$q提供了一個透過註冊一個promise專案來非同步執行的方法。
JS中處理非同步回呼總是非常麻煩，複雜：
// 案例1：在前一个动画执行完成后，紧接着执行下一个动画
$('xx').animate({xxxx}, function(){
$('xx').animate({xx},function(){
//do something
},1000)
},1000)登入後複製
// 案例2：jquery ajax 异步请求
$.get('url').then(function () {
$.post('url1').then(function () {
//do something
});
});登入後複製
Promise 有助於開發人員逃離深度嵌套非同步回呼函數的深淵。 Angularjs他透過$q服務提供和建構promise。一個最完整的案例：
var defer1 = $q.defer();
function fun() {
var deferred = $q.defer();
$timeout(function () {
deferred.notify("notify");
if (iWantResolve) {
deferred.resolve("resolved");
} else {
deferred.reject("reject");
}
}, 500);
return deferred.promise;
}
$q.when(fun())
.then(function(success){
console.log("success");
console.log(success);
},function(err){
console.log("error");
console.log(err);
},function(notify){
console.log("notify");
console.log(notify);
})
.catch(function(reson){
console.log("catch");
console.log(reson);
})
.finally(function(final){
console.log('finally');
console.log(final);
});登入後複製
Promise的呼叫：$q.when(fun()).then(successCallback, errorCallback, notifyCallback); 簡寫為：fun( ).then(successCallback, errorCallback, notifyCallback);
angularjs service封裝使用：
angular.module("MyService", [])
.factory('githubService', ["$q", "$http", function($q, $http){
var getPullRequests = function(){
var deferred = $q.defer();
var promise = deferred.promise;
$http.get("url")
.success(function(data){
var result = [];
for(var i = 0; i < data.length; i++){
result.push(data[i].user);
deferred.notify(data[i].user); // 执行状态改变通知
}
deferred.resolve(result); // 成功解决(resolve)了其派生的promise。参数value将来会被用作successCallback(success){}函数的参数value。
})
.error(function(error){
deferred.reject(error); // 未成功解决其派生的promise。参数reason被用来说明未成功的原因。此时deferred实例的promise对象将会捕获一个任务未成功执行的错误，promise.catch(errorCallback(reason){...})。
});
return promise;
}
return {
getPullRequests: getPullRequests
};
}]);
angular.module("MyController", [])
.controller("IndexController", ["$scope", "githubService", function($scope, githubService){
$scope.name = "dreamapple";
$scope.show = true;
githubService.getPullRequests().then(function(result){
$scope.data = result;
},function(error){
},function(progress){
// 执行状态通知 notifyCallback
});
}]);登入後複製
$http、$httpProvider服務
https://docs. angularjs.org/ap...$http
https://www.cnblogs.com/keatk...
$http 是angular 封裝好的XMLHttpRequest 請求，angular 的思想偏向restful概念,方法有：GET,POST,PUT,DELTE,PATCH,HEAD等
angular 預設的請求頭:
Accept: application/json, text/plain 接受json和text
Content-Type : application/json
如果要修改預設設定的話可以在app.config上做修改
var app = angular.module("app", []);
app.config(function ($httpProvider) {
log(angular.toJson($httpProvider.defaults));
$httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
$httpProvider.defaults.headers.put["Content-Type"] = "application/x-www-form-urlencoded";
$httpProvider.defaults.headers.patch["Content-Type"] = "application/x-www-form-urlencoded";
});登入後複製
只要是default的headers，在每次發送要求的時候都會帶上。所以如果我們每個請求都有用到一些自訂的header，我們也可以寫入在default.headers中。 $httpProvider.defaults.headers.common["myHeader"] = "myheaderValue";//common 表示不管任何的method POST,GET,PUT等
#這些default的header是可以在每次我們發送請求的時候透過參數來覆寫掉.另外$http service 也提供了一個defaults的指標(註: $httpProvider.defaults === $http.defaults )
#$ httpProvider.defaults.transformRequest & transformResponse
這是angular提供給我們的2個接口，在請求發送前和響應還沒有觸發callback前對post data 和response data做一些處理它們是個數組類型，我們可以push一些函數進去(angular預設對request和response都放入了一個方法，post的時候如果data是物件將json化，回應時如果data是json類型，將解析成物件)。在每一次的請求，我們依然可以覆蓋整個數組。 （想看更多就到PHP中文網AngularJS開發手冊中學習）
var app = angular.module("app", []);
app.config(function ($httpProvider) {
$httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
$httpProvider.defaults.transformRequest.shift(); //把angular default的去掉
$httpProvider.defaults.transformRequest.push(function (postData) { //这个function不是依赖注入哦
if (angular.isObject(postData)) {
return $.param(postData); //如果postData是对象就把它转成param string 返回, 这里借用了jQuery方法
}
return postData;
});
$httpProvider.defaults.transformResponse.push(function (responseData) {
log(angular.toJson(responseData)); //响应的数据可以做一些处理
return "data";
});
});
app.controller("ctrl", function ($scope, $http) {
$http({
method: "POST",
url: "handle.ashx",
data: {
key: "value"
},
transformResponse: [], //每一次请求也可以覆盖default
transformResponse: $http.defaults.transformResponse.concat([function () { return "abc" }]) //如果default要保留要concat
}).success(function (responseData) {
log(responseData === "abc"); //true
});
});登入後複製
$httpProvider.defaults.cache。 angular 預設cahce = false, 一樣可以透過defaults去設定每個請求。我們也可以在每次請求中覆蓋設定。當同時發送2個沒有快取的請求時，angular也能處理，只發送一次。
var app = angular.module("app", []);
app.config(function ($httpProvider) {
$httpProvider.defaults.cache = true;
});
app.controller("ctrl", function ($scope, $http) {
//并发但是只会发送一个请求
$http.get("handle.ashx");
$http.get("handle.ashx");
//我们可以为每次请求要不要使用缓存或者缓存数据
$http({
url: "handle.ashx",
method: "GET",
cahce: true
});
$http({
url: "handle.ashx",
method: "GET",
cache : false //强制不使用缓存，即使已存在
});
});登入後複製
$httpProvider.interceptors
(interceptors 中文是攔截的意思)。除了之前介紹過的 transform 可以對資料做一些處理, angular也提供了另外4個時刻，分別是 onRequest, onRequestFail, onResponse, onResponseFail。讓我們做一些而外處理. 例如當我們server回傳500的時候，可能我們想做一個通用的alert，或是request fail 的話自動調整一下config在嘗試請求等等.
//interceptors是数组,放入的是可以依赖注入的方法哦！
$httpProvider.interceptors.push(["$q", function ($q) {
return {
request: function (config) { //config = {method, postData, url, headers} 等
return config; //返回一个新的config,可以做一些统一的验证或者调整等.
},
requestError: function (rejection) {
return $q.reject(rejection); //必须返回一个promise对象
},
response: function (response) {
return response; //这里也可以返回 promise, 甚至是把它给 $q.reject掉
},
responseError: function (rejection) { //rejection = { config, data, status, statusText, headers }
return $q.reject(rejection); //必须返回一个promise对象
}
};
}]);登入後複製
#transform 的執行順序是這樣的interceptors.request -> transformRequest -> transformResponse ->interceptors.response
#判斷視圖是否渲染完成
// 指令
app.directive('eventNgRepeatDone', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last) {
// $timeout(function () {
scope.$emit('eventNgRepeatDone');
if ($attrs.ngRepeatDone) {
$scope.$apply(function () {
$scope.$eval($attrs.ngRepeatDone);
});
}
//});
}
}
}
});
<!-- 使用 -->
<p ng-repeat = "item in list track by $index" event-ng-repeat-done>{{item.name}}</p>
app.controller('myCtrl', ['$scope', function ($scope) {
$scope.$on ('eventNgRepeatDone', function () {
// doSomething
});
});登入後複製
#好好了，這篇文章到這就結束了（想看更多就到PHP中文網AngularJS使用手冊中學習），有問題的可以在下方留言提問。
以上是angularjs如何判斷渲染是否完成？ $httpprovider服務又有哪些狀況？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
