Injection de dépendance angularjs
Qu'est-ce que l'injection de dépendance
L'explication sur le wiki est: l'injection de dépendance (DI) est un modèle de conception de logiciel dans lequel une ou plusieurs dépendances (ou services) sont injectées (ou transmises par référence) dans un objet (ou client) distinct, puis font partie de l'état du client.
Ce modèle sépare la création de comportements de dépendance du client, ce qui rend la programmation de manière lâche et suit les principes de renversement de dépendance et de responsabilité unique. En contraste direct avec le modèle de localisateur de service, il permet au client de comprendre comment le client utilise le système pour trouver des dépendances
En un mot - si vous n'avez rien à faire, ne venez pas à moi, j'irai vers vous si vous avez quelque chose à faire.
AngularJS fournit un bon mécanisme d'injection de dépendance. Les 5 composants de base suivants sont utilisés comme injection de dépendance:
valeur
usine
service
Fournisseur
constante
valeur
La valeur est un objet JavaScript simple qui transmet des valeurs au contrôleur (phase de configuration):
var mainApp = angular.module ("mainApp", []); // Créer l'objet de valeur "DefaultInput" et passer les données mainApp.Value ("DefaultInput", 5); ... // injecter "DefaultInput" dans le contrôleur MainApp.Controller ('CalcController', function ($ Scope, calsvice, par défaut) {$ SCOPE.NUMBER = DAULTINPUT; CalcService.Square ($ scope.Number); $ scope.Square = function () {$ scope.result = CalcService.Square ($ scope.number);}});usine
L'usine est une fonction qui renvoie une valeur. Créé lorsque le service et le contrôleur nécessitent.
Habituellement, nous utilisons des fonctions d'usine pour calculer ou renvoyer des valeurs.
// Définir un module var mainApp = angular.module ("mainApp", []); // Créer Factory "MathService" utilisé pour multiplier le produit de deux nombres mainapp.factory ('mathService', function () {var factory = {}; factory.multiply = function (a, b) {return a * b} return factory;}); // Inject Factory "MathService" dans Service mainApp.Service ('CalcService', fonction (mathService) {this.square = function (a) {return mathService.multiply (a, a);}}); ...Fournisseur
Dans AngularJS, un service, une usine, etc. sont créés via le fournisseur (étape de configuration).
Une méthode d'usine get () est fournie dans le fournisseur, qui est utilisé pour renvoyer la valeur / service / usine.
// Définir un module var mainApp = angular.module ("mainApp", []); ... // Créer un service à l'aide du fournisseur Définissez une méthode pour calculer le produit de deux nombres mainApp.config (fonction ($ fournis) {$ fournis.provider ('mathService', function () {this. $ Get = function () {var factory = {}; factory.multly = furet (a, b) {{}; factory.multly = furet (a, b) {{}; factory.multly = furet (a, b) {{}; factory. B;constante
constant (constant) est utilisé pour transmettre des valeurs numériques pendant la phase de configuration. Notez que cette constante n'est pas disponible pendant la phase de configuration.
mainApp.Constant ("configParam", "Valeur constante");
Exemple
Les exemples suivants fournissent une démonstration de plusieurs mécanismes d'injection de dépendance ci-dessus.
<html> <éadf> <méta charse = "UTF-8"> <Title> AngularJs Injection de dépendance </TITAL> </ head> <body> <h2> AngularJS Application simple </h2> <div ng-app = "MainApp" ng-controller = "CalcController"> <p> Entrez un nombre: <entrée type = "numéro" ng-model = "/ p> </ p> </ plier ng-click = "carré ()"> x <p> 2 </p> </ bouton> <p> Résultat: {{result}} </p> </div> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </cript> []); 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ésultats en cours:
Ce qui précède est le tri des données pour injecter les dépendances angularjs. Nous continuerons à l'ajouter plus tard. J'espère que cela pourra aider des amis qui développent AngularJS.