Angular 8 - 建立第一個應用程式

讓我們建立一個簡單的 Angular 應用程式並分析基本 Angular 應用程式的結構。

讓我們使用以下命令檢查 Angular 框架是否安裝在我們的系統中以及已安裝 Angular 版本的版本：

ng --version

這裡：

ng 是用於建立、管理和執行 Angular 應用程式的 CLI 應用程式。它是用 JavaScript 編寫的，並在 NodeJS 環境中執行。

結果將顯示如下所示的 Angular 版本詳細資訊：

Angular CLI: 8.3.26 
Node: 14.2.0 
OS: win32 x64 
Angular: ... 
Package                    Version 
------------------------------------------------------
@angular-devkit/architect  0.803.26 
@angular-devkit/core       8.3.26 
@angular-devkit/schematics 8.3.26 
@schematics/angular        8.3.26 
@schematics/update         0.803.26 
rxjs                       6.4.0

因此，Angular 已安裝在我們的系統中，版本為 8.3.26。

讓我們建立一個 Angular 應用程式來檢查我們日常的支出。讓我們將 ExpenseManager 作為我們新應用程式的選擇。使用以下命令建立新應用程式：

cd /path/to/workspace 
ng new expense-manager

這裡：

new 是 ng CLI 應用程式的一個命令。它將用於建立新應用程式。為了建立新應用程式，它會提出一些基本問題。讓應用程式選擇預設選項就足夠了。關於如下所述的路由問題，請指定否。我們將在後面的路由章節中學習如何建立路由。

Would you like to add Angular routing? No

回答完基本問題後，ng CLI 應用程式將在 expense-manager 資料夾下建立一個新的 Angular 應用程式。

讓我們進入我們新建立的應用程式資料夾。

cd expense-manager

讓我們檢查應用程式的部分結構。應用程式的結構如下：

| favicon.ico 
| index.html 
| main.ts 
| polyfills.ts 
| styles.css 
| 
+---app 
|  app.component.css 
|  app.component.html 
|  app.component.spec.ts 
|  app.component.ts 
|  app.module.ts 
| 
+---assets 
|  .gitkeep 
| 
+---environments 
   environment.prod.ts 
   environment.ts

這裡：

我們只展示了應用程式中最重要的檔案和資料夾。
favicon.ico 和 assets 分別是應用程式的圖示和應用程式的根資產資料夾。
polyfills.ts 包含對瀏覽器相容性有用的標準程式碼。
environments 資料夾將包含應用程式的設定。它包括生產和開發設定。
main.ts 檔案包含啟動程式碼。
index.html 是應用程式的基本 HTML 程式碼。
styles.css 是基本 CSS 程式碼。
app 資料夾 包含 Angular 應用程式程式碼，我們將在接下來的章節中詳細學習。

讓我們使用以下命令啟動應用程式：

ng serve
10% building 3/3 modules 0 activei wds: Project is running at https://:4200/webpack-dev-server/
i wds: webpack output is served from /

i wds: 404s will fallback to //index.html 
chunk {main} main.js, main.js.map (main) 49.2 kB [initial] [rendered] 
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 269 kB [initial] [rendered] 
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered] 
chunk {styles} styles.js, styles.js.map (styles) 9.75 kB [initial] [rendered] 
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered] 
Date: 2020-05-26T05:02:14.134Z - Hash: 0dec2ff62a4247d58fe2 - Time: 12330ms 
** Angular Live Development Server is listening on localhost:4200, open your 
browser on https://:4200/ ** 
i wdm: Compiled successfully.

這裡，serve 是用於使用本地開發 Web 伺服器編譯和執行 Angular 應用程式的子命令。ng server 將啟動一個開發 Web 伺服器，並在埠 4200 下提供應用程式。

讓我們啟動瀏覽器並開啟 https://:4200。瀏覽器將顯示如下所示的應用程式：

讓我們更改應用程式的標題以更好地反映我們的應用程式。開啟 src/app/app.component.ts 並更改程式碼如下：

export class AppComponent { 
   title = 'Expense Manager'; 
}

我們的最終應用程式將在瀏覽器中呈現如下：

我們將在接下來的章節中更改應用程式並學習如何編寫 Angular 應用程式。

列印頁面