1. ¿Qué es un módulo?
Muchas aplicaciones tienen un método principal para la inicialización, la carga (¿el significado de los cables?) Y las aplicaciones de lanzamiento. La aplicación angular no requiere el método principal. En cambio, el módulo proporciona una forma declarativa con un propósito específico, descripción descriptiva de cómo se inicia la aplicación. Hay varias ventajas en hacer esto:
2. Lo básico
Estamos ansiosos por saber cómo hacer que Hello World Module funcione. Aquí hay algunas cosas clave a las que prestar atención:
API del módulo (http://code.angularjs.org/1.0.2/docs/api/angular.module)
Tenga en cuenta el módulo myApp mencionado en <html ng-app = "myApp">, que permite al lanzador iniciar el módulo myApp que definimos.
<! DocType html> <html lang = "zh-cn" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> conceptos básicos </title> <style type = "text/css"> .ng-cloak {Display: Ninguno; } </style> </head> <body> <div> {{'Kitty' | salud}} </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javaScript"> var simplEmodule = angular.module ("myapp", []); simplemodule.filter ("greet", function () {return function (name) {return "hello" + name + "!";}}); </script> </body> </html>3. (Configuración recomendada) Configuración recomendada
Aunque el ejemplo anterior es simple, no es una aplicación a gran escala. Recomendamos dividir su aplicación en múltiples módulos de la siguiente manera:
La razón de esta división es que cuando estamos probando, a menudo necesitamos ignorar el código de inicialización que dificulta la prueba. Al dividir el código en módulos separados, es fácil ignorar ese código en las pruebas. De esta manera, podemos centrarnos más en cargar el módulo correspondiente para las pruebas.
Lo anterior es solo una sugerencia, puedes hacerlo como quieras.
4. Carga y dependencias del módulo (carga y dependencias del módulo)
Un módulo es una colección de configuraciones que ejecutan bloques aplicados en el proceso de iniciar la aplicación. En su forma más simple, consta de dos tipos de bloques:
1. Bloques de configuración: ejecutado durante el proceso de registro y configuración del proveedor. Solo el proveedor y constante (¿constante?) Se pueden inyectar en bloques de configuración. Esto es para evitar el accidente de que el servicio se ejecuta antes de configurar el servicio.
2. Ejecutar bloques: ejecutar después de que se cree el inyector y se usa para iniciar la aplicación. Solo se pueden inyectar instancias y constantes en el bloque de ejecución. Esto es para evitar una mayor ejecución de la configuración del sistema durante la operación del programa.
angular.module ('mymodule', []). config (function (inyectable) {// Provider-Injector // Aquí hay un ejemplo de bloque de configuración // podemos obtener n cosas que necesarias // podemos inyectar proveedores (no instancias, no instancias) en el bloque de configuración}). run (function (inyectable) {// instance-injector // Aquí hay un ejemplo de bloque de ejecución // podemos obtener n cosas que necesarias // solo podemos inyectar instancias (instancias) (no proveedores) en el bloque de ejecución});a) Bloques de configuración
Hay una manera conveniente de hacerlo en el módulo, que es equivalente al bloque de configuración. Por ejemplo:
angular.module ('mymodule', []). valor ('a', 123). fábrica ('a', function () {return 123;}). Directiva ('DirectiveName', ...). Filtro ('Filtername', ...); // es equivalente a angular.module ('mymodule', []). config (function ($ proporcion, $ compileprovider, $ filtreProvider) {$ prop.El orden en el que se aplican los bloques de configuración es consistente con el orden en el que están registrados. Para definiciones constantes, es un caso adicional, es decir, la definición constante colocada al comienzo de los bloques de configuración.
b) Ejecutar bloques (bloque de aplicaciones)
El bloque de ejecución es lo más cercano al método principal en angular. El bloque Run es el código que debe ejecutarse para iniciar la aplicación. Se ejecutará después de que se creen todas las configuraciones e inyectores de servicio. Los bloques de ejecución generalmente contienen un código que es más difícil de probar. Por esta razón, estos códigos deben definirse en un módulo separado para que puedan ignorarse en las pruebas unitarias.
c) dependencias (dependencias)
Un módulo puede enumerar otros módulos en los que depende. Confiar en un módulo significa que el módulo solicitado (confiable) debe cargarse antes de solicitar el módulo (el módulo que debe depender de otros módulos, el solicitante) está cargado. En otras palabras, el bloque de configuración del módulo solicitado se ejecutará antes de que los bloqueos de configuración o el módulo requerido, ¿cómo explicar o aquí?). Lo mismo es cierto para el bloque de ejecución. Cada módulo solo se puede cargar una vez, incluso si hay otros módulos que lo requieren.
d) Carga asincrónica (carga asincrónica)
El módulo es una de las formas de administrar la configuración de $ inyector, sin hacer nada con la carga de scripts a la VM. Ahora hay proyectos preparados que están específicamente diseñados para la carga de script, y también se pueden usar en Angular. Debido a que los módulos no hacen nada durante la carga, se pueden cargar en la VM en cualquier orden. Los cargadores de script pueden usar esta función para realizar una carga paralela.
5. Prueba unitaria
En la forma más simple de prueba unitaria, uno es instanciar un subconjunto de una aplicación en la prueba y luego ejecutarlos. Es importante destacar que debemos darnos cuenta de que para cada inyector, cada módulo solo se cargará una vez. Por lo general, una aplicación solo tiene un inyector. Pero en las pruebas, cada caso de prueba tiene su inyector, lo que significa que en cada VM, el módulo se cargará varias veces. Construir el módulo correctamente ayudará a las pruebas unitarias, como en el siguiente ejemplo:
En este ejemplo, nos preparamos para suponer que se define el siguiente módulo:
angular.module ('greetmod', []). factory ('alerta', function ($ window) {return function (text) {$ window.alert (text);};}). valor ('salutation', 'hello'). factory ('greet', function (alert, salutation) {function de retorno (nombre) {salutation + ' + name +'! ');};};};Escribamos algunos casos de prueba:
describe('myApp', function() { // Load the module of the application response, and then load the specified test module that rewrites $window to the mock version. // Do this, when window.alert() is performed, the tester will not stop because it is blocked by the real alert window // Here is an example of overwriting configuration information in the test beforeEach(module('greetMod', function($provide) {// It seems that the real $ Window es reemplazar el siguiente $ proporcionar. {Greet ('World'); $ proporcionar.value ('alerta', alertspy);