AngularJS基础教程
HTTP
前言
一个 Web 应用程序不可能不与服务器进行交互。对于这样的基本的功能，在
AngularJS 中也有封装。
在
AngularJS 中提供了一个
$http 服务（service），它封装了 HTTP 的基本操作。
GET
下面是使用 $http 进行 GET 操作的例子。在这个例子中，调用服务器提供的接口获得一组用户数据，并将其展示在网页上：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTTP</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<ul>
<li ng-repeat="item in users">{{item.name}}（{{item.age}}岁）</li>
</ul>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $http) {
$http.get('/api/users/gets').success(function (result) {
// 调用成功后执行此方法
$scope.users = result.data;
}).error(function (err) {
// 发生错误后执行此方法
console.log('ERROR:', err);
});
});
</script>
</body>
</html>
在浏览器中查看：
在这个示例中，用 $http.get() 调用了一个接口，该接口返回一组用户数据，然后将这组用户数组赋给了 $scope.users。
在 HTML 代码中我们只写了一个 li，但是我们在网页上去看到了三个。这是怎么回事呢？
注意写在 li 标签上的指令 ng-repeat="item in users"。ng-repeat 告诉 AngularJS 遍历 users 数组，并为该数组中的每一项生成一个 li。
$http.get() 与 jQuery 中的 $.get() 类似，它是异步的。
带参数的GET
在上面的案例中，我们使用 $http.get() 取得了一组用户的数据。
如果我只是想获得其中某一个用户的数据呢？比如说我想获得 ID 为200的用户。那么，需要 Server 端提供一个依据 ID 查找用户的接口。在调用这个接口时需要传递一个 ID 参数。下面是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTTP</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<div>
<-- 这里为 user.en_name 使用了 uppercase 过滤器，它能使字符串显示为大写字符。注意过滤器前面有个英文竖线。 -->
<-- 为 user.money 使用了 currency 过滤器，它使数字显示为货币格式。 -->
<-- 为 user.ico 使用了 lowercase 过滤器，它使字符串显示为小字字符。 -->
{{user.name}}（{{user.age}}岁），英文名：{{user.en_name | uppercase}}，金钱：{{user.money | currency}}，ico：{{user.ico | lowercase}}
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $http) {
$http.get('/api/users/get?id=200').success(function (result) {
$scope.user = result.user;
}).error(function (err) {
console.log('ERROR:', err);
});
});
</script>
</body>
</html>
在浏览器中查看：
在这里我们直接将参数 id=200 拼接在了 url 后面。
传递 GET 参数还有另一种方式：
$http.get('/api/users/get', { params: { id: 200 } }).success(function (result) {
....
}).error(function (err) {
....
});
POST
在这个例子中，我们先获取一个用户的数据并将其显示在网页上，然后对其进行修改，之后提交到服务器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTTP</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<div>
名字：{{user.name}}
</div>
<div>
年龄：<input type="text" ng-model="user.age" />
</div>
<div>
<-- ng-click 为该 button 绑定了一个 click 事件，点击该 button 后，会执行 $scope 中的 submit() -->
<button ng-click="submit()">Submit</button>
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $http) {
$http.get('/api/users/get?id=200').success(function (result) {
$scope.user = result.data;
$scope.submit = function () {
$http.post('/api/users/update', {
// 注意这里为 POST 传递参数的方式
id: $scope.user.id,
age: $scope.user.age
}).success(function (result) {
alert(result.err ? '失败' : '成功');
}).error(function (err) {
console.log('ERROR:', err);
});
};
}).error(function (err) {
console.log('ERROR:', err);
});
});
</script>
</body>
</html>
在浏览器中查看。修改文本框内的数值，点击“Submit”，提示“成功”后刷新页面，会发现文本框中显示的是修改后的 age，即表示修改的数值已被保存在服务器。
注意在显示年龄的文本框标签内我们使用的是 ng-model。在前面的章节中，我们说 ng-model 使元素的值成为了 Model。但在我们这个案例中，我们发现它也可以像 ng-bind 一样绑定数据，并且，该文本框中的数据修改后，它所绑定的 $scope.age 也会自动随之改变。这就是 AngularJS 中的“双向数据绑定”。
那么由我们的观察可得出，当 $scope 中有对应的数据时，ng-model 会与之绑定，否则就创建一个 Model。
JSONP
先看示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTTP</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<div>
{{user.name}}（{{user.age}}岁）
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $http) {
$http.jsonp('/api/users/get2', { params: { id: 200, callback:'JSON_CALLBACK' } }).success(function (result) {
$scope.user = result.data;
});
});
</script>
</body>
</html>
AngularJS 中使用 JSONP 有点特殊：如果你希望 success() 接收回调的数据，则必须在 URL 参数中传递 callback 参数，并且其值必须为“JSON_CALLBACK”，否则，接收回调数据的 function 必须定义在全局范围内。
最后，来个广告
若你觉得此文不错，请分享，若认为尚需改进，请点讚。
结束语