L'injection de dépendance est un modèle de conception de logiciel donné dans un composant qui remplace le codage de leurs dépendances dans un composant dur. Cela réduit un composant à partir des dépendances de positionnement, configuration de dépendance. Cela permet de rendre les composants réutilisables, entretenus et testés.
AngularJS fournit un mécanisme d'injection de dépendance suprême. Il fournit un composant central injectable qui dépend les uns des autres.
valeur
usine
Servir
Fournisseur
Toujours
valeur
Les valeurs sont des objets JavaScript simples qui sont utilisés pour transmettre des valeurs pendant les contrôleurs de phase de configuration.
// Définir un modulevar mainApp = angular.module ("mainApp", []); // créer un objet de valeur comme "DefaultInput" et lui transmettre une valeur Data.MainApp.Value ("DefaultInput", 5); ... // injecter la valeur dans le contrôleur en utilisant son nom "DefaultInput" MainApp.ConTroller ('CalcController', fonction ($ SCOPE, CACCHERVICE) $ scope.number = defaultInput; $ Scope.Result = CalcService.Square ($ scope.number);usine
L'usine est utilisée pour renvoyer la valeur de la fonction. Il crée de la valeur en fonction de la demande, chaque fois qu'un service ou un contrôleur en a besoin. Il utilise généralement une fonction d'usine pour calculer et renvoyer la valeur correspondante
// définir un modulevar mainApp = angular.module ("mainApp", []); // créer une usine "mathService" qui fournit une méthode multipliée pour renvoyer la multiplication de deux nombres. // Injecte l'usine "MathService" dans un service pour utiliser la méthode Multiply de factory.mainapp.service ('calcService', function (mathService) {this.square = function (a) {return mathService.Multiply (a, a);}}); ...Servir
Un service est un seul javascript qui contient un ensemble d'objets de fonction pour effectuer certaines tâches. Le service utilise la fonction Service () et injecte dans la définition du contrôleur.
// Définir un modulevar mainApp = angular.module ("mainApp", []); ... // Créer un service qui définit une méthode carrée pour retourner carré d'un nombre.mainApp.service ('calcService', function (mathService) {this.square = function (a) {return mathService.Multiply (a, a);}}); Le ContrômainApp.Controller ('CalcController', Fonction ($ Scope, CalcService, DefaultInput) {$ Scope.Number = DefaultInput; $ Scope.Result = Calservice.Square ($ Scope.number);Fournisseur
Le fournisseur utilise le service, l'usine, etc. pendant la phase de configuration du processus de création interne AngularJS (comme pendant le démarrage AngularJS lui-même). Les scripts mentionnés ci-dessous peuvent être utilisés pour créer, nous avons créé à l'avance MathService. Le fournisseur est une méthode d'usine spéciale et une méthode GET () pour renvoyer la valeur / service / usine.
// définir un modulevar mainApp = angular.module ("mainApp", []); ... // créer un service à l'aide d'un fournisseur qui définit une méthode carrée pour retourner carré d'un nombre.mainApp.config (function ($ fournis) {$ fournit.provider ('mathService', function () {this. $ get = function () {var factory = {}; factory.Multory = function (a, b) {return a * b;} return usine;};});});constante
Les constantes sont utilisées pour considérer les faits en configurant les valeurs de phase, les valeurs ne peuvent pas être réalisées pendant la phase de configuration.
mainApp.Constant ("configParam", "Valeur constante");
exemple
Les exemples suivants montreront toutes les instructions ci-dessus.
testangularjs.html
<Html> <A-head> <ititle> injection de dépendance angularjs </title> </ head> <body> <h2> AngularJS Exemple d'application </h2> <div ng-app = "mainApp" ng-controlller = "CalcController"> <p> Entrez un nombre: <entrée type = "ng" ng-model = "nombre" /> <bouton ng-click = "square ()"> x <sup> 2 </ sup> </ bouton> <p> Résultat: {{résultat}} </p> </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular angular.module ("mainApp", []); mainApp.config (function ($ fournis) {$ fournis.provider ('mathService', function () {this. $ get = function () {var factory = {}; factory.multiply = function (a, b) {return a * b;} return factory;};});}); }); mainApp.Value ("DefaultInput", 5); mainApp.factory ('mathService', function () {var factory = {}; factory.multiply = function (a, b) {return a * b;} return factory;}); mainApp.Service ('calcService', function (mathService) {this.square = function (a) {return mathService.multiply (a, a);}}); mainApp.Controller ('CalcController', fonction ($ scope, calcService, defaultInput) {$ scope.number = defaultInput; $ scope.result = Calservice.square ($ scope.number); $ scope.square = function () {$ scope.result = calcService.square ($ scope.Number); </cript> </ body> </html>résultat
Ouvrez Textangularjs.html dans un navigateur Web. Les résultats sont les suivants.
Ce qui précède est la collecte d'informations pour l'injection de dépendance AngularJS. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!