1.AngularJS 服务(Service)
AngularJS 中你可以创建自己的服务,或使用内建服务。
AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
常用内建服务:
① $location 服务,它可以返回当前页面的 URL 地址。
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
②$http 是 AngularJS 应用中最常用的服务。发送请求,接受数据。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
③$timeout 服务,对应了 JS window.setTimeout 函数。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout( function () {
$scope.myHeader = "How are you today?";
} , 2000);
});
④$interval 服务,对应了 JS window.setInterval 函数。
每一秒显示信息:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval( function () {
$scope.theTime = new Date().toLocaleTimeString();
} , 1000);
});
创建自定义服务,服务就是一个函数
创建名为hexafy 的服务:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
使用自定义的的服务 hexafy 将一个数字转换为16进制数:
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
2.AngularJS 的$http服务
$http 是 AngularJS 中的一个核心服务,用于发送请求并读取远程服务器的数据。
以下是存储在web服务器上的 JSON 文件: http://www.runoob.com/try/angularjs/data/sites.php |
{ "sites": [ { "Name": "菜鸟教程", "Url": "www.runoob.com", "Country": "CN" }, { "Name": "Google", "Url": "www.google.com", "Country": "USA" }, { "Name": "Facebook", "Url": "www.facebook.com", "Country": "USA" }, { "Name": "微博", "Url": "www.weibo.com", "Country": "CN" } ] } |
废弃声明 (v1.5)
v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。
AngularJS1.5 以上版本 - 通用方法 - 实例 var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) { $http({ method: 'GET', url: 'https://www.runoob.com/try/angularjs/data/sites.php' }).then(function successCallback(response) { $scope.names = response.data.sites; }, function errorCallback(response) { // 请求失败执行代码 }); }); |
AngularJS1.5 以上版本 - 简写方法 - 实例 var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) { $http.get("http://www.runoob.com/try/angularjs/data/sites.php") .then(function (response) {$scope.names = response.data.sites;}); }); |
AngularJS1.5 以下版本 - 简写方法 - 实例 var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) { $http.get("http://www.runoob.com/try/angularjs/data/sites.php") .success(function (response) {$scope.names = response.sites;}); }); |