Co oznacza Bootstrapping w angular JS?

Jestem początkujący w Angular JS. Przechodziłem przez poniższy link. http://docs.angularjs.org/tutorial/step_00

Czym są pliki bootstrap? Gdzie się znajdują?

Co to jest automatyczne uruchamianie i ręczne inicjowanie bootstrappingu? Czytałem wadą ręcznego inicjalizacji jak poniżej.. z linku http://docs.angularjs.org/guide/bootstrap

Czy ktos moze wyjasnic dokladnie jaka jest wada?

Author: Mel, 2014-01-11
Source

6 answers

Chociaż wszyscy powyżej odpowiedzieli doskonale i znalazłem to, czego szukałem, ale nadal brakuje działającego przykładu.

Chociaż zrozumienie o automatycznym / ręcznym bootstrapowaniu w AngularJS poniżej przykładów może bardzo pomóc:

AngularJS: Auto Bootstrapping:

Angular inicjalizuje / bootstraps automatycznie po zdarzeniu DOMContentLoaded lub gdy angular.skrypt js jest pobierany do przeglądarki i dokumentu.readyState jest ustawione na complete. W tym point AngularJS szuka dyrektywy ng-app. Gdy dyrektywa ng-app zostanie znaleziona, Angular będzie:

  1. Załadować moduł związany z dyrektywą.

  2. Utwórz wtryskiwacz aplikacji.

  3. Kompiluje DOM zaczynając od głównego elementu ng-app.

Ten proces nazywa się 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-Manual Bootstrapping :

Możesz ręcznie zainicjować aplikację angular za pomocą funkcji angular.funkcja bootstrap (). Funkcja ta przyjmuje Moduły jako parametry i powinna być wywoływana w zakresie kątowym.element (dokument).funkcja ready (). Kanciasty.element (dokument).funkcja ready () jest wywoływana, gdy DOM jest gotowy do manipulacji.

<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/

Uwaga:

  1. Nie należy używać dyrektywy ng-app, gdy ręczne uruchamianie Twoja aplikacja.

  2. Nie należy mylić automatycznego i ręcznego sposobu uruchamiania Twoja aplikacja.

  3. Definiowanie modułów, kontrolerów, usług itp. przed ręcznym uruchamianie aplikacji zgodnie z powyższymi przykładami.

Bibliografia : http://www.dotnettricks.com/books/angularjs/interview

 27
Author: Nikhil Maheshwari,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-01 19:20:21

Bootstrapping jest odpowiednikiem inicjalizacji lub uruchamiania aplikacji Angular. Istnieją 2 główne sposoby, aby to zrobić.

Pierwszy jest automatycznie bootstrapping przez dodanie ng-app do elementu an w Twoim HTML, tak: 

<html ng-app="myApp">
...
</html>

Drugim byłoby bootstrap z JavaScript, jak tak, po utworzeniu aplikacji przez angular.module("myApp", []); 

angular.bootstrap(document, ['myApp']);
 52
Author: knrz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-30 12:42:50

Dodanie do odpowiedzi Dave 'a Swersky' ego (a ja jestem nowy w Angular więc popraw mnie jeśli się mylę):

Poniższy obrazek, zaczerpnięty z angularjs.org Bootstrap tutorial . To wyjaśnia, co powiedział Dave.

Tutaj wpisz opis obrazka

HTML, wewnątrz elementu z dyrektywą ng-app, jest kompilowany przez AngularJS. Na przykład: 

<body>
    <div> {{ 1 + 2 }} </div>
</body>

Renderowałby tak: 

{{ 1 + 2 }}

Jednak dodanie dyrektywy ng-app: 

<body ng-app="module">
    <div> {{ 1 + 2 }} </div>
</body>

Renderuje tak: 

3

To jest ponieważ ng-app "bootstraped" tag body i powiedział Angular, aby utworzyć "wewnętrzną reprezentację" zawartości. Wewnętrzna reprezentacja to oczywiście 3. Z samouczka:

"Jeśli zostanie znaleziona dyrektywa ng-app, to Angular skompiluje DOM traktując dyrektywę ng-app jako główny element kompilacji. To pozwala powiedzieć, że traktuje tylko część DOM jako kątowy podanie."

Angular ładuje również moduł związany z dyrektywa ng-app ("moduł" w samouczku Angular) i tworzy wtryskiwacz aplikacji (używany do wtrysku zależności).

 19
Author: Kevin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-07 23:44:42

Dyrektywa ng-app wskazuje, która część strony (całość lub część, do ciebie) jest głównym elementem aplikacji Angular. Angular odczytuje HTML wewnątrz tego katalogu głównego i kompiluje go do wewnętrznej reprezentacji. Ten odczyt i kompilacja jest procesem bootstrapping.

Ręczne bootstrapowanie polega na tym, że piszesz kod do uruchomienia procesu bootstrapowania zamiast używać dyrektywy ng-app.

 10
Author: Dave Swersky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-11 03:37:19

Angular Js Auto Bootstrap process

AngularInit() jest pierwszym Angular API wywołanym do automatycznego rozruchu za pomocą funkcji jqlite ready.

  1. ready() wywołane NA DOM ready
  2. angularInit () wywołane z ready ()
  3. Angular INIT wyodrębnia element ng-app z DOM przy użyciu elementu.querySelectorAll() jeden z następujących formatów - "ng:app", "ng-app", "x-ng-app", "data-ng-app" Ex. 
  <body ng-app=ngAppDemo>
      <div ng-controller="ngAppDemoController" >
          I can add: {{a}} + {{b}} =  {{ a+b }}         </div>
  </body>

ng-app="ngAppDemo" will be extracted.
  1. używanie wyrażenia regularnego moduł jest wyodrębniony, np. module = "ngAppDemo"
  2. wreszcie bootstrap(..) wywołanie, które tworzą globalny wtryskiwacz i rootscope oraz pasek rozruchowy angular app.
 6
Author: YRathod,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-24 02:55:40

From the Angular NgModules page: 

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 { }

Na koniec @NgModule.właściwość bootstrap identyfikuje ten komponent jako komponent bootstrap. Gdy Angular uruchamia aplikację, umieszcza renderowanie HTML AppComponent w DOM, wewnątrz znaczników elementów indeksu.html.

Bootstrapping w main.ts

Uruchamiasz aplikację, uruchamiając AppModule w menu głównym.plik ts.

Angular oferuje różnorodne opcje bootstrappingu skierowane na wiele platform. Ta strona opisuje dwie opcje, obie kierowane do przeglądarki.

 1
Author: usefulBee,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-12 14:51:01