Combien de services y a-t-il dans AngularJS ? Analyse détaillée des services dans AngularJS

Cet article parle principalement de l'analyse détaillée de plusieurs services de angularjs. Il y a également une introduction à l'utilisation et aux différences des services Angularjs. Jetons maintenant un coup d'œil ensemble à cet article

Introduction générale

Dans une application angulaire bien structurée, Controller This. la couche doit être très fine. En d’autres termes, la plupart de la logique métier et des données persistantes de l’application doivent être placées dans Service.

Pour cette raison, il est nécessaire de comprendre les différences entre plusieurs Providers dans AngularJS.
Les nouveaux services créés par le fournisseur peuvent être utilisés pour l'injection. Comprend :

• fournisseur

• usine

• service

• constant

• valeur

Utilisation respective et différences

fournisseur

est utilisé pour générer un service configurable se compose de deux parties. Les variables et fonctions de la première partie sont accessibles dans la fonction app.config, et vous pouvez les modifier avant d'y accéder ailleurs. La définition est la suivante :

app.provider('myProvider', function(){
    var a = '';    var func = function(){};
})

Modifier a dans la fonction app.config C'est aussi la raison pour laquelle le fournisseur est utilisé lorsqu'il existe une usine aussi simple :

app.config(function(myProviderProvider){
    myProvider.a = 'hello world';
})

Chapitre Les variables et fonctions de la deuxième partie sont renvoyées par la fonction $get() et sont accessibles dans n'importe quel contrôleur qui passe le fournisseur.

app.provider('myProvider', function(){
    this.$get = function(){
        return {
            foo: function(){},
            a: a
        }
    }
})

factory

factory renvoie un objet. Créez simplement un objet, ajoutez-y des propriétés et renvoyez l'objet. Injectez la fabrique dans le contrôleur pour utiliser toutes ses propriétés.

app.factory('myFactory', function(){
    var fac = {};
    fac.a = 'hello world';
    fac.foo = function(){};    return fac;
})

On voit que le deuxième paramètre de factory est l'implémentation de la fonction correspondant à $get in supplier.

service

service est similaire à un constructeur. Il instancie l'objet via le nouveau mot-clé et y ajoute directement des propriétés et des méthodes. Lors de la création de l'objet service, cette valeur sera renvoyée. .

app.service('myService', function(){
    var a = '';    this.setA = function(){};    this.getA = function(){};    this.foo = function(){};
})

Le contrôleur injecté dans myService peut accéder aux méthodes setA(), getA() et foo() qui lui sont liées dans myService.

constant

constant est utilisé pour définir des constantes. Une fois définies, elles ne peuvent pas être modifiées. Peut être injecté n’importe où, mais ne peut pas être décoré par les décorateurs.

app.constant('APP_KEY', 'a1s2d3f4')

valeur

Comme une constante, elle peut être utilisée pour définir des valeurs. Mais la différence avec constant est qu'il peut être modifié, décoré par le décorateur et ne peut pas être injecté dans la configuration.

app.value('version', '1.0')

value est généralement utilisée pour définir la valeur initiale de l'application. (Si vous voulez en savoir plus, rendez-vous sur le site Web PHP chinois AngularJS Development Manual colonne pour en savoir)

décorateur

est spécial, ce n'est pas un fournisseur. Il est utilisé pour décorer d'autres fournisseurs, à l'exception de constant, car comme le montre le code source, constant n'est pas créé via la méthode supplier().

Ce qui suit est un exemple d'utilisation d'un décorateur pour décorer la valeur.

app.value('version', '1.0');
app.decorator('version', function ($delegate) {
    return $delegate + '.1';
})

Ensuite, si vous souhaitez utiliser le service myService précédent, mais qu'il lui manque la fonction d'accueil que vous souhaitez. Le service peut-il être modifié ? La réponse est non ! Mais il peut être décoré :

app.decorator('myService', function($delegate){
    $delegate.greet = function(){
        return "Hello, I am a new function of 'myService'";
    }
})

$delegate représente l'instance de service réelle.
La possibilité de décorer un service est très pratique, surtout lorsque nous souhaitons utiliser un service tiers. Pour le moment, nous n'avons pas besoin de copier le code dans notre projet, mais seulement d'apporter quelques modifications.

Quand utiliser le fournisseur au lieu de l'usine ?

provider est une version améliorée de Factory. Utilisez le fournisseur lorsqu'une usine configurable est nécessaire.

Une brève introduction au processus d'exécution d'une application dans AngularJS est divisée en deux étapes, l'étape de configuration et l'étape d'exécution. La phase de configuration est celle où tout fournisseur est configuré. C'est également l'étape où les directives, contrôleurs, filtres et autres éléments sont configurés. Pendant la phase d'exécution, AngularJS compile votre DOM et démarre l'application.

Cet article se termine ici (si vous souhaitez en savoir plus, rendez-vous sur la colonne Manuel d'utilisation AngularJS chinois du site Web PHP chinois pour en savoir plus. 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!