Perkhidmatan AngularJS
Dalam AngularJS anda boleh mencipta perkhidmatan anda sendiri atau menggunakan perkhidmatan terbina dalam.
Apakah perkhidmatan itu?
Dalam AngularJS, perkhidmatan ialah fungsi atau objek yang boleh digunakan dalam aplikasi AngularJS anda.
AngularJS mempunyai lebih daripada 30 perkhidmatan terbina dalam.
mempunyai perkhidmatan $location, yang boleh mengembalikan alamat URL halaman semasa.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>
</div>
<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Perhatikan bahawa perkhidmatan $location dihantar kepada pengawal sebagai parameter tengah. Jika anda ingin menggunakannya, anda perlu mentakrifkannya dalam pengawal.
Mengapa menggunakan perkhidmatan?
$http ialah perkhidmatan yang paling biasa digunakan dalam aplikasi AngularJS. Perkhidmatan menghantar permintaan kepada pelayan, dan aplikasi bertindak balas kepada data yang dihantar oleh pelayan.
AngularJS akan sentiasa memantau aplikasi dan mengendalikan perubahan acara AngularJS menggunakan perkhidmatan $location lebih baik daripada objek window.location.
Perkhidmatan $http
$http ialah perkhidmatan yang paling biasa digunakan dalam aplikasi AngularJS. Perkhidmatan menghantar permintaan kepada pelayan, dan aplikasi bertindak balas kepada data yang dihantar oleh pelayan.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>欢迎信息:</p>
<h1>{{myWelcome}}</h1>
</div>
<p> $http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
</script>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Di atas adalah contoh perkhidmatan $http yang sangat mudah Untuk lebih banyak aplikasi perkhidmatan $http, sila lihat AngularJS Http. Tutorial.
perkhidmatan $timeout
AngularJS $timeout perkhidmatan sepadan dengan fungsi JS window.setTimeout.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>两秒后显示信息:</p>
<h1>{{myHeader}}</h1>
</div>
<p>$timeout 访问在规定的毫秒数后执行指定函数。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
</script>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
perkhidmatan $interval
AngularJS $interval perkhidmatan sepadan dengan fungsi JS window.setInterval.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>现在时间是:</p>
<h1>{{theTime}}</h1>
</div>
<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Buat perkhidmatan tersuai
Anda boleh membuat perkhidmatan tersuai dan memautkannya ke modul anda:
Buat perkhidmatan tersuai bernama hexafy Lawati:
this.myFunc = fungsi (x) {
kembali Tambahkan secara bebas apabila mentakrifkan penapis:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>255 的16进制是:</p>
<h1>{{hex}}</h1>
</div>
<p>自定义服务，用于转换16进制数：</p>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
在过滤器中使用服务:
<h1>{{255 | myFormat}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
</script>
</body>
</html>
Run Instance»Apabila mendapat nilai dalam tatasusunan objek anda boleh menggunakan penapis:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>在获取数组 [255, 251, 200] 值时使用过滤器:</p>
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
<p>过滤器使用服务将10进制转换为16进制。</p>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
app.controller('myCtrl', function($scope) {
$scope.counts = [255, 251, 200];
});
</script>
</body>
</html>Jalankan instance »
