出發點

這篇要介紹的是Angular 應用程式完整的啟動流程

Single Page Application

Angular是一個SPA(Single Page Application)的框架，整個網站都只有一個頁面，透過渲染上面的內容，來去達到頁面切換的效果，以下是他的一些優缺點分析

優點

• UI/UX體驗提升，在首次loading時會把所有資源都下載回來，之後用戶在操作頁面時只需要將資源渲染到位置上而不需要整個頁面重新刷新，這大大提升了體驗
• 跨平台開發，可以使用同一套source code去達到不同平台上的開發，提升開發效率
• 前後端分離，將前後端的工作區分開，因此可以各自獨立開發，提升團隊開發效率

缺點

• 首次加載頁面等待時間比較久，因為第一次就把所有資源load回來
• SEO優化困難，SPA是透過JavaScript去動態渲染內容，這導致搜尋引擎不好爬取到索引內容，可以透過SSR(Server Side Render)來處理，但應用程式就會變比較複雜

初始頁面

透過Angular.json的設定，可以告訴Angular在執行應用程式時要從哪個檔案開始讀取

因此在進入頁面時會先到index.html，可以看到HTML中的body只有一段 <app-root></app-root> 這就是網站的根目錄，所有的頁面都會以root為分支發散出去，就像是一個樹狀結構，之後介紹的Router就是用來規劃DOM樹要怎麼長

再來還有一個main.ts檔，這個是用來告訴Angular我們要從哪個模組開始啟動

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

bootstrapModule提供了出發點，也是從AppModule出發，接下來就到了App component這個層級，屬於元件本身的生命週期

下篇繼續