Java 开发人员的 Angular 入门指南② – 关于启动 Angular 的步骤说明

8 月 ago

清, 宇

2 minutes

你好！

我是技术咨询团队的古坚。

这篇文章是关于Java开发者的Angular入门系列文章的第二篇。

本文的目標

在这篇文章中，我们将说明从下载 Angular 示例到运行的流程。

这是上一篇文章。 (Zhè shì yī .)

下载 Angular 的示例

您可以从以下页面下载。

请参阅下面的文章以获取有关样本构成等详细信息。

解压Zip文件

下载后，可以获取名为”IgniteUI_Angular_Application_Template_Master_JP.zip”的文件。

解压文件后，将出现以下的文件夹结构。

IgniteUI_Angular_Application_Template_Master_JP
 └─igniteui-angular-application-template-master

① 使用npm安装必需的库/安装Java的Meven或Gradle等同的库

首先，让我们移动到已解压的以下文件夹 igniteui-angular-application-template-master。

cd igniteui-angular-application-template-master

请执行下面的 npm 命令。
（如果尚未安装 npm，请参考“尚未安装 npm”）

根据包含依赖关系的 package.json，从节点包管理中获取 Angular 应用所需的库。

npm install

当执行上述命令后，所需的库会被存储在node_modules文件夹中。

关于库的依赖管理

在 Angular 中，我们使用配置文件 package.json 来管理所需库的依赖关系。

在Java中，如果使用Maven，对应的配置文件是pom.xml；如果使用Gradle，则是build.gradle。

下面是package.json文件的一部分内容摘录。dependencies中列出了所依赖的库的名称。


{
  "name": "app-template",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build-serve": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.4",
    "@angular/common": "~11.0.4",
    "@angular/compiler": "~11.0.4",
    "@angular/core": "~11.0.4",
    "@angular/forms": "~11.0.4",
    "@angular/platform-browser": "~11.0.4",
    "@angular/platform-browser-dynamic": "~11.0.4",
    "@angular/router": "~11.0.4",
    "@types/hammerjs": "^2.0.36",
    "angular-in-memory-web-api": "^0.9.0",
    "hammerjs": "^2.0.8",
    "igniteui-angular": "^11.0.8",
    "igniteui-angular-charts": "^11.1.0",
    "igniteui-angular-core": "^11.1.0",
    "igniteui-angular-i18n": "^11.0.0",
    "jszip": "^3.1.5",
    "minireset.css": "~0.0.4",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "~6.6.3",
    "tslib": "^2.0.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },

如果未安装npm的话

如果还没有安装npm，请参考以下页面进行安装。

使用ng serve来启动Angular项目，与Java中启动Tomcat或GlassFish相同。

你可以使用以下命令来运行应用程序。

ng serve

当命令执行完成后，将会启动默认的浏览器并访问以下 URL。

解释 ng serve 命令

ng serve命令用于启动Web服务器并部署必要的资源文件。

请以Java为例，将其比作Tomcat或GlassFish的启动和资源配置所需的相似命令。

③（参考）ng build / 打包 / 将 Java 转为 jar 或 war 文件等效操作

最后，我会介绍一下 `ng build` 命令。

这个命令在代码开发过程中并不常用，但它可以将Angular应用程序运行所需的所有文件打包。


ng build

用中文来解释的话，可以说类似于Java中的”java -jar”命令。

在将其部署到Web服务器上之前，这将成为必需的步骤，因此在代码开发时，您可能不需要太在意，但在运营阶段之后，这是一条重要的命令，所以我认为即使将其放在头脑的一角也是不错的。

(附加) 关于Angular的内存中 Web API（在开发时有用的机制）

在这个 Angular 的示例中，已经采用了一个机制，即 Angular 内存 Web API。特别是在后端的 Web API 还没有准备好的开发阶段，这个机制非常有用。

使用这个机制，可以在内存中管理数据，就像是与 Web API 进行通信一样，这就是后端模拟化。

以下是参考文件。

以下是参考文档。

以下，参考文件。

以下为参考文件。

完成 Web API 后，请替换为内存 Web API。

为了实现这个目标，本系列课程将结合Angular和Java进行操作，最终将用Java创建的后端Web API替换成与内存Web API进行通信。

关于这一步骤，我们下次将结合Java示例进行介绍。

总结

您好，您已经成功启动了样品吗？

下一篇文章中，我想要介绍一下将本文中稍微提及的In-Memory Web API替换为Java的WebAPI，并展示其实际运行情况。

要使用Ignite UI for Angular的试用版

在 Infragistics，我们开发了一个强大的UI组件库Ignite UI，它包含丰富的组件，可以帮助您更快速地构建数据丰富且具有响应性的Web应用程序。我们还发布了适用于Angular的Ignite UI for Angular版本。

只需要一个选项：Ignite UI for Angular可以以试用版进行尝试。

请在此页面创建账户以进行有关产品的技术咨询。注册后30天内，您可以轻松享受到我们公司的技术支持，请随时与我们联系。

此外，如有购买产品的考虑，请通过此页面进行。

请把所有与开发有关的咨询交给我们吧！

在InfraSistix Japan，我们提供各种开发平台的技术培训、咨询服务以及全面的开发支持。

我们需要摆脱过时的技术和已停止支持的平台，但对于迁移到新的平台和框架的考虑进展缓慢，缺乏相关知识。

想要采用新的开发技术，但是我们公司内没有专家。而且，日语资源也很少，对是否能进行开发感到担心。

我想用自己公司的团队来进行开发，但由于过去一直依赖外部供应商来进行开发阶段，导致对工具和技术的了解不足。

我想要重新设计用户界面。我不知道如何进行相关的UI设计和UI/UX研究。我担心如果请外部设计公司，开发会变得更加困难。

我很乐意听取您的咨询。

请随时通过这里向我们咨询您的问题。

请使用技术支持和免费在线咨询服务。

由于Infragistics的UI产品具有多种功能，因此文档中的信息量也很大，有时候您可能无法找到您寻找的信息。在这种情况下，我们建议您随时预约技术支持或产品实施支持团队进行免费的在线咨询会议，以节省验证时间。请务必充分利用这一服务。

确认与技术支持部门联系的方式
预约免费在线咨询会议