安装 AngularJS

什么是 Angularjs

AngularJS 是动态 Web 应用程序的结构框架。 它允许您使用 HTML 作为模板语言，并允许您扩展 HTML 的语法以清晰简洁地表达应用程序的组件。 开箱即用，它消除了您当前通过数据绑定和依赖注入编写的大部分代码。 这一切都发生在浏览器 DOM 中的 JavaScript 中，使其成为任何服务器技术的理想合作伙伴。

先决条件

先决条件将取决于您计划如何安装它。 有两个主要的安装选项

  1. cPanel Softaculous 安装
  2. CLI（命令行）安装。 使用命令行选项，需要手动安装 NodeJS 和 NPM。
    1. 节点 JS（节点 8.9 或更高版本）
    2. NPM（5.5.1 或更高版本）

Angular JS库的cPanel安装

安装 Angular 有两种主要方法。 让我们从最简单的开始。 此安装是使用 cPanel Softaculous 安装程序构建的。

  1. 导航到您的 cPanel 帐户 https://mydomain.com/cpanel 并登录。
  2. 接下来，向下滚动到 软件 部分，然后单击 软件应用 安装程序。
  3. 这将打开一个新窗口，如下所示。
  4. 接下来，单击 Softaculous 屏幕左上角的搜索框并开始输入 角 然后，当它出现时，单击库正下方的 AngularJS 选项。角度搜索
  5. 点击 现在安装 按钮：
  6. 单击安装按钮后，您应该会看到下图：安装屏幕2 （在下图所示的屏幕内）

软AC4
接下来，我们应该：

  1. 选择您的应用应使用的协议：HTTP 或 HTTPS
  2. 选择要安装 Angular JS 库的域
  3. 在目录文本框中，输入您要安装应用程序的目录，或者接受默认值。 （如果您希望您的域名直接进入应用程序，请确保目录文本框为空白。）
  4. 选择应该是什么类型的安装。 要安装完整的库，包括文档文件，请选择“原始包”。 要仅安装代码文件，请选择“Just Library”文件。
  5. 单击“高级选项”图标以展开高级选项。 （如果您不想在应用程序更新可用时收到电子邮件通知，请选中“禁用更新通知”复选框。）
  6. 最后，点击 安装 完成填写字段后的按钮

应该就是这样！ 如果没有显示错误，则意味着您的 Angular 应用程序应该已启动并正在运行。 接下来，导航到 https://mydomain.com 而如果 一切都已正确安装，您将看到如下图所示的图像。

成功

你做到了！ 您刚刚通过 Softaculous Apps Installer 安装了 AngularJS 框架。

注意：如果 Angular JS 是通过 Softaculous 安装的，它将安装 1.7.8 版本，根据 文件, 是最新版本。

如果您想要的选项比上述安装类型中的更多，我们建议您查看下面的安装示例。

命令行安装

我最喜欢的安装 Angular JS 的方式是通过命令行。 这种安装方法提供了比通过 cPanel 中的 Softaculous 用户界面安装它更多的选项。 使用命令行安装时可以选择的首选项之一（不通过 cPanel 用户界面支持）是版本选项控制。 您可以从以下任何版本中进行选择 列表 因为角度版本与 CLI 版本一起使用。

因此，要通过命令行在服务器上安装 AngularJS 应用程序，最简单的方法是通过 Angular 的 CLI（CLI 代表命令行界面）

在我们实际安装 Angular CLI 之前，我们需要安装依赖项并以 root 用户身份登录服务器：

  • 节点 JS（节点 8.9 或更高版本）
  • NPM（5.5.1 或更高版本）
  • 以 root 用户身份通过​​ SSH 登录到您的服务器。

