Rocky Linux 8 安装 AngularJS

AngularJS 是一个免费的开源前端 Web 框架,用于开发单页应用程序。 它基于 JavaScript,由 Google 以及个人和公司社区维护。 它是完全可扩展的,可用于跟踪所有组件并定期检查它们的更新。 它带有一组用于开发、更新和测试代码的开发人员工具。

特征

  • 数据绑定
  • 路由
  • 表格管理
  • 深层链接
  • 依赖注入
  • 大型社区

在这篇文章中,我们将解释 Rocky Linux 8 上安装 AngularJS。

先决条件

  • 在 云平台上运行 Rocky Linux 8 的服务器
  • 在我们的服务器上配置的 root 密码

第 1 步 – 创建 云服务器

首先,登录到我们的 云服务器。 创建一个新服务器,选择 Rocky Linux 8 作为至少 2GB RAM 的操作系统。 通过 SSH 连接到我们的云服务器并使用页面顶部突出显示的凭据登录。

登录到服务器后,运行以下命令以使用最新的可用软件包更新基本系统。

dnf update -y

第 2 步 – 安装 Node.js

在安装 AngularJS 之前,我们需要在服务器上安装 Node.js。

首先,使用以下命令安装 curl 实用程序:

dnf install curl -y

接下来,使用以下命令添加 Node.js 存储库:

curl -sL https://rpm.nodesource.com/setup_14.x | bash -

接下来,使用以下命令安装 Node.js:

dnf install nodejs -y

安装后,使用以下命令验证 Node.js 版本:

node -v

我们将获得以下输出:

v14.18.2

接下来,使用以下命令将 NPM 更新到最新版本:

npm install npm@latest -g

接下来,使用以下命令验证 NPM 版本:

npm --version

我们应该看到以下输出:

8.2.0

第 3 步 – 安装 Angular CLI

默认情况下,Angular CLI 包含在 Rocky Linux 默认存储库中。 我们可以通过运行以下命令来安装它:

npm install -g @angular/cli

安装 Angular CLI 后,我们可以使用以下命令验证安装:

ng version

我们将获得以下输出:

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

Angular CLI: 13.0.4
Node: 14.18.2
Package Manager: npm 8.2.0
OS: linux x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1300.4 (cli-only)
@angular-devkit/core         13.0.4 (cli-only)
@angular-devkit/schematics   13.0.4 (cli-only)
@schematics/angular          13.0.4 (cli-only)

第 4 步 – 使用 Angular 创建示例应用程序

接下来,使用 Angular CLI 工具创建一个名为 newapp 的新应用程序:

ng new newapp

安装应用程序后,我们将获得以下输出:

✔ Packages installed successfully.

*** Please tell me who we are.

Run

  git config --global user.email "we@example.com"
  git config --global user.name "Wer Name"

to set wer account's default identity.
Omit --global to set the identity only in this repository.

接下来,导航到 newapp 目录并在端口 8080 上启动我们的应用程序:

cd newapp
ng serve --host 0.0.0.0 --port 8080

我们将获得以下输出:

✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |      Size
vendor.js             | vendor        |   1.94 MB
polyfills.js          | polyfills     | 339.07 kB
styles.css, styles.js | styles        | 212.39 kB
main.js               | main          |  53.19 kB
runtime.js            | runtime       |   6.85 kB

                      | Initial Total |   2.54 MB

Build at: 2021-12-06T13:57:31.158Z - Hash: be63da5bbfd6b41d - Time: 43952ms

** Angular Live Development Server is listening on 0.0.0.0:8080, open wer browser on http://localhost:8080/ **


✔ 编译成功。

现在,打开我们最喜欢的 Web 浏览器并使用 URL http://wer-server-ip:8080 访问我们的 Angular 应用程序。 我们应该在以下屏幕上看到 Angular 仪表板:
角度仪表板

现在,返回我们的终端并按 CTRL+C 停止应用程序。

第 5 步 – 使用 PM2 管理 Angular 应用程序

PM2 是一个进程管理器,用于管理基于 Nodejs 的应用程序。 在本节中,我们将安装 PM2 并使用它来管理 AngularJS 应用程序。

首先,使用 NPM 安装 PM2,如下所示:

npm install -g pm2

安装 PM2 后,使用 PM2 启动 Angular 应用程序:

pm2 start "ng serve --host 0.0.0.0 --port 8080" --name "myapp"

我们将获得以下输出:

[PM2] Spawning PM2 daemon with pm2_home=/root/.pm2
[PM2] PM2 Successfully daemonized
[PM2] Starting /usr/bin/bash in fork_mode (1 instance)
[PM2] Done.
┌─────┬──────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id  │ name     │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
├─────┼──────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0   │ myapp    │ default     │ N/A     │ fork    │ 14200    │ 0s     │ 0    │ online    │ 0%       │ 34.3mb   │ root     │ disabled │
└─────┴──────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘

要检查应用程序的状态,请运行:

pm2 status

我们应该看到以下输出:

┌─────┬──────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id  │ name     │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
├─────┼──────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0   │ myapp    │ default     │ N/A     │ fork    │ 14200    │ 20s    │ 0    │ online    │ 0%       │ 336.1mb  │ root     │ disabled │
└─────┴──────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘

要列出所有正在运行的应用程序,请运行:

pm2 ls

要停止正在运行的应用程序,请运行:

pm2 stop myapp

要重新启动应用程序,请运行:

pm2 restart myapp

在上面的指南中,我们学习了 Rocky Linux 8 上安装 AngularJS。我们还学习了如何使用 PM2 管理 Angular 应用程序。 我们现在可以开始使用 Angular 框架开发移动、Web 和桌面应用程序。

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发

请登录后发表评论