Récemment, je lisais le guide AngularJS faisant autorité. Pour diverses raisons (principalement parce que je n'ai pas d'argent, je le déteste, alors j'ai choisi de télécharger la version électronique en ligne (parce qu'elle ne coûte pas d'argent, haha ...). La police est assez claire et l'effet global est assez bon. Cependant, quand j'ai vu le numéro de page total dans le coin supérieur gauche, 479 pages ... 479 ... 479 ... 479 ... est-ce vrai que la moitié a été vraiment pénétrée? Vous voulez apprendre mais je ne veux pas apprendre le numéro de page mais je ne veux pas l'apprendre?
Heureusement, avant de lire des livres électroniques, j'étais un peu basique. J'avais appris un peu de temps en regardant des vidéos, de la liaison des données bidirectionnelle aux services, puis au système d'instructions, j'ai eu plus ou moins de contact. De plus, lors d'une affectation de sélection de cours spéciaux Web, un simple système de gestion des classes d'étudiants a été construit via AngularJS à l'avant et NodeJS sur le backend et la mongoose sur le backend. Parce que je n'ai pas d'argent, je ne peux le placer que sur Github. Adresse GitHub: Système de gestion des étudiants, bienvenue à Fork, passons au sujet ci-dessous ...
============================================================================================================.
Il y a généralement trois façons pour qu'un objet prenne le contrôle de sa dépendance:
(1) créer des dépendances en interne;
(2) références par le biais de variables globales;
(3) passer par des paramètres en cas de besoin.
Une injection de dépendance est réalisée dans la troisième voie. Les deux autres méthodes apporteront divers problèmes, tels que la pollution de la portée globale, la rendez-vous à l'isolement extrêmement difficile, etc. L'injection de dépendance est un modèle de conception qui supprime les dépendances à code dur, afin que les dépendances puissent être modifiées ou même supprimées au moment de l'exécution.
La possibilité de modifier les dépendances à l'exécution est idéale pour les tests car elle nous permet de créer un environnement isolé où des objets moqués peuvent être utilisés au lieu d'objets réels dans l'environnement de production.
Dans une perspective fonctionnelle, l'injection de dépendance trouvera automatiquement la dépendance à l'avance et informera la ressource dépendante de la cible d'injection, afin que la ressource puisse être injectée immédiatement lorsque la cible en a besoin.
Lors de l'écriture de composants qui dépendent d'autres objets ou bibliothèques, nous devons décrire les dépendances entre les composants. Pendant l'exécution, l'injecteur crée une instance de la dépendance et est responsable de le transmettre au consommateur dépendant.
// Excellent exemple de la fonction de documentation angulaire Someclass (greeter) {this.greeter = greeter;} Someclass.prototype.GreetName = function (name) {this.greeter.greet (name);}; // note que l'exemple de code crée un contrôleur sur le sclome global, qui n'est pas une bonne idée, il s'agit uniquement de l'association de la démonstration.Someclass est en mesure d'accéder au greeter interne lors de l'exécution, mais il ne se soucie pas de savoir comment obtenir une référence au Greeter. Pour obtenir une référence à l'instance Greeter, le créateur de Someclass est responsable de la construction de ses dépendances et de la transmission.
Pour les raisons ci-dessus, AngularJS utilise $ injetor (service d'injecteur) pour gérer les requêtes et l'instanciation des dépendances. En fait, $ injetor est responsable de l'instanciation de tous les composants dans AngularJS, y compris les modules, les instructions et les contrôleurs de l'application.
Au moment de l'exécution, $ injetor est responsable de l'instanciation de n'importe quel module lorsqu'il démarre et de la transmission de toutes les dépendances dont il a besoin.
Par exemple, le code suivant. Il s'agit d'une application simple qui déclare un module et un contrôleur:
angular.module ('myapp', []). factory ('greeter', function () {return {saluer: function (msg) {alert (msg);}}}). Controller ('myController', function ($ scope, greeter) {$ scope.sayhello = function () {greeter.greet ("Hello!Lorsque AngularJS instancie ce module, il recherche Greeter et passe naturellement des références:
<div ng-app = "MyApp"> <div ng-contrôleur = "MyController"> <Button ng-Click = "Sayhello ()"> Bonjour </ftont> </div> </div>
En interne, le processus de traitement d'AngularJS est le suivant:
// Utilisez l'injecteur pour charger l'application var injecteur = angular.injector (['ng', 'myApp']); // Chargez le service de contrôleur $ via l'injecteur var $ contrôleur = inject MyController = $ contrôleur ('myController', {$ scope: scope});Le code ci-dessus ne spécifie pas comment trouver Greeter, mais il fonctionne correctement car $ injecteur sera responsable de la trouver et du chargement pour nous.
AngularJS extrait la liste des paramètres de la fonction passée lors de l'instanciation via la fonction annotée. Entrez le code suivant dans les outils de développeur de Chrome pour afficher cette fonction:
> injector.annotate (fonction ($ q, greeter) {}) ["$ q", "greeter"]Dans toute application AngularJS, $ injecteur fonctionne, que nous le sachions ou non. Lors de l'écriture d'un contrôleur, si aucune balise [] n'est utilisée ou si une déclaration explicite est faite, $ injecteur essaie de déduire les dépendances par des noms de paramètres.
Déclaration d'injection déduite
S'il n'y a pas de déclaration explicite, AngularJS suppose que le nom du paramètre est le nom de la dépendance. Par conséquent, il appellera en interne la méthode toString () de l'objet de fonction, analysera et extraire la liste des paramètres de fonction et injecter ces paramètres dans l'instance d'objet via l'injecteur $. Le processus d'injection est le suivant:
injector.invoke (fonction ($ http, greeter) {});Notez que ce processus ne s'applique qu'au code non compressé et obscurci, car AngularJS nécessite une liste de paramètres brutes non compressée pour l'analyse. Avec ce processus de déduction en fonction des noms de paramètres, l'ordre des paramètres est peu significatif, car AngularJS nous aidera à injecter des propriétés dans l'ordre correct.
Injecter explicitement les déclarations
AngularJS fournit des méthodes explicites pour définir clairement les dépendances qu'une fonction doit utiliser lorsqu'elle est appelée. La déclaration des dépendances de cette manière peut toujours fonctionner correctement même si le code source est compressé et que le nom du paramètre change. La propriété $ inject peut être utilisée pour implémenter la fonction de l'injection explicite de déclarations. La propriété $ inject d'un objet fonction est un tableau, le type de l'élément de tableau est une chaîne et leurs valeurs sont le nom du service qui doit être injecté.
Voici l'exemple de code:
var acontrollerfactory = fonction acontreller ($ scope, greeter) {console.log ("contrôleur chargé", greeter); // ... contrôleur}; acontrollerfactory. $ inject = ['$ scope', 'greeter']; // Greeter Service Console.log ("Greeter Service");} // Notre contrôleur d'application angular.module ('myApp', []). Controller ('MyController', AcontrollerFactory) .Factory ('Greeter', GreeterService); // Obtenir l'injecteur et créer un nouvel injecteur Var Scope = Angular.inject 'myApp']), contrôleur = injector.get ('$ contrôleur'), rootscope = injectPour cette méthode de déclaration, l'ordre des paramètres est très important, car l'ordre des éléments de tableau $ injecte doit correspondre un par un à l'ordre des paramètres injectés. Cette méthode de déclaration peut être exécutée en code compressé car les informations pertinentes de la déclaration sont déjà liées à la fonction elle-même.
Déclaration d'injection intra-ligne
La dernière façon d'injecter des déclarations fournies par AngularJS est une déclaration d'injection en ligne qui peut être utilisée à tout moment. Cette méthode est en fait un sucre syntaxique, qui est exactement le même que le principe mentionné ci-dessus pour l'injection de déclarations via la propriété $ injecte, mais nous permet de transmettre des paramètres à l'intérieur de la ligne lorsque la fonction est définie. De plus, il évite l'utilisation de variables temporaires pendant le processus de définition.
Lors de la définition d'un objet AngularJS, la déclaration en ligne nous permet de passer un tableau de paramètres directement au lieu d'une fonction. Les éléments du tableau sont des chaînes, qui représentent les noms des dépendances qui peuvent être injectées dans l'objet. Le dernier paramètre est l'objet objet lui-même de l'injection de dépendance.
Les exemples sont les suivants:
angular.module ('myApp'). Controller ('myController', ['$ scope', 'greeter', function ($ scope, greeter) {}]);Étant donné que ce qui doit être traité est une liste de chaînes, les déclarations d'injection en ligne peuvent également s'exécuter normalement dans le code compressé. Il est généralement utilisé par les supports et le symbole [] qui déclare le tableau.
L'injection de dépendance AngularJS ci-dessus est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.