Maison > Article > interface Web > Explication détaillée des services personnalisés dans AngularJS, introduction à l'utilisation de l'usine, du service et du fournisseur
Explication détaillée des services personnalisés dans AngularJS, introduction à l'utilisation de l'usine, du service et du fournisseur
- 寻∝梦original
- 2018-09-08 15:06:181393parcourir
Cet article parle principalement de l'introduction des services personnalisés de angularjs. Quelques exemples d'utilisation spécifiques de services personnalisés. Jetons maintenant un œil à cet article
Préface
3 façons de créer des services personnalisés.
Usine
Service
Fournisseur
Tout le monde devrait savoir qu'AngularJS a été inventé par le personnel du backend pendant son temps libre. Il a principalement appliqué la pensée en couches qui existe depuis longtemps dans le backend. Nous devons donc comprendre le rôle de la superposition. Si vous êtes une personne front-end et que vous ne comprenez pas ce qu'est la superposition, vous feriez mieux de demander à vos collègues back-end.
Couche dao : C'est la couche Modèle Lorsqu'elle est en arrière-plan, le rôle de cette couche est d'écrire les données qui interagissent avec la base de données, elle est principalement utilisée pour écrire en ajax.
Couche de service : principalement responsable de l'écriture du code logique, mais les données peuvent également être conservées dans angulaireJS (agissant comme un conteneur de données) pour être utilisées par différents contrôleurs.
Couche contrôleur : La couche de contrôle, où les contrôleurs sont écrits en angulaireJS. Essayez de ne pas écrire de logique inutile dans le contrôleur et essayez de l'écrire dans la couche de service.
Il existe donc trois façons de créer des services personnalisés.
1.factory
Un service créé à l'aide de la méthode factory consiste à renvoyer un Un objet dont les propriétés ont des méthodes. Équivalent à : 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>Dans le service personnalisé, injectez l'exemple de service, mais l'objet scope $scope ne peut pas être injecté.
<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.service
Créez un service personnalisé via la méthode de service, qui équivaut à un objet de new : var s = new myService ();, tant que des propriétés et des méthodes y sont ajoutées, elles peuvent être appelées dans le contrôleur. (Si vous souhaitez en savoir plus, rendez-vous sur le site PHP chinois Manuel de développement AngularJS pour en savoir)
<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.provder
Seul le fournisseur est un service qui peut transmettre la fonction .config(). Si vous souhaitez effectuer une configuration à l'échelle du module avant que l'objet de service ne soit activé, vous devez choisir le fournisseur. A noter que lors de l'injection du fournisseur dans la fonction config, le nom doit être : ProviderName+Provider
L'avantage d'utiliser Provider est que vous pouvez modifier l'objet Provider dans la fonction app.config avant de le transmettre à un autre. parties de l'application. Elle est modifiée.
Lorsque vous créez un service à l'aide d'un fournisseur, les seules propriétés et méthodes accessibles dans votre contrôleur sont le contenu renvoyé via la fonction $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. Injectez des services personnalisés dans le filtre
<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>Cet article se termine ici (pensez Pour en savoir plus, rendez-vous sur le site Web PHP chinois Manuel d'utilisation AngularJS pour apprendre). Si vous avez des questions, vous pouvez laisser un message ci-dessous.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript