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 应用程序的命令之一。 它将用于创建新的应用程序。 它将询问一些基本问题以创建新的应用程序。 让应用程序选择默认选项就足够了。 对于下面提到的路由问题，请指定No。 我们将在稍后的路由章节中了解如何创建路由。

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 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 服务器 将启动开发 Web 服务器并在端口 4200 下为应用程序提供服务。

让我们启动浏览器并打开 http://localhost:4200。 浏览器将显示该应用程序，如下所示 −

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

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

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

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