Antes de hablar sobre el módulo AngularJS, primero introduzcamos algunos puntos de conocimiento de Angular:
AngularJS es una tecnología de cliente pura, escrita completamente en JavaScript. Utiliza tecnologías convencionales de desarrollo web (HTML, CSS, JavaScript) para que el desarrollo de aplicaciones web sea más rápido y más fácil.
AngularJS simplifica el desarrollo de aplicaciones es empaquetar algunas operaciones comunes de desarrollo de bajo nivel para proporcionarlos a los desarrolladores. AngularJS manejará automáticamente estas operaciones de bajo nivel. Ellos incluyen:
1. Operación deldM
2. Establezca la escucha de eventos
3. Verificación de entrada, debido a que AngularJS manejará la mayoría de estas operaciones, los desarrolladores pueden centrarse más en la lógica comercial de la aplicación y escribir un código menos repetitivo, propenso a errores y de bajo nivel.
Si bien AngularJS está simplificando el desarrollo, también trae algunas tecnologías exquisitas al cliente, que incluyen:
1. Separación de datos, lógica comercial y vistas
2. ANIFICACIÓN AUTOMÁTICA DE DATOS Y VISTAS
3. Servicios generales
4. Inyección de dependencia (utilizada principalmente para servicios de agregación)
5. Compilador HTML extensible (escrito completamente por JavaScript)
6. Fácil de probar
7. La demanda del cliente para estas tecnologías realmente ha existido durante mucho tiempo.
Al mismo tiempo, también puede usar AngularJS para desarrollar aplicaciones de una sola página o varias páginas, pero se usa principalmente para desarrollar aplicaciones de una sola página. AngularJS admite operaciones de historia del navegador, botones de avance y retroceso, y operaciones favoritas en aplicaciones de una sola página.
A continuación, expliquemos en detalle el módulo de AngularJS.
La mayoría de las aplicaciones tienen un método principal para instanciar, organizar y iniciar aplicaciones. Las aplicaciones AngularJS no tienen un método principal, pero use módulos para declarar cómo se debe iniciar la aplicación. Este método tiene las siguientes ventajas:
1. El proceso de inicio es declarativo, por lo que es más fácil de entender.
2. En las pruebas unitarias, no hay necesidad de cargar todos los módulos, por lo que este método ayuda a escribir pruebas unitarias.
3. Se pueden agregar módulos adicionales a las pruebas en situaciones específicas. Estos módulos pueden cambiar las configuraciones y pueden ayudar con las pruebas de extremo a extremo.
4. El código de terceros se puede empaquetar en módulos reutilizables.
5. Los módulos se pueden cargar en cualquier orden de secuencia o paralelismo (porque la ejecución del módulo en sí se retrasa).
Por ejemplo:
<! Doctype html> <html ng-app = "myapp"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </script> <script> var myappmodule = angular.module ('myapp', []); // Configurar el módulo. // En este ejemplo, crearemos un filtro de saludo myappModule.filter ('greet', function () {return function (name) {return 'hello' ' + name +'! ';};}); </script> </head> <body> <div> {{'World' | Salud}} </div> </body> </html>En el ejemplo anterior, usamos el módulo myApp para iniciar la aplicación especificándola en <html ng-app = "myApp">.
El ejemplo anterior es muy simple de escribir, pero no es adecuado para escribir grandes aplicaciones de la misma manera. Nuestra recomendación es dividir su aplicación en los siguientes módulos:
1. Un módulo de servicio utilizado para hacer declaraciones de servicio.
2. Un módulo de instrucción utilizado para hacer declaraciones de instrucciones.
3. Un módulo de filtro utilizado para hacer declaraciones de filtro.
4. Un módulo de nivel de aplicación que se basa en los módulos anteriores, que contiene el código de inicialización.
Por ejemplo:
<! Doctype html> <html ng-app = "xmpl"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </script> <script src = "script.js"> </script> </feT> <fody> <viv ng-controller {{ saludo }}! </div> </body> </html> [/code] script.js: [code] angular.module ('xmpl.service', []). // Valor del módulo de servicio ('saludador', {// Salutación de objeto de salud personalizado: 'Hello', localizar: function (localización) {this.salutation = localización.salutation;}, greet: function (name) {return this.salutation + '' + name + '!';}}). value ('user', {// carga de objeto de usuario personalizado: function (name) {this.name = name;}}); angular.module ('xmpl.Directive', []); // Módulo de instrucción Angular.module ('xmpl.filter', []); // módulo de filtro angular.module ('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']). // El módulo XMPL depende de la ejecución del módulo (función (saludador, usuario) en la matriz {// inicializa el código. Cuando la aplicación comienza, greeter.localise ({salutation: 'bonjour'}); user.load ('world');}) // un controlador para su appVar xmpl Controller ($ scope, greeter, user) {$ scope saluder.greet (user.name);}La razón de esta división es que a menudo necesita ignorar el código de inicialización en sus pruebas, porque estos códigos son más difíciles de probar. Al dividirlo, se puede ignorar fácilmente en las pruebas. La prueba también puede ser más específica cargando solo módulos relacionados con la prueba de corriente. Lo anterior es solo una sugerencia, puede estar seguro de ajustarlo de acuerdo con su situación específica.
Un módulo es una colección de una serie de configuraciones y bloques de código que se adjuntan a la aplicación en la etapa de inicio. Un módulo más simple consta de dos conjuntos de bloques de código:
Bloque de código de configuración: ejecute durante la fase de inyección y configuración del proveedor de inyección. Solo el proveedor de inyección y las constantes se pueden inyectar en el bloque de configuración. Esto es para evitar que el servicio se inicialice por adelantado antes de configurarlo.
Ejecutar el bloque de código: ejecute 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 que la configuración del sistema ocurra después de la operación.
Implementación del código:
angular.module ('mymodule', []). config (function (inyectable) {// Bloque de código de configuración del inyector de proveedor // Este es un ejemplo de bloque de configuración. // puede tener tantos de estos como desee. // solo puede inyectar proveedores (no instancias) // en los bloques de configuración.}). run (function (inyectable) {// Bloque de código de configuración del inyector de instancia // Este es un ejemplo de un bloque de ejecución. // puede tener tantos de estos como desee. // solo puede inyectar instancias (no proveedores) // en los bloques de ejecución});Los módulos también tienen algunas formas fáciles de configurar, y usarlos es equivalente a usar bloques de código. Por ejemplo:
angular.module ('mymodule', []). valor ('a', 123). fábrica ('a', function () {return 123;}). Directiva ('DirectiveName', ...). Filtro ('Filtername', ...); // es el mismo asangular.module ('mymodule', []). config (function ($ proporcion, $ compileprovider, $ filtreProvider) {$ prop.Los bloques de configuración se aplicarán en el orden de registro en $ proporcionando $ compileprovider, $ filtreProvider y $ filtreProvider. La única excepción es la definición de constantes, que siempre debe colocarse al comienzo del bloque de configuración.
Los bloques en ejecución son los más como el método principal en AngularJS. Un bloque de ejecución es un código utilizado para iniciar la aplicación. Se ejecuta después de que se configuran todos los servicios y se crean todos los inyectores. Los bloques en ejecución generalmente contienen un código difícil de probar, por lo que deben escribirse en módulos separados para que puedan ignorarse durante la prueba unitaria.
Un módulo puede enumerar otros módulos como sus dependencias. "Depender de cierto módulo" significa que el módulo dependiente debe cargarse antes del módulo. En otras palabras, el bloque de configuración del módulo dependiente se ejecutará antes del bloque de configuración de este módulo. Lo mismo ocurre con los bloques en ejecución. Cualquier módulo solo se puede cargar una vez, incluso si depende de múltiples módulos.
Un módulo es un método utilizado para administrar la configuración de $ inyector y no tiene nada que ver con la carga del script. Hay muchas bibliotecas para cargar módulos de control en Internet, que se pueden usar con AngularJS. Debido a que los módulos no hacen nada durante la carga, se pueden cargar en cualquier orden o en paralelo