ホームページ > 記事 > ウェブフロントエンド > AngularJSのカスタムサービスの詳しい説明、ファクトリー、サービス、プロバイダーの使い方の紹介
AngularJSのカスタムサービスの詳しい説明、ファクトリー、サービス、プロバイダーの使い方の紹介
- 寻∝梦オリジナル
- 2018-09-08 15:06:181437ブラウズ
この記事では主にangularjsのカスタムサービスの導入についてお話します。カスタム サービスの具体的な使用例をいくつか示します。それでは、この記事を見てみましょう
はじめに
カスタム サービスを作成する 3 つの方法。
Factory
Service
Provider
AngularJS は、主にバックエンドに長年存在していた階層化されたアイデアを仕事後にバックエンド スタッフによって発明されたことを誰もが知っているはずです。したがって、私たちはレイヤー化の役割を理解する必要があります。もしあなたがフロントエンド担当者でレイヤー化が何なのかを理解していない場合は、バックエンドの同僚に聞いたほうがよいでしょう。
dao レイヤー: バックグラウンドで、このレイヤーの役割は、データベースと対話するデータを書き込むことです。angularJS では、主に ajax を記述するために使用されます。
サービス層: 主にロジック コードのチェックと作成を担当しますが、さまざまなコントローラーで使用するために angularJS でデータを永続化することもできます (データ コンテナーとして機能)。
コントローラー層: コントローラーが angularJS で記述されるコントロール層。コントローラーには不要なロジックを書かず、サービス層に書くようにしましょう。
つまり、カスタム サービスを作成するには 3 つの方法があります。
1.factory ファクトリメソッドを使用して作成されたサービスは、属性とメソッドを持つオブジェクトを返します。同等: var f = myFactory();<!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><p ng-app="myApp" ng-controller="myCtrl">
<p>{{r}}</p></p><script>
//创建模型
var app = angular.module('myApp', []); //通过工厂模式创建自定义服务
app.factory('myFactory', function() {
var service = {};//定义一个Object对象'
service.name = "张三"; var age;//定义一个私有化的变量
//对私有属性写getter和setter方法
service.setAge = function(newAge){
age = newAge;
}
service.getAge = function(){
return age;
} return service;//返回这个Object对象
}); //创建控制器
app.controller('myCtrl', function($scope, myFactory) {
myFactory.setAge(20);
$scope.r =myFactory.getAge();
alert(myFactory.name);
});</script></body></html> サービス サンプル
をカスタム サービスに注入しますが、$scope スコープ オブジェクトを注入することはできません。 <script> var app = angular.module('myApp', []);
app.factory('myFactory', function($http,$q) {
var service = {};
service.name = "张三"; //请求数据
service.getData = function(){
var d = $q.defer(); $http.get("url")//读取数据的函数。
.success(function(response) {
d.resolve(response);
})
.error(function(){
d.reject("error");
}); return d.promise;
}
return service;
});
app.controller('myCtrl', function($scope, myFactory) {
//alert(myFactory.name);
myFactory.getData().then(function(data){
console.log(data);//正确时走这儿
},function(data){
alert(data)//错误时走这儿
});;
});
</script>
2.servicenew のオブジェクトに相当するサービス メソッドを使用してカスタム サービスを作成します: var s = new myService(); これに属性とメソッドを追加するだけです。コントローラーの転送。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト
AngularJS 開発マニュアル にアクセスして学習してください)<p ng-app="myApp" ng-controller="myCtrl">
<h1>{{r}}</h1></p><script>
var app = angular.module('myApp', []);
app.service('myService', function($http,$q) {
this.name = "service"; this.myFunc = function (x) {
return x.toString(16);//转16进制
} this.getData = function(){
var d = $q.defer();
$http.get("ursl")//读取数据的函数。
.success(function(response) {
d.resolve(response);
})
.error(function(){
alert(0)
d.reject("error");
}); return d.promise;
}
});
app.controller('myCtrl', function($scope, myService) {
$scope.r = myService.myFunc(255);
myService.getData().then(function(data){
console.log(data);//正确时走这儿
},function(data){
alert(data)//错误时走这儿
});
});</script>
3.provderprovder のみが .config() 関数を渡すことができるサービスです。サービス オブジェクトを有効にする前にモジュール全体の構成を実行する場合は、プロバイダーを選択する必要があります。 config 関数にプロバイダーを挿入するときは、名前を ProviderName+Provider にする必要があることに注意してください。 Provider を使用する利点は、他の部分に渡す前に app.config 関数で Provider オブジェクトを変更できることです。アプリケーションの改訂。 プロバイダーを使用してサービスを作成する場合、コントローラーでアクセスできるプロパティとメソッドは、$get() 関数を通じて返されるコンテンツのみです。 <body><p ng-app="myApp" ng-controller="myCtrl"></p><script>
var app = angular.module('myApp', []); //需要注意的是：在注入provider时，名字应该是：providerName+Provider
app.config(function(myProviderProvider){
myProviderProvider.setName("大圣");
});
app.provider('myProvider', function() {
var name=""; var test={"a":1,"b":2}; //注意的是，setter方法必须是(set+变量首字母大写)格式
this.setName = function(newName){
name = newName
} this.$get =function($http,$q){
return {
getData : function(){
var d = $q.defer();
$http.get("url")//读取数据的函数。
.success(function(response) {
d.resolve(response);
})
.error(function(){
d.reject("error");
}); return d.promise;
}, "lastName":name, "test":test
}
}
});
app.controller('myCtrl', function($scope,myProvider) {
alert(myProvider.lastName);
alert(myProvider.test.a)
myProvider.getData().then(function(data){
//alert(data)
},function(data){
//alert(data)
});
});</script></body>
4. カスタム サービスをフィルターに挿入します<body><p ng-app="myApp">
在过滤器中使用服务: <h1>{{255 | myFormat}}</h1></p><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>この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト AngularJS User Manual にアクセスして学習してください)。質問がある場合は、以下にメッセージを残してください。
以上がAngularJSのカスタムサービスの詳しい説明、ファクトリー、サービス、プロバイダーの使い方の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。