AngularJS Bootstrap Explicación detallada y código de muestra

Autor：Eve Cole Fecha de actualización：2025-08-28 04:00:03

El primer artículo de la serie AngularJS Study Notes, espero poder seguir escribiéndolo. El contenido de este artículo proviene principalmente del contenido del documento http://docs.angularjs.org/guide/, pero también agrega algunos de sus propios resultados de comprensión e intento.

1. Resumen

Este artículo explica el proceso de inicialización angular y cómo inicializar manualmente Angular cuando lo necesita.

2. Angular <script> etiqueta

Este ejemplo se utiliza para mostrar cómo integrar Angular a través de la ruta recomendada para lograr la inicialización automática.

 <! Doctype html> <html xmlns: ng = "http://angularjs.org" ng-app> <body> ... <script src = "angular.js"> </body> </html>

Coloque la etiqueta Sciprt en la parte inferior de la página. Esto puede evitar la carga de HTML cargando angular.js, reduciendo así el tiempo de carga de la aplicación. Podemos obtener la última versión de AngularJS en http://code.angularjs.org. Por razones de seguridad, no se refiera directamente a esta dirección en el producto para cargar el script. Pero si es solo para la investigación y el aprendizaje, no importa si es una conexión directa.

Seleccione: Angular- [Versión] .js es una versión que es conveniente para leer y es adecuada para el desarrollo y la depuración diarios.

Seleccione: Angular- [Versión] .min.js es una versión comprimida y ofuscada que es adecuada para su uso en el producto final.

Coloque "ng-app" en el nodo raíz de la aplicación. Si desea que Angular inicie automáticamente su aplicación, generalmente puede colocarla en la etiqueta <html>.

Si necesitamos usar la sintaxis de la directiva de estilo de la vieja escuela "Ng:", entonces necesitamos agregar un espacio de nombre XML a la etiqueta HTML para "complacer" el IE. (Esta es una razón histórica, y no recomendamos usar NG :)

3. Inicialización automática

Angular se inicializará automáticamente en el evento DomContentLoaded, y Angular encontrará el nodo raíz de aplicación especificado por usted a través de la Directiva NG-APP. Si se encuentra, Angular hará lo siguiente:

Cargar directivas relacionadas con el módulo.

Cree un inyector relacionado con la aplicación (Manager de dependencia).

Especifique el nodo raíz con NG-APP e inicie el trabajo relevante de "compilación" del DOM. En otras palabras, una parte de la página (no <html>) se puede usar como nodo raíz, lo que limita el alcance de Angular.

 <! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap-auto </title> <style type = "text/css"> .ng-cloak {visualización: ninguno; } </style> </head> <body> Aquí está el exterior de ng-app ~~ {{1+2}}} <div ng-app> Aquí está el interior de ng-app ~~~ {{1+3*2}} </ div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> <<script </script </script </script </script </script </boder

NOTA: El "Ng-Cloak" se usa antes de que se complete la compilación Angular.js (¡sí! Así es. Es antes de que se complete la compilación, no antes de que se carguen AngularJS. Por lo tanto, si desea evitar bien esta situación, la mejor manera es optimizar el proceso de carga de la aplicación, o combinar los CS a los plantillas no compiladas. Dado que el Evil IE6 y el 7 no se admiten los Attecientes de la aplicación. Class = "Ng-Cloak".

4. Inicialización manual

Si queremos controlar aún más el proceso de inicialización (por ejemplo, debe cargar angular.js a través del cargador de script o hacer algunas operaciones antes de la página de compilación angular), entonces podemos usar un método de inicio llamado manualmente.

El siguiente ejemplo es equivalente a usar NG-APP, la directiva:

 <! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap-manual </title> <style type = "text/css"> .ng-cloak {visualización: ninguno; } </ystye> </head> <body> Aquí está el exterior de ng-app ~~ {{1+2}} <div id = "rootofapp"> Este es el interior de ng-app ~~~~ {{1+3*2}}} </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> <script script script type = "text/javaScript"> angular.element (documento) .Ready (function () {angular.bootstrap (angular.element (document.getElementById ("rootofapp")));}); </script> </body> </html>

Es decir, nuestro código se puede escribir en los siguientes pasos:

1. Después de cargar la página y otro código, busque el nodo raíz de la plantilla de aplicación;

2. Llame a Angular.Bootstrap y deje que Angular compile la plantilla en una aplicación ejecutable de unión de bidireccional.

Continuaremos agregando artículos relevantes en el futuro. ¡Gracias por su apoyo para este sitio!