AngularJS 內建服務：$http
阿新 • • 發佈：2018-12-31
AngularJS 內建服務 $http
AngularJS為我們提供了大量的內建服務，通過這些內建服務就可以快捷的進行一些業務功能流程的自動處理了，如：
$window：用於注入原生JS中的window物件
$document：用於注入原生JS中的document文件物件
$timeout：用於注入封裝的原生JS中的setTimeout()函式處理過程
$interval：用於注入封裝的原生JS中的setInterval()函式處理過程
$location：用於注入原生JS中的location物件方便對於URL地址等操作
$http：用於注入封裝的Ajax操作進行非同步資料請求等等
今天我們主要來講解一下AngularJS內建服務中的 $http。
$http:
$http服務是AngularJS的核心服務之一，這個服務主要封裝了XMLHttpRequest物件和JSONP資料訪問模式來完成遠端服務的資料請求！
常規的語法結構：
$http({
method:”GET”,/* 請求傳送方式 */
url:”http://......../com” /* 請求地址*/
}).then( /* then()函式表示請求完成之後的操作 */
function(response) {
/* 請求成功之後的操作函式 */
},
function(response) {
/* 請求失敗時候的操作函式 */
}
);AngularJS為了方便開發人員進行快捷的非同步資料請求的處理，提供了一系列的快捷函式方便開發，主要由如下的函式：
l $http.get()
l $http.post()
l $http.jsonp()
l $http.header()
l $http.patch()
l $http.put()
l $http.delete()
$http.get(“url”).then(fn1, fn2);
其實快捷方式，就是簡單的封裝了$http服務，常規專案開發時，使用較多的是原始的內建服務$http的$http({}).then(fn1, fn2)函式進行非同步資料處理。
我們來舉個簡單的小案例來演示一下：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div class="form" ng-controller="login">
賬號：<input type="text" ng-model="username"><br />
密碼：<input type="text" ng-model="password"><br />
<button ng-click="loginFn()">登入</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("login", ["$scope", "$http",
function($scope, $http) {
$scope.loginFn = function() {
// 實現登入
$http({
method:"GET",
url:" 一個簡單的登入功能頁面。
希望可以幫助到大家~