AngularJS サービス
AngularJS では、独自のサービスを作成したり、組み込みサービスを使用したりできます。
サービスとは何ですか?
AngularJS では、サービスは AngularJS アプリケーションで使用できる関数またはオブジェクトです。
AngularJS には 30 以上の組み込みサービスがあります。
現在のページの URL アドレスを返すことができる $location サービスがあります。
インスタンス
<!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>インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
$locationサービスがパラメータ 真ん中。使用したい場合は、コントローラーで定義する必要があります。
サービスを使用する理由
$http は、AngularJS アプリケーションで最も一般的に使用されるサービスです。サービスはサーバーにリクエストを送信し、アプリケーションはサーバーから送信されたデータに応答します。
AngularJS は常にアプリケーションを監視し、イベントの変更を処理します。AngularJS は window.location オブジェクトよりも $location サービスを使用します。
$http サービス
$http は、AngularJS アプリケーションで最も一般的に使用されるサービスです。 サービスはサーバーにリクエストを送信し、アプリケーションはサーバーから送信されたデータに応答します。
インスタンス
<!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>インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
上記は非常に単純な $http サービスインスタンスです。詳細をご覧ください $httpサービス アプリケーション AngularJS HTTP チュートリアル。
$timeoutサービス
AngularJSの$timeoutサービスは、JSのwindow.setTimeout関数に対応します。
インスタンス
<!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>インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
$intervalサービス
AngularJS $interval JS ウィンドウへ.setInterval関数。
インスタンス
<!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>インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
カスタム サービスを作成する
アクセス カスタム サービスを作成してモジュールにリンクできます:
hexafy:
this.myFunc = function (x) {
戻る インスタンスの実行» [インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します
<!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>「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
