API introuvable?
AngularJS fournit une certaine encapsulation des fonctions, mais lorsque vous essayez d'accéder à ces fonctions via l'objet global angulaire, vous constatez qu'ils sont très différents des bibliothèques que vous avez rencontrées dans le passé.
$ http
Par exemple, dans jQuery, nous savons que son API est exposée via un objet global: $. Lorsque vous devez passer un appel Ajax, utilisez $ .ajax (). Une telle API est très cohérente avec les attentes de la pensée.
AngularJS expose également un objet global: Angular, qui résume également l'appel AJAX et fournit un objet $ http. Cependant, lorsque vous essayez d'accéder à Angular. $ Http en utilisant l'ancienne expérience, vous constatez que ce n'est pas le cas!
Après avoir soigneusement vérifié la documentation $ HTTP, je ne trouve aucun indice. Où puis-je obtenir ce $ http?
Injection de dépendance / DI
En fait, AngularJS organise tous les composants fonctionnels dans l'injection de dépendance:
En mode d'injection de dépendance, tous les composants doivent passer par des conteneurs pour accéder les uns aux autres, ce qui conduit au fait que dans AngularJS, vous devez utiliser un intermédiaire pour obtenir un objet d'instance d'un composant:
var injector = angular.injector (['ng']); injector.invoke (fonction ($ http) {// do sth. avec $ http});Cet intermédiaire est un conteneur en mode d'injection de dépendance. Dans AngularJS, on l'appelle: injecteur.
Dans l'exemple de → _ →, nous pouvons voir que nous avons l'objet $ http, qui est en fait une fonction.
Injecteur / injecteur
L'injecteur est la clé de la mise en œuvre du cadre AngularJS et du développement d'applications, qui est une implémentation de conteneurs DI / IOC.
AngularJS divise les fonctions en différents types de composants et les implémente séparément. Ces composants ont un nom collectif - fournisseur / fournisseur. La figure suivante répertorie plusieurs services intégrés couramment utilisés pour AngularJS:
Les composants AngularJS ne peuvent pas être appelés directement les uns des autres. Un composant doit passer par un injecteur pour appeler un autre composant. Cet avantage est que les composants sont découplés les uns des autres et que la gestion de l'ensemble du cycle de vie de l'objet est jetée à l'injecteur.
L'injecteur implémente deux fonctions importantes:
Conserver les recettes pour tous les fournisseurs
La recette est en fait: nom + constructeur de classe. Lorsque AngularJS est démarré, ces fournisseurs sont d'abord enregistrés dans l'injecteur en utilisant leurs recettes. Par exemple, le composant de service de demande HTTP est encapsulé dans la classe $ httpprovider, et il est enregistré dans l'injecteur via le nom «$ http».
Fournir des exemples de composants fonctionnels à la demande
D'autres composants, tels que le contrôleur d'un utilisateur, si vous devez utiliser la fonction HTTP, utilisez le nom «$ http» pour demander l'injecteur, vous pouvez obtenir une instance de service HTTP.
Essayez de modifier le code de → _ → pour voir quel est le service de compilation $?
Enregistrer le composant de service
Du point de vue de l'injecteur, un composant est un fournisseur de fonctions, il est donc appelé fournisseur / fournisseur. Dans AngularJS, le fournisseur est encapsulé sous la forme d'une classe JavaScript (constructeur).
Les noms de service sont généralement identifiés par une chaîne, telle que «$ http» pour le service d'appel HTTP, «$ rootscope» pour l'objet de portée racine, «$ compile» pour le service de compilation ...
La classe des fournisseurs nécessite une fonction $ get (Class Factory). En appelant cette fonction, l'injecteur peut obtenir une instance du composant de service.
Les informations combinées du nom et de la fonction de classe s'appellent la recette. L'injecteur maintient une bibliothèque de recettes centralisée pour créer différents composants à la demande. Cette bibliothèque de recettes est en fait un objet de hachage, la clé est le nom du service, et la valeur est la définition de classe.
Dans l'exemple de → _ →, nous définissons une classe de service simple, et l'instance de cette classe de service est une chaîne: "Bonjour, monde!". Nous utilisons «Ezhello» comme nom de service pour nous inscrire dans l'injecteur et afficher cette instance via l'injecteur.
Obtenez l'objet d'injecteur
Pour utiliser la fonctionnalité d'AngularJS, vous devez d'abord obtenir l'injecteur. Il existe deux façons d'obtenir l'injecteur.
Créer un nouvel injecteur
Vous pouvez créer un nouvel injecteur à l'aide d'Angular.Injector ():
angular.injector (modules, [strictdi]); Obtenez l'injecteur déjà créé
Si le cadre AngularJS a été démarré, vous pouvez utiliser la méthode injecteur () de l'objet DOM pour obtenir l'injecteur déjà créé:
var element = angular.element (dom_element);
var injecteur = élément.injector ();
Appel API via l'injecteur
L'injecteur a deux méthodes pour les appels API: invoke () et get ().
invoquer()
À l'aide de la méthode invoke () de l'injecteur, vous pouvez appeler directement un corps de fonction défini par l'utilisateur et injecter l'objet de service dépendant via des paramètres de fonction. Ceci est l'utilisation de la recommandation et de la convention AngularJS:
angular.injector (['ng']). invoke (fonction ($ http) {// do sth. avec $ http}); obtenir()Vous pouvez également utiliser la méthode get () de l'injecteur pour obtenir l'instance de service avec le nom spécifié:
var my $ http = angular.injector (['ng']). get ('$ http'); // do sth. avec mon $ http→ _ → Exemple cette fois, j'ai utilisé la méthode get () pour obtenir directement une instance de service et la sentir!
Méthode et principe d'injection
Il existe deux façons d'informer l'injecteur de l'objet de service qui doit être injecté: injection de nom de paramètre et injection de tableau de dépendance.
Injection de nom de paramètre
Lorsque AngularJS exécute la fonction invoke (), il convertit la définition de la fonction à injecter en une chaîne, vérifie son tableau de paramètres à travers des expressions régulières, et découvre et injecte donc l'objet de service dont il dépend:
// myfunc déclare que cette fonction dépend du service '$ http' var myfunc = fonction ($ http) {// do sth. avec $ http}; injectIl y a un problème avec cela, c'est-à-dire que lorsque nous compressons le code JavaScript, $ http peut être changé en un autre nom, ce qui entraînera l'échec de l'injection.
Dépendre de l'injection de réseau
AngularJS utilise la méthode du tableau de dépendance pour résoudre le problème causé par l'obscuscation de la compression de code. À l'heure actuelle, l'invoke () est transmis dans un tableau. Le dernier élément du tableau est la fonction à exécuter réellement, et les autres éléments indiquent le nom de service qui doit être injecté dans la fonction. L'injecteur injectera des objets dépendants dans la fonction de l'ordre dans le tableau.
Avec cette méthode, le nom de la table des paramètres à injecter n'est pas pertinent:
// myfunc dépend des services '$ http' et '$ compile' var myfunc = ['$ http', '$ compile', fonction (p1, p2) {// do sth. avec p1 ($ http), p2 ($ compile)}]; injector.invoke (myfunc);L'instance de → _ → est injectée avec une méthode dépendante du tableau. Cette fois, l'instance de service Ezhello est injectée. Vous pouvez modifier le nom du paramètre pour voir si cela affecte le résultat?
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.