在Angular应用程序中显示第一个HelloWorld的过程

让我们使用Angular

您好。我今天想要制作一个Angular应用程序的第一个HelloWorld。最终目标是将Angular作为前端应用程序，并使用Ruby或其他语言创建api应用程序，以实现可扩展且现代化的Web应用程序。本次将使用Angular和AngularCLI，从安装开始，实际在浏览器中显示HelloWorld。我参考的URL是官方提供的文档。为了深入掌握Angular，我们还需要了解TypeScript的知识。让我们一起学习吧~。

本地环境

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.14.5
BuildVersion:   18F132

实施

好像要使用最新版本的Angular，需要Node的版本在10.9.0或以上。

$ nodebrew use 10.9.0
use v10.9.0

$ node -v
v10.9.0

$ npm -v
6.1.0

步骤1：安装Angular CLI。

$ npm install -g @angular/cli

创建一个应用程序

创建工作空间和初始应用程序。在这里，您将被程序问到一些问题，您可以按下回车键。一旦在这里，您的应用程序的骨架已经完成，您可以使用（类似于Rails的）ng命令启动应用程序。

$ cd my-app
$ ng serve --open  --port 3005

这样做后，将自动生成一个视图。由于本次目标是在浏览器上显示HelloWorld，因此需要稍微修改一下文件。将/my-app/src/app/app.component.html文件按照下面的方式更改，屏幕将自动变化。

<h1>Hello World</h1>

最后，请尝试使用Angular检查版本。

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.19
Node: 10.9.0
OS: darwin x64
Angular: 8.2.14

下一步，我打算使用API模式在rails（或其他编程语言）上进行开发，以完成一个可扩展且现代化的开发环境。

参考文件

设置本地环境和工作空间