Angular 8 创建第一个应用程序
让我们创建一个简单的 Angular 应用程序并分析基本 Angular 应用程序的结构。
让我们使用以下命令检查我们的系统中是否安装了 Angular 框架以及安装的 Angular 版本的版本：
ng --version
Here,
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 应用程序来检查我们的日常开支。让我们给 费用经理 作为我们新应用程序的选择。使用以下命令创建新应用程序。
cd /path/to/workspace ng new expense-manager
Here,
new 是的命令之一 ng CLI 应用程序。它将用于创建新应用程序。它将询问一些基本问题以创建新应用程序。让应用程序选择默认选项就足够了。关于下面提到的路由问题，请指定 No .我们将在后面看到如何创建路由 Routing chapter.
Would you like to add Angular routing? No
基本问题得到解答后， ng CLI 应用程序在下创建一个新的 Angular 应用程序 费用经理 folder.
让我们进入我们新创建的应用程序文件夹。
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
Here,
-
我们只展示了应用程序中最重要的文件和文件夹。
-
favicon.ico and assets 是应用程序的图标和应用程序的根资产文件夹。
-
polyfills.ts 包含对浏览器兼容性有用的标准代码。
-
环境 文件夹将包含应用程序的设置。它包括生产和开发设置。
-
main.ts 文件包含启动代码。
-
索引.html 是基于应用程序的 HTML 代码。
-
样式.css 是基本的 CSS 代码。
-
应用程序文件夹 包含 Angular 应用程序代码，将在接下来的章节中详细学习。
让我们使用以下命令启动应用程序：
ng serve
10% building 3/3 modules 0 activei wds: Project is running at http:// localhost: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 http:// 本地主机：4200/ **
i wdm: Compiled successfully.
Here, serve 是用于使用本地开发 Web 服务器编译和运行 Angular 应用程序的子命令。 服务器 将启动一个开发 Web 服务器并在端口 4200 下为应用程序提供服务。
让我们启动浏览器并打开 http://localhost:4200。浏览器将显示应用程序，如下图所示：
让我们更改应用程序的标题以更好地反映我们的应用程序。打开 src/app/app.component.ts 并将代码更改如下：
export class AppComponent {
title = 'Expense Manager';
}
我们最终的应用程序将在浏览器中呈现如下所示：
在接下来的章节中，我们将更改应用程序并学习如何编写 Angular 应用程序。