Angular Hello World 计划

先决条件：

建立开发环境

在我们开始之前，我们必须设置我们的环境。

• 如果它们不在你的计算机上，请安装 Node.js 和 npm 。

  通过在终端/控制台窗口中运行 node -v 和 npm -v，验证你是否至少运行节点 6.9.x 和 npm 3.xx。较旧的版本会产生错误，但较新的版本会很好。

• 使用 npm install -g @angular/cli 全局安装 Angular CLI 。

第 1 步：创建一个新项目

打开终端窗口（或 Windows 中的 Node.js 命令提示符）。

我们使用以下命令创建一个新项目和框架应用程序：

ng new my-app

这里的 ng 适用于 Angular。我们得到一个像这样的文件结构。

https://i.stack.imgur.com/0crAT.jpg

https://i.stack.imgur.com/zEtsK.jpg

有很多文件。我们现在不必担心所有这些问题。

第 2 步：提供应用程序

我们使用以下命令启动应用程序：

ng serve

我们可以使用标志 -open（或简称 -o），它将自动在 http://localhost:4200/上打开我们的浏览器

ng serve --open

导航浏览器到地址 http://localhost:4200/。它看起来像这样：

https://i.stack.imgur.com/Ssupw.jpg

第 3 步：编辑我们的第一个 Angular 组件

CLI 为我们创建了默认的 Angular 组件。这是根组件，它名为 app-root。人们可以在 ./src/app/app.component.ts 找到它。

打开组件文件并将标题属性从 Welcome to app!! 更改为 Hello World。浏览器会自动使用修订后的标题重新加载。

原始代码：注意 title = 'app';

https://i.stack.imgur.com/fVVWw.jpg

修改后的代码：改变了 title 的值。

https://i.stack.imgur.com/ycTba.jpg

同样，./src/app/app.component.html 也有变化。

原始 HTML

https://i.stack.imgur.com/gwEFE.jpg

修改过的 HTML

https://i.stack.imgur.com/Sgpwj.jpg

请注意，将显示 ./src/app/app.component.ts 中 title 的值。完成更改后，浏览器会自动重新加载。它看起来像这样。

https://i.stack.imgur.com/4MWP9.jpg

为了找到更多的话题，请访问此链接这里 。