现在，我们需要使用以下命令安装最新的稳定存储库：curl -sL https://rpm.nodesource.com/setup_12.x | sudo -E bash -
## Installing the NodeSource Node.js 12.x repo…
## Inspecting system...
+ rpm -q --whatprovides redhat-release || rpm -q --whatprovides centos-release || rpm -q --whatprovides cloudlinux-release || rpm -q --whatprovides sl-release
+ uname -m
## Confirming "el7-x86_64" is supported...
+ curl -sLf -o /dev/null 'https://rpm.nodesource.com/pub_12.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'
## Downloading release setup RPM...
+ mktemp
+ curl -sL -o '/tmp/tmp.AnJitWusNv' 'https://rpm.nodesource.com/pub_12.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'
## Installing release setup RPM...
+ rpm -i --nosignature --force '/tmp/tmp.AnJitWusNv'
## Cleaning up...
+ rm -f '/tmp/tmp.AnJitWusNv'
## Checking for existing installations...
+ rpm -qa 'node|npm' | grep -v nodesource
## Run `sudo yum install -y nodejs` to install Node.js 12.x and npm.
## You may also need development tools to build native addons:
sudo yum install gcc-c++ make
## To install the Yarn package manager, run:
curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo yum install yarn
[[email protected] ~]#

接下来，键入以下命令来安装 Node JS 和 NPMyum install -y nodejs

如果一切正确，您应该得到以下输出 节点安装

检查 Node 和 NPM 的版本

注意：node –version（显示 Node JS 版本）
npm –version（显示 NPM 版本）

如果它们都已安装并且输出应显示类似于以下内容：

[[email protected] ~]# node --version
v12.7.0
[[email protected] ~]# npm --version
6.10.0

您还可以选择在本地安装 angular/cli：
npm install @angular/cli

或全局安装：
npm install -g @angular/cli

现在我们已经安装了这两个依赖项，我们可以使用以下命令全局安装 Angular CLI：

[email protected] ~]# npm install -g @angular/cli

运行命令后，会出现一个问题，询问我们是否愿意与 Google 的 Angular 团队共享匿名使用数据

npm 问题

您可以键入 Y 或 N，因为它对安装并不重要。

如果一切顺利，该命令将给出如下图所示的输出

ng --version 

cli输出版本

这意味着一切都已安装并可以使用。

在域上部署基本应用

完成上述所有步骤后，我们可以部署一个演示 Angular 站点。

  1. CD 到您的域文档根目录。 在 cPanel 服务器中，默认情况下是

cd /home/$user/public_html

进入 public_html 后，键入以下命令 在文档根目录中安装角度库。
ng new example-project

  1. 我们发出命令后，首先要问的问题是：
    “你想添加 Angular 路由吗？ （是/否）”
    只需在这个问题上输入“Y”，然后继续下一个问题。
  2. 然后，提出后续问题： 您想使用哪种样式表格式？ （使用箭头键）

❯ CSS
SCSS [ https://sass-lang.com/documentation/syntax#scss]
Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax]
Less [ https://lesscss.org]
Stylus [ https://stylus-lang.com]

根据您选择使用的语言样式，您可以通过移动键盘上的箭头键来选择一种。
在这种情况下，让我们选择 CSS； 只需按下 Enter 在你的键盘和 w等待安装完成。

  1. 安装完成后，我们需要在防火墙中打开一个应用程序将监听的端口； 默认选择端口 4200。
    （要打开该端口，只需按照我们知识库网站上的教程进行操作。
  2. 打开端口后，导航到添加项目名称的文件夹。 在我们的例子中，这将是：
    cd example-project这会将我们更改为项目目录。
  3. 要启动将为应用程序提供服务的 Node JS 服务器，我们需要发出以下命令：
    > ng serve
  4. 默认情况下发出此命令会将服务器绑定到 https://localhost:4200。如果要将服务器绑定到特定域，则可以发出以下命令：
    ng serve --host example.com --port 4200
  5. 然后，访问 Angular 应用程序的链接将是 https://example.com:4200，下面的图片应该会显示出来。
    结束

  6. 这对于开发环境应该没问题，但要实际部署应用程序，我们需要将环境切换到生产环境。 完成此操作的命令如下：

    ng build --prod 

这 将创建一个 /dist 文件夹，其中包含来自测试环境的应用程序的所有文件。 这些文件现在可以移动到域的文档根目录，一旦您访问没有端口的链接，应用程序应该会解析。

使用的文档：

NodeJS 发布
Angular CLI 信息
AngularJS 网站
Softaculous Angular 库

需要更多关于 AngularJS 的信息？

我们的支持团队配备了知识渊博的管理员，他们可以找到有关网络托管技术的这些问题和其他问题的答案。 如果您对上述步骤感到不舒服，请致电 800.580.4985 联系我们，或打开 聊天 或与我们订票，我们将为您提供所需的信息！

Related Posts