javascript - letra - ¿Qué se entiende por Bootstrapping en JS angular?
fieldset legend bootstrap (6)
Agregando a la respuesta de Dave Swersky (y soy nuevo en Angular así que corrígeme si estoy equivocado):
La siguiente imagen, tomada del tutorial angularjs.org bootstrap . Explica lo que Dave articuló.
El HTML, dentro del elemento con la directiva ng-app, es compilado por AngularJS. Por ejemplo:
<body>
<div> {{ 1 + 2 }} </div>
</body>
Representaría como esto:
{{ 1 + 2 }}
Sin embargo, agregando la directiva ng-app:
<body ng-app="module">
<div> {{ 1 + 2 }} </div>
</body>
Renders como este:
3
Esto se debe a que ng-app "arrancó" la etiqueta del cuerpo y le dijo a Angular que creara una "representación interna" del contenido. La representación interna es, por supuesto, 3 . Del tutorial:
"Si se encuentra la directiva ng-app, Angular compilará el DOM tratando la directiva ng-app como la raíz de la compilación. Esto le permite decirle que trate solo una parte del DOM como una aplicación angular".
Angular también carga el módulo asociado con la directiva ng-app ("módulo" en el tutorial angular) y crea un inyector de aplicaciones (utilizado para la inyección de dependencias).
Soy un principiante en Angular JS. Estaba revisando el siguiente enlace. http://docs.angularjs.org/tutorial/step_00
¿Cuáles son los archivos de arranque? ¿Dónde están ubicados?
¿Qué es el arranque automático y la inicialización manual de bootstrapping? Leí la desventaja de la inicialización manual de la siguiente manera ... desde el enlace http://docs.angularjs.org/guide/bootstrap
¿Alguien puede explicar exactamente cuál es la desventaja aquí?
Aunque Todos los de arriba ha respondido perfectamente y encontré lo que estaba buscando, pero aún me falta un ejemplo de trabajo.
Si bien la comprensión sobre el arranque manual / automático en AngularJS a continuación, los ejemplos pueden ayudar mucho:
AngularJS: Auto Bootstrapping:
Angular se inicializa / carga automáticamente en el evento DOMContentLoaded o cuando el script angular.js se descarga al navegador y el document.readyState se configura para completarse. En este punto, AngularJS busca la directiva ng-app. Cuando se encuentre la directiva ng-app, Angular hará lo siguiente:
Cargue el módulo asociado a la directiva.
Crea el inyector de la aplicación.
Compila el DOM a partir del elemento raíz ng-app.
Este proceso se llama auto-bootstrapping.
<html>
<body ng-app="myApp">
<div ng-controller="Ctrl">Hello {{msg}}!</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module(''myApp'', []);
app.controller(''Ctrl'', function($scope) {
$scope.msg = ''Nik'';
});
</script>
</body>
</html>
JSFiddle: http://jsfiddle.net/nikdtu/ohrjjqws/
AngularJS - Bootstrapping manual:
Puede inicializar manualmente su aplicación angular utilizando la función angular.bootstrap (). Esta función toma los módulos como parámetros y debe llamarse dentro de la función angular.element (document) .ready (). La función angular.element (document) .ready () se activa cuando el DOM está listo para la manipulación.
<html>
<body>
<div ng-controller="Ctrl">Hello {{msg}}!</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module(''myApp'', []);
app.controller(''Ctrl'', function($scope) {
$scope.msg = ''Nik'';
});
//manual bootstrap process
angular.element(document).ready(function () { angular.bootstrap(document, [''myApp'']); });
</script>
</body>
</html>
JSFiddle: http://jsfiddle.net/nikdtu/umcq4wq7/
Nota :
No debe usar la directiva ng-app cuando realice un arranque manual de su aplicación.
No debes mezclar la forma automática y manual de cargar tu aplicación.
Defina módulos, controladores, servicios, etc. antes de iniciar manualmente su aplicación como se define en los ejemplos anteriores.
Referencia: http://www.dotnettricks.com/books/angularjs/interview
Bootstrapping es el equivalente a inicializar o iniciar su aplicación angular. Hay 2 formas principales de hacerlo.
El primero se inicia automáticamente agregando ng-app al elemento en su HTML, así:
<html ng-app="myApp">
...
</html>
El segundo sería arrancar desde JavaScript, como tal, después de haber creado su aplicación a través de angular.module("myApp", []);
angular.bootstrap(document, [''myApp'']);
Desde la página de Angular NgModules :
import { NgModule } from ''@angular/core'';
import { BrowserModule } from ''@angular/platform-browser'';
import { AppComponent } from ''./app.component'';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Por último, la propiedad @ NgModule.bootstrap identifica este AppComponent como el componente de arranque. Cuando Angular lanza la aplicación, coloca la representación HTML de AppComponent en el DOM, dentro de las etiquetas de elemento de index.html.
Bootstrapping en main.ts
Inicia la aplicación al cargar el Módulo de aplicación en el archivo main.ts.
Angular ofrece una variedad de opciones de arranque que apuntan a múltiples plataformas. Esta página describe dos opciones, ambas dirigidas al navegador.
La directiva ng-app indica qué parte de la página (total o parcialmente, depende de usted) es la raíz de la aplicación angular. Angular lee el HTML dentro de esa raíz y lo compila en una representación interna. Esta lectura y compilación es el proceso de arranque.
El arranque manual es cuando se escribe código para ejecutar el proceso de arranque en lugar de utilizar la directiva ng-app .
Proceso de arranque angular JS Auto
AngularInit () es la primera API que se llama para el enganche de arranque automático a través de la función jqLite ready.
- listo () llamado listo para DOM
- angularInit () llamado desde ready ()
- Angular Init extrae el elemento ng-app de DOM utilizando element.querySelectorAll () uno de los siguientes formatos: ''ng: app'', ''ng-app'', ''x-ng-app'', ''data-ng-app'' Ej.
<body ng-app=ngAppDemo> <div ng-controller="ngAppDemoController" > I can add: {{a}} + {{b}} = {{ a+b }} </div> </body>
ng-app="ngAppDemo" will be extracted.
- Se extrae el uso del módulo de expresión regular, ej. module = "ngAppDemo"
- finalmente se llama a bootstrap (...), que crea un inyector y un rootscope global y una correa de arranque en la aplicación angular.