ホームページ > 記事 > ウェブフロントエンド > angularjs サービスの使用方法? angularjs サービスの使用方法の具体的な紹介
angularjs サービスの使用方法? angularjs サービスの使用方法の具体的な紹介
- 寻∝梦オリジナル
- 2018-09-08 11:54:53957ブラウズ
この記事では、angularjsのサービスの詳細と、angularjsの組み込みサービスの使い方を主に紹介します。 angularjsの使用例が含まれていますので、一緒に見てみましょう
サービスの本質はデータとオブジェクトを提供するシングルトンオブジェクトです。
2つの主要カテゴリ:
①組み込みサービス
スコープ
ウィンドウ
out など。 組み込みで提供されているメソッドを使用します。サービス中:
location) に挿入することです
2 番目のステップは、サービスで提供されるメソッド データを呼び出すことです。 。
組み込みの$intervalを使用してカルーセルチャートを作成します
<!DOCTYPE html><html ng-app="myApp"><head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script></head><body><p ng-controller="myCtrl">
<img ng-src="img/{{imgList[index]}}" alt=""/>
<h1>{{count}}</h1></p><script>
var app = angular.module('myApp', ['ng']);
app.controller('myCtrl', function ($scope,$interval) {
$scope.count = 0;
timer = $interval(function () {
$scope.count++; if($scope.count > 20)
{
$interval.cancel(timer)
}
},500)
$scope.index = 0;
$scope.imgList = ['1.jpg','2.jpg','3.jpg']
$interval(function () {
$scope.index++; if($scope.index > 2)
{
$scope.index = 0;
}
},1000)
});</script></body></html>②カスタマイズされたサービス
サービスの目的は、ビジネスロジックをカプセル化し、コードの再利用率を向上させることです サービスをカスタマイズする方法:
app .factory ('サービス名', function(){//通常のメソッド return {}})
app.service('サービス名', function(){//Constructor})
app.constant(' サービス名', {}) // 定数サービス
を作成します。 app.value ('サービス名', {}) // 変数サービス
を app.factory 経由で作成します ('サービス名', function() { // 通常のメソッド return {}}) サービス
<!DOCTYPE html><html ng-app="myApp"><head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script></head><body><p ng-controller="myCtrl">
<button ng-click="handleClick()">clickMe</button></p><script>
var app = angular.module('myApp', ['ng']); //创建自定义服务
app.factory('$output', function () {
return {
print: function () {
console.log('func in $output is called');
}
}
})
app.controller('myCtrl', function ($scope,$output) {
$scope.handleClick = function () {
//调用自定义服务所提供的方法
$output.print();
}
});</script></body></html>
を作成します app.service('service name', function(){//constructor}) を通じてサービス
<script>
var app = angular.module('myApp', ['ng']); //自定义服务
app.service('$student', function () {
this.study = function () {
console.log('we are learning...');
} this.name = "zhangSan";
})
app.controller('myCtrl', function ($scope, $student) {
$student.study();
});</script></body></html>** を作成します app.constant を通じてサービス app.value('服务名称'，{})//创建变量服务**<script> var app = angular.module('myApp', ['ng']); //创建常量服务
app.constant('$Author',{name:'KKK',email:'**@163.com'}) //创建变量服务
app.value('$Config',{version:1})
app.controller('myCtrl', function ($scope,$Author,$Config) {
console.log($Author.email);
console.log($Config.version);
});
</script>** を作成します('サービス名' , {})//定数サービスを作成します
<body><p ng-controller="myCtrl">
<button ng-click="start()">开始</button>
<button ng-click="stop()">结束</button></p><script>
var app = angular.module('myApp', ['ng']); //通过service方法去创建自定义服务
app.service('$HeartBeat', function ($interval) {
this.startBeat = function () {
promise = $interval(function () {
console.log('beat...');
},1000);
} this.stopBeat = function () {
$interval.cancel(promise);
}
})
app.controller('myCtrl', function ($scope,$HeartBeat) {
$scope.start = function () {
$HeartBeat.startBeat();
}
$scope.stop = function () {
$HeartBeat.stopBeat();
}
});</script> 注: カスタマイズされたサービスは他のサービスのメソッドを使用する必要がありますrrreee さて、この記事はここまでです (もっと見たい場合は、ここで PHP 中国語 Web サイト
AngularJS ユーザーマニュアル🎜を学習してください)、ご質問がある場合は、以下にメッセージを残してください。 🎜以上がangularjs サービスの使用方法? angularjs サービスの使用方法の具体的な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。