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应用程序将在费用管理器文件夹下创建一个新的 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和asset是应用程序的图标和应用程序的根资源文件夹。

  • polyfills.ts包含对浏览器兼容性有用的标准代码。

  • 环境文件夹将包含应用程序的设置。它包括生产和开发设置。

  • 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 应用程序。