Angular JS에서 Bootstrapping은 무엇을 의미합니까?
저는 Angular JS의 초보자입니다. 아래 링크를 통과했습니다. http://docs.angularjs.org/tutorial/step_00
부트 스트랩 파일이란 무엇입니까? 그들은 어디에 있습니까?
부트 스트랩의 자동 부팅 및 수동 초기화 란 무엇입니까? http://docs.angularjs.org/guide/bootstrap 링크에서 아래와 같이 수동 초기화의 단점을 읽었습니다.
누구든지 여기서 단점이 무엇인지 정확히 설명 할 수 있습니까?
위의 모든 사람들이 완벽하게 대답했고 내가 찾고 있던 것을 찾았지만 여전히 작동하는 예제가 누락 된 것 같습니다.
아래 예제에서 AngularJS의 자동 / 수동 부트 스트랩에 대해 이해하면 많은 도움이 될 수 있습니다.
AngularJS : 자동 부트 스트랩 :
Angular는 DOMContentLoaded 이벤트 또는 angular.js 스크립트가 브라우저에 다운로드되고 document.readyState가 완료로 설정 될 때 자동으로 초기화 / 부트 스트랩합니다. 이 시점에서 AngularJS는 ng-app 지시문을 찾습니다. ng-app 지시문이 발견되면 Angular는 다음을 수행합니다.
지시문과 관련된 모듈을로드합니다.
애플리케이션 인젝터를 만듭니다.
ng-app 루트 요소에서 시작하는 DOM을 컴파일합니다.
이 프로세스를 자동 부트 스트랩이라고합니다.
<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-수동 부트 스트랩 :
angular.bootstrap () 함수를 사용하여 각도 앱을 수동으로 초기화 할 수 있습니다. 이 함수는 모듈을 매개 변수로 사용하며 angular.element (document) .ready () 함수 내에서 호출되어야합니다. angular.element (document) .ready () 함수는 DOM이 조작 할 준비가되면 시작됩니다.
<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/
노트 :
앱을 수동으로 부트 스트랩 할 때 ng-app 지시문을 사용해서는 안됩니다.
앱을 부트 스트랩하는 자동 및 수동 방식을 혼동해서는 안됩니다.
위의 예에 정의 된대로 앱을 수동으로 부트 스트랩하기 전에 모듈, 컨트롤러, 서비스 등을 정의하십시오.
참조 : http://www.dotnettricks.com/books/angularjs/interview
부트 스트랩은 Angular 앱을 초기화하거나 시작하는 것과 같습니다. 이를 수행하는 두 가지 주요 방법이 있습니다.
첫 번째는 ng-app다음과 같이 HTML의 요소에 추가 하여 자동으로 부트 스트랩하는 것입니다.
<html ng-app="myApp">
...
</html>
두 번째는 다음을 통해 앱을 만든 후 JavaScript에서 부트 스트랩하는 것입니다. angular.module("myApp", []);
angular.bootstrap(document, ['myApp']);
Dave Swersky의 답변에 추가 (나는 Angular를 처음 사용하므로 틀린 경우 수정하십시오) :
angularjs.org 부트 스트랩 가이드 에서 가져온 다음 이미지 입니다. Dave가 말한 내용을 설명합니다.
ng-app 지시문이있는 요소 내부의 HTML은 AngularJS에 의해 컴파일됩니다. 예를 들면 :
<body>
<div> {{ 1 + 2 }} </div>
</body>
다음과 같이 렌더링됩니다.
{{ 1 + 2 }}
그러나 ng-app 지시문을 추가합니다.
<body ng-app="module">
<div> {{ 1 + 2 }} </div>
</body>
다음과 같이 렌더링합니다.
3
이것은 ng-app이 body 태그를 "부트 스트랩"하고 Angular에게 콘텐츠의 "내부 표현"을 생성하도록 지시했기 때문입니다. 물론 내부 표현은 3. 튜토리얼에서 :
"If the ng-app directive is found then Angular will compile the DOM treating the ng-app directive as the root of the compilation. This allows you to tell it to treat only a portion of the DOM as an Angular application."
Angular also loads the module associated with the ng-app directive ("module" in the Angular tutorial) and creates an application injector (used for dependency injection).
The ng-app directive indicates which part of the page (all or part, up to you) is the root of the Angular application. Angular reads the HTML within that root and compiles it into an internal representation. This reading and compiling is the bootstrapping process.
Manual bootstrapping is when you write code to execute the bootstrapping process instead of using the ng-app directive.
Angular JS Auto bootstrap process
AngularInit() is the first Angular api called for auto boot strapping via jqLite ready function.
- ready() called on DOM ready
- angularInit() called from ready()
- Angular Init extract ng-app element from DOM using element.querySelectorAll() one of the following format - '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.
- Using regular expression module is extracted, ex. module = "ngAppDemo"
- finally bootstrap(..) getting called, which create global injector & rootscope and boot strap the angular app.
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 { }
Lastly, the @NgModule.bootstrap property identifies this AppComponent as the bootstrap component. When Angular launches the app, it places the HTML rendering of AppComponent in the DOM, inside the element tags of the index.html.
Bootstrapping in main.ts
You launch the application by bootstrapping the AppModule in the main.ts file.
Angular offers a variety of bootstrapping options targeting multiple platforms. This page describes two options, both targeting the browser.
In angular initialize/ Bootstrap is done in 2 ways.
Let me explain, when and where to use manual and auto bootstrap to use.
Manual bootstrap:
Suppose you have to load some data or have to bind some template using server side request, but what if angular application gets initialized automatically before that operation is completed?
Can’t we manually initialize our application depending upon the success and failure of result? Yes we can do that. So the solution to the above problem is
예를 들어, Worklight Server를 사용하고 있습니다. Worklight 서버가 초기화 된 직후에 초기화 / 부트 스트랩하려고합니다. 여기서 수동 부트 스트랩을 수행합니다. 수동 초기화는 각도 응용 프로그램 부트 스트랩 전에 특정 작업을 수행하고 페이지를 컴파일하려는 경우에 유용합니다.
angular.element(document).ready(function ()
{
angular.bootstrap(document, ['myApp']);
});
위 코드는 worlight가 초기화 된 후 main.js 파일에 작성됩니다.
자동 부트 스트랩 :
Angular는 DOMContentLoaded시 또는 angular.js 스크립트가 브라우저에 다운로드 될 때 자동으로 초기화 / 부트 스트랩 한 다음 ng-app을 찾습니다. 발견되면 해당 ng-app 지시문과 관련된 모듈을로드합니다.
참고 URL : https://stackoverflow.com/questions/21058213/what-is-meant-by-bootstrapping-in-angular-js
'IT Share you' 카테고리의 다른 글
| Youtube 비디오를 부트 스트랩 3.0 페이지에 올바르게 포함 (0) | 2020.12.07 |
|---|---|
| Windows XP에 JDK8 설치-advapi32.dll 오류 (0) | 2020.12.07 |
| 흥미로운 인터뷰 운동 결과 : 리턴, 포스트 증가 및 참조 동작 (0) | 2020.12.07 |
| Python Django Rest Framework 순서가 지정되지 않은 ObjectListWarning (0) | 2020.12.07 |
| HashSet은 삽입 순서를 유지합니까? (0) | 2020.12.07 |