Angular8 应用程序
让我们创建一个简单的angular应用，分析一下基本angu的结构lar 应用程序。
让我们使用以下命令检查系统中是否安装了 Angular Framework 以及安装的 Angular 版本-
这里，
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 应用程序。
让我们进入我们新创建的应用程序文件夹。
让我们检查一下应用程序的部分结构。应用程序的结构如下-
| 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 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://localhost:4200/ **
i wdm: Compiled successfully.
此处，
serve 是用于使用本地开发 Web 服务器编译和运行 Angular 应用程序的子命令。
ng server 将启动一个开发 Web 服务器并在端口 4200 下为应用程序提供服务。
让我们启动浏览器并打开 http://localhost:4200。浏览器将显示如下所示的应用程序-
让我们更改应用程序的标题以更好地反映我们的应用程序。打开
src/app/app.component.ts 并更改如下指定的代码-
export class AppComponent {
title = 'Expense Manager';
}
我们的最终应用程序将在浏览器中呈现，如下所示-
我们将在接下来的章节中更改应用程序并学习如何编写 Angular 应用程序。
