如何运行 Angular 项目 [分步说明]
已发表: 2020-09-21AngularJS 是任何全栈开发人员的必备工具。 它对于前端开发至关重要，因为它简化了 HTML 指令的使用。 使用 Angular 开发 Web 应用程序变得更加容易。 因此，在本文中，我们将讨论如何开始使用 Angular。 我们将讨论如何安装 Angular 以及如何运行 Angular 项目。
目录
Angular CLI：简介
如果你想处理 Angular 项目，你应该有 Angular CLI。 它是 Angular 的官方工具，用于处理 Angular 项目并对其进行初始化。 Angular CLI 减少了初始化过程中的许多麻烦。 如果您使用 Angular CLI，则不必执行多个配置和构建工具来启动项目。
Angular CLI 允许你只用一个命令来启动一个项目。 使用另一个命令，您可以使用本地开发服务器为项目提供服务。 Angular CLI 适用于 Node.js。 因此，要在您的系统上运行 Angular CLI，您应该首先在系统中安装 Node.js。
Node.js 用于服务器和开发服务器端应用程序，而 Angular 是前端解决方案。 Node.js 仅帮助您使用 Angular CLI。
如何安装角？
第一步
在你的系统中安装 Angular 之前，你的系统中应该有 Node 和 npm。 您可以使用 Node Version Manager 安装它，也可以使用您操作系统的官方包管理器。 您还可以选择从其网站安装 Node。 我们建议从网站安装它，因为它既快速又简单。 你只需要前往node.js 的下载页面。
第二步
进入 node.js 的下载页面后，根据您的操作系统选择您需要的版本，然后按照安装向导中指定的步骤进行操作。 如果您之前已经在系统中安装了 node.js，则可以跳过这一步（和上一步）。
第三步：
要检查您的设备中是否安装了 Node，请打开命令提示符并运行以下命令：
$节点-v
它将显示系统中当前安装的 Node 版本。
第三步
检查您的系统中是否安装了 Node 后，您可以通过运行命令提示符的以下命令在您的设备中安装 Angular：
$ npm install @angular/cli
运行上述命令后，Angular CLI 将安装在您的设备中。 您已经完成了“如何安装 Angular”部分。
学习：印度的 Angular 开发人员薪水：适合新手和有经验的人
如何运行 Angular 项目？
由于我们已经在我们的系统中安装了 Angular，我们现在将专注于启动一个新项目。
第一步
我们将通过运行以下命令创建一个工作区和启动应用程序：
ng new angular-tour-of-heres
我们添加了 angular-tour-of-heroes 作为我们工作区的名称。 “ng new”命令将提示您要在入门应用程序中添加的功能。 由于这是一个教程，我们将选择默认值并按 Return 或 Enter 继续。
第二步
现在，Angular CLI 已经安装了所需的 npm 包和依赖项。 您已经准备好使用“欢迎应用程序”和一个新的工作区。 您还将有一个与应用程序同名的根文件夹（angular-tour-of-heroes）和一个骨架应用程序项目。
在这一步中，我们必须为应用程序提供服务。 我们将通过前往工作区目录并启动应用程序来做到这一点：
cd 英雄之旅
ng服务-打开
'ng serve' 命令将创建应用程序、启动开发服务器、查看项目的源文件，并在修改必要文件时重新构建应用程序。
第三步
如果要修改应用程序，则必须前往 IDE 或编辑器中的 src/app 文件夹。 我们将通过更改此项目的组件来编辑我们的应用程序。 组件是 Angular 应用程序的构建块。 它们处理 Angular 项目的几乎所有基本功能，例如显示数据、响应输入等。
在这一步中，打开您的 IDE 并前往项目目录并找到您的项目的组件文件：
- app.component.ts
- app.component.html
- app.component.css
第一个文件是基于 TypeScript 的类代码，第二个文件是 HTML 中的模板，最后一个具有私有 CSS 样式。
第四步
我们的项目已经建立，所有文件都准备好了。 在这一步中，我们将通过为其添加标题来对其进行个性化设置。 要更改您的 Angular 项目标题，请转到 app.component.ts 文件并删除存在的默认模板。 Angular CLI 会自动生成一个生成模板。 您可以将其替换为以下内容：
<h1>{{你的标题}}</h1>
花括号是插值绑定语法。 您可以将“您的标题”替换为您想要的标题。 输入所需的标题后，刷新浏览器，您的应用程序将具有新标题。
第五步
如果没有任何样式，应用程序的个性化将是不完整的。 因此，在这一步中，我们将修改 Angular 应用程序的样式。 当你创建一个新项目时，Angular CLI 会为你的应用程序生成一个空的 styles.css。 您可以在此处输入您想要的样式。
在 IDE 中打开 src/styles.css 文件并开始修改应用程序的样式。 修改应用程序的样式并保存更改。 刷新浏览器时，您会在应用中看到更改。
结帐：如何在 Angular JS 中实现分页？
了解有关 Angular 和全栈开发的更多信息
现在您知道了如何在系统中安装 Angular 以及如何运行 Angular 项目。 一旦你掌握了它的窍门，你就会发现使用 Angular 比你想象的要容易得多。 有了一点经验，您就可以开始使用 Angular 进行前端 Web 开发项目。
如果您有兴趣了解有关 Angular 和前端 Web 开发的更多信息，那么这里有一些额外的资源：
- 前端开发人员简历指南
- 成为前端开发人员的 10 大技能
- 前端项目思路
另一方面，您可以参加全栈开发课程，并通过视频、项目和测验向行业专家学习。
如果您有兴趣了解有关全栈软件开发的更多信息，请查看 upGrad 和 IIIT-B 的全栈软件开发 PG 文凭，该文凭专为在职专业人士设计，提供 500 多个小时的严格培训、9 个以上的项目和作业, IIIT-B 校友身份，实用的实践顶点项目和顶级公司的工作协助。