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?
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:
Załadować moduł związany z dyrektywą.
Utwórz wtryskiwacz aplikacji.
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:
Nie należy używać dyrektywy ng-app, gdy ręczne uruchamianie Twoja aplikacja.
Nie należy mylić automatycznego i ręcznego sposobu uruchamiania Twoja aplikacja.
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
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']);
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.
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).
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
.
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.
- ready() wywołane NA DOM ready
- angularInit () wywołane z ready ()
- 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.
- używanie wyrażenia regularnego moduł jest wyodrębniony, np. module = "ngAppDemo"
- wreszcie bootstrap(..) wywołanie, które tworzą globalny wtryskiwacz i rootscope oraz pasek rozruchowy angular app.
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.
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