Angular - 第一个应用程序

让我们创建一个简单的 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://127.0.0.1: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://127.0.0.1:4200/ ** 
i wdm: Compiled successfully.

这里，serve 是用于使用本地开发 Web 服务器编译和运行 Angular 应用程序的子命令。ng server 将启动一个开发 Web 服务器，并在端口 4200 下提供应用程序。

让我们启动浏览器并打开 https://127.0.0.1:4200。浏览器将显示如下所示的应用程序：

让我们更改应用程序的标题以更好地反映我们的应用程序。打开src/app/app.component.ts 并更改如下所示的代码：

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

我们的最终应用程序将在浏览器中呈现，如下所示：

我们将在接下来的章节中更改应用程序并学习如何编写 Angular 应用程序。

打印页面