각도 응용 프로그램 시작 방법

뚜껑 아래에는 Angular CLIWebpack 모듈 번들이 사용됩니다.Webpack은 프로젝트 코드와 자산을 JavaScript 패키지로 변환합니다.이러한 번들은 어플리케이션의 모든 코드와 타사 코드(예: Angular 및 사용 가능한 다른 라이브러리)를 포함합니다

ng build --prod를 사용하여 각도 프로그램을 구축할 때 dist/<application_name>에서 파일을 생성합니다:

├── 3rdpartylicenses.txt
├── favicon.ico
├── index.html
├── main.1feaffbe857aaf7ee0db.js
├── polyfills.a4021de53358bb0fec14.js
├── runtime.e227d1a0e31cbccbf8ec.js
└── styles.09e2c710755c8867a460.css

The seemingly random strings after the bundle names are hashes, added there
for cache busting. That is, to ensure that Web browser use the updated content
and not a version that they stored locally before. Normally, if your content
does not change, then the strings will remain the same even if you build
multiple times.

우리는 이미 index.html문건을 토론했다.JavaScript 파일:

• main.js: 귀하의 신청 코드와 가져온 모든 내용
• vendor.js: 어플리케이션에 의존하는 타사 코드
• polyfills.js: 이전 환경에서 새로운 기능의 다각형 채우기를 허용합니다(예를 들어 오래된 웹 브라우저에서 Angular 사용)
• runtime.js: 실행 시 코드를 로드하는 데 사용되는 Webpack 유틸리티 코드

이 자바스크립트 패키지는 Webpack에서 생성되었고 <script> 태그로 index.html 파일에 추가되었습니다. 앞에서 보듯이

주의, lazy-loading Angular modules 등의 기능을 사용하면 다른 패키지가 있을 수 있습니다

이 스크립트 태그는 index.html 파일의 일부이기 때문에 웹 브라우저에서도 불러옵니다.그러나 이 데이터를 불러오는 것은 일을 일으키기에는 부족하다.프로그램을 시작하려면 코드를 실행해야 합니다.다음은

마스터 엔트리 포인트 실행

main가방은 이곳에서 흥미를 느끼는 가방입니다.앞에서 언급한 바와 같이 각도 응용 프로그램의 코드를 포함합니다

이 패키지는 실제적으로 우리의 전체 응용 프로그램 코드를 포함합니다.그런데 어느 부분을 수행해야 하나요?이것은 angular.json 파일에서 설정된 것입니다:

위 코드 세그먼트(19행)의 main 속성은 실행 중 주 자바스크립트 패키지를 불러온 후 모듈을 즉시 불러오고 실행해야 함을 결정합니다

위에서 보듯이 기본적으로 main.ts 모듈입니다.이러한 구성으로 인해 Angular CLI는 Webpack에서 해당 모듈을 로드하고 패키지를 로드한 후 가능한 빨리

현재 main.ts 파일이 각도 응용 프로그램의 입구점인 것을 알고 있습니다. 이 왜 파일을 불러오는지 &집행하다.이제 기능을 살펴보겠습니다

우선 import 문장이 있습니다.컴파일러가 코드를 JavaScript 코드로 변환하면 이러한 코드는 유지됩니다.이러한 가져오기는 런타임 시 Webpack에서 처리됩니다.가져오기가 되면 나머지 코드가

둘째, 프로젝트가 생산을 위해 건설된 경우production mode of Angular가 활성화됩니다.이것은 성능에 매우 중요합니다

마지막이자 가장 중요한 것은 다음 줄로 실행됩니다:

platformBrowserDynamic().bootstrapModule(AppModule);

이것은 선이지만, 확실히 매우 많다.platformBrowserDynamic는 웹 브라우저 환경에서 Angular를 로드할 수 있는 모듈입니다.이것은 프레임의 필요한 요소를 불러오고 필요한 내용을 설정합니다.Angular가 다른 환경에서 실행할 수 있음을 감안하여(예를 들어 이동, 서버 쪽 등) Angular를 불러올 수 있는 다른 방법이 있음을 주의하십시오

그래서, 첫 번째 부분, platformBrowserDynamic() 적재 각도.완료되면 두 번째 섹션bootstrapModule(...)에 지정된 모듈을 안내하도록 Angular를 지정합니다.기본적으로 모든 각도 응용 프로그램은 하나 이상AppModule

이 때, Angular는 구성 요소, 서비스, 명령, 파이프, 그리고 AppModule 가져올 수 있는 다른 내용을 연결합니다. 한 마디로 하면 app-root 선택기와 일치하는 구성 요소를 찾을 것입니다.일반적으로 구성 요소는 AppComponent: