API no encontrada?
AngularJS proporciona cierta encapsulación de funciones, pero cuando intenta acceder a estas funciones a través del objeto global Angular, encuentra que son muy diferentes de las bibliotecas que encontró en el pasado.
$ http
Por ejemplo, en jQuery, sabemos que su API está expuesta a través de un objeto global: $. Cuando necesite hacer una llamada Ajax, use $ .Jajax (). Tal API es muy consistente con las expectativas de pensamiento.
AngularJS también expone un objeto global: Angular, que también encapsula la llamada AJAX y proporciona un objeto $ HTTP. Sin embargo, cuando intenta acceder a Angular. $ Http usando experiencia antigua, ¡descubre que no es el caso!
Después de revisar cuidadosamente la documentación $ HTTP, no puedo encontrar ninguna pista. ¿Dónde puedo obtener este $ http?
Inyección de dependencia/DI
De hecho, AngularJS organiza todos los componentes funcionales en la inyección de dependencia:
En el modo de inyección de dependencia, todos los componentes deben pasar a través de contenedores para acceder entre sí, lo que conduce al hecho de que en AngularJS, debe usar un intermediario para obtener un objeto de instancia de un componente:
var inyector = angular.injector (['ng']); injector.invoke (function ($ http) {// do sth. con $ http});Este intermediario es un contenedor en el modo de inyección de dependencia. En Angularjs, se llama: inyector.
En el ejemplo de → _ →, podemos ver que tenemos el objeto $ HTTP, que en realidad es una función.
Inyector/inyector
El inyector es la clave para la implementación del marco AngularJS y el desarrollo de aplicaciones, que es una implementación de contenedores DI/IOC.
AngularJS divide las funciones en diferentes tipos de componentes y las implementa por separado. Estos componentes tienen un nombre colectivo: proveedor/proveedor. La siguiente figura enumera varios servicios incorporados de uso común para AngularJS:
Los componentes AngularJS no se pueden llamar directamente entre sí. Un componente debe pasar a través de un inyector para llamar a otro componente. Este beneficio es que los componentes se desacoplan entre sí, y la gestión de todo el ciclo de vida del objeto se arroja al inyector.
El inyector implementa dos funciones importantes:
Recetas de almacenamiento centralmente para todos los proveedores
La receta es en realidad: nombre + constructor de clase. Cuando se inicia AngularJS, estos proveedores se registran primero en el inyector utilizando sus recetas. Por ejemplo, el componente del servicio de solicitud HTTP está encapsulado dentro de la clase $ httpprovider, y está registrado en el inyector a través del nombre '$ http'.
Proporcionar ejemplos de componentes funcionales bajo demanda
Otros componentes, como el controlador de un usuario, si necesita usar la función HTTP, usan el nombre '$ http' para solicitar el inyector, puede obtener una instancia de servicio HTTP.
Intente modificar el código de → _ → para ver cuál es el servicio de compilación $?
Registrar componente de servicio
Desde la perspectiva del inyector, un componente es un proveedor de funciones, por lo que se llama proveedor/proveedor. En AngularJS, el proveedor se encapsula en forma de una clase JavaScript (constructor).
Los nombres de servicio generalmente se identifican mediante una cadena, como '$ http' para el servicio de llamadas http, '$ rootscope' para objeto de alcance raíz, '$ compilar' para el servicio de compilación ...
La clase de proveedor requiere una función $ get (fábrica de clases). Al llamar a esta función, el inyector puede obtener una instancia del componente de servicio.
La información combinada de la función de nombre y clase se llama receta. Inyector mantiene una biblioteca de recetas centralizada para crear diferentes componentes a pedido. Esta biblioteca de recetas es en realidad un objeto hash, la clave es el nombre del servicio y el valor es la definición de clase.
En el ejemplo de → _ →, definimos una clase de servicio simple, y la instancia de esta clase de servicio es una cadena: "¡Hola, mundo!". Utilizamos 'Ezhello' como su nombre de servicio para registrarse en el inyector y mostrar esta instancia a través del inyector.
Obtener el objeto del inyector
Para usar la funcionalidad de AngularJS, primero debe obtener el inyector. Hay dos formas de obtener el inyector.
Crear un nuevo inyector
Puede crear un nuevo inyector usando angular.injector ():
angular.injector (módulos, [strictdi]); Obtenga el inyector ya creado
Si se ha iniciado el marco AngularJS, puede usar el método inyector () del objeto DOM para obtener el inyector ya creado:
var elemento = angular.element (dom_element);
var inyector = element.injector ();
Llamar a API a través del inyector
El inyector tiene dos métodos para las llamadas API: Invoke () y get ().
invocar()
Usando el método Invoke () del inyector, puede llamar directamente a un cuerpo de función definido por el usuario e inyectar el objeto de servicio dependiente a través de los parámetros de la función. Este es el uso de la recomendación y la convención de AngularJS:
angular.injector (['' ng ']). Invoke (function ($ http) {// do sth. con $ http}); conseguir()También puede usar el método get () del inyector para obtener la instancia de servicio con el nombre especificado:
var my $ http = angular.injector (['ng']). get ('$ http'); // do sth. con mi $ http→ _ → Ejemplo Esta vez, utilicé el método get () para obtener directamente una instancia de servicio y sentirlo.
Método de inyección y principio
Hay dos formas de informar al inyector del objeto de servicio que debe inyectarse: inyección de nombre de parámetro y inyección de matriz de dependencia.
Inyección de nombre de parámetro
Cuando AngularJS ejecuta la función Invoke (), convierte la definición de función que se inyecta en una cadena, verifica su tabla de parámetros a través de expresiones regulares y, por lo tanto, descubre e inyecta el objeto de servicio en el que depende:
// myFunc declara que esta función depende del servicio '$ http' var myfunc = function ($ http) {// do sth. con $ http}; inyector.invoke (myfunc); // La definición de MyFunc se convertirá en una cadena para la verificación de nombres de parámetros.Hay un problema con esto, es decir, cuando comprimamos el código JavaScript, $ HTTP puede cambiarse a otro nombre, lo que hará que la inyección falle.
Depender de la inyección de matriz
AngularJS utiliza el método de matriz de dependencia para resolver el problema causado por la ofuscación de compresión del código. En este momento, el Invoke () se pasa a una matriz. El último elemento de la matriz es la función que se ejecutará realmente, y los otros elementos indican el nombre del servicio que debe inyectarse en la función. El inyector inyectará objetos dependientes en la función en el orden en la matriz.
Con este método, el nombre de la tabla de parámetros a inyectar es irrelevante:
// myFunc depende de los servicios '$ http' y '$ compile' var myfunc = ['$ http', '$ compile', function (p1, p2) {// do sth. con p1 ($ http), p2 ($ compile)}]; injector.invoke (myfunc);La instancia de → _ → se inyecta con un método dependiente de la matriz. Esta vez, se inyecta la instancia del servicio de Ezhello. ¿Puede cambiar el nombre del parámetro para ver si afecta el resultado?
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.