Comment créer un service en Angular ? 5 façons de le découvrir !

Cet article vous présentera 5 façons de créer des services dans Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

bloc de configuration config

L'exécution des applications angulaires est principalement divisée en deux parties : app.config() et app. run( ), config est l'étape où vous configurez les fournisseurs afin que l'application puisse utiliser les services corrects. Notez que seuls les fournisseurs peuvent être injectés dans le bloc de configuration (les deux seules exceptions sont $provide et $injector). Et le fournisseur ne peut être injecté que dans la configuration. Parmi les cinq façons dont Angular injecte des services, seuls les services injectés via le fournisseur et la constante peuvent dépendre de la configuration.

app.controller('MyController', function ($httpProvider) {
	//错误，无法在控制器中注入服务提供者
});
app.config(function ($http) {
	//错误，配置块中只能注入服务
});

Recommandations associées : "Tutoriel Angularjs"

À propos de certains services intégrés

Les fonctions du contrôleur peuvent être injectées Oui , mais le contrôleur lui-même ne peut être injecté dans quoi que ce soit. Cependant, il existe un service AngularJS intégré appelé $controller, qui est responsable de la configuration de votre contrôleur. Lorsque vous appelez myMod.controller(...), vous êtes en fait le fournisseur. qui ont accédé à ce service.

Code :

myMod.controller('MainController', function($scope) {
  // ...
});

fait en fait ce qui suit :

myMod.config(function($controllerProvider) {
  $controllerProvider.register('MainController', function($scope) {
// ...
  });
});

Semblable au filtre et à la directive, le filtre utilisera un service appelé $filter et son fournisseur $filterProvider, et la directive utilise un service appelé $compile et son fournisseur $compileProvidr.

5 façons d'injecter des services

factory()

L'injecteur de dépendances utilisera la fonction factory pour créer une instance du service, la fonction factory renvoie un objet.

myModule.factory('myService', function () {
	var myService = {};
	//添加myService的一些属性和方法
	return myService;
});

service()

L'injection de service passe une fonction au service, puis utilise la nouvelle opération de javascript pour générer un service, c'est-à-dire attacher le attribut à this C'est tout. Lorsque vous utilisez cette méthode, faites attention au piège this de JavaScript. Cela ne pointe pas toujours vers la fonction d'exécution elle-même, mais peut également pointer vers la fenêtre d'objet de niveau supérieur.

myModule.service('myService', function () {
	this.foo = 'bar';
});

provider()

En fait, l'usine et le service que nous avons mentionnés ci-dessus sont implémentés comme du sucre syntaxique sur le fournisseur, et le service injecté via le fournisseur peut être utilisé comme fournisseur Lorsqu'il est utilisé dans un bloc de configuration, le fournisseur doit implémenter un attribut $get.

myMod.provider('greeting', function() {
  var text = 'Hello, ';

  this.setText = function(value) {
     text = value;
  };

  this.$get = function() {
     return function(name) {   //$get必须实现，可以返回一个函数或者一个对象
         alert(text + name);
     };
  };
});

myMod.config(function(greetingProvider) {
  greetingProvider.setText("Howdy there, ");
});

myMod.run(function(greeting) {
  greeting('Ford Prefect');
});

constant(name,value)

constant est principalement utilisé pour enregistrer une constante, la valeur est une valeur ou un objet json, généralement cette constante est principalement utilisée pour la configuration et fréquemment utilisé Les données des services constamment configurés peuvent être injectées dans config.

angular.module('myApp', [])
.constant('apiKey', '123123123')
.config(function(apiKey) {
// 在这里apiKey将被赋值为123123123
// 就像上面设置的那样
})

value(name,value)

value est principalement utilisé pour stocker certaines données ou méthodes à utiliser. Si ces données ou méthodes doivent être modifiées, utilisez value. Pour créer un service, la valeur du paramètre est une valeur ou un objet json. De plus, on ne peut pas s'y fier dans la configuration.

serviceApp.value('myConfig',{
    name:'code_bunny',
    age:12,
    getId:function(){
        return 1
    }
});

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!