AngularJS 是一种常见的基于 Web 的开源应用程序，用于构建移动和桌面应用程序。AngularJS 由 Google 于 2009 年创建，并得到了超过 170 万开发人员、库作者和内容创建者的大型社区的支持。AngularJS 建立在 TypeScript 语言之上，包括：

• 基于组件的框架，支持构建可扩展的 Web 应用程序。

• 一套用于开发、更新和测试代码的开发人员工具

• 一组集成良好的库，具有各种功能，例如表单管理、路由等

AngularJS 允许使用 HTML 作为模板语言，从中可以扩展语法以清楚地表达应用程序组件。除了能够从单个开发人员项目扩展到企业级应用程序之外，AngularJS 还具有以下惊人的特性：

• 数据绑定这允许模型和视图组件之间的数据自动同步。

• 能够创建富 Internet 应用程序 (RIA)。

• 提供以干净的模型视图控制器 (MVC) 方式在 JavaScript 中编写应用程序的能力。

• 用 AngularJS 编写的应用程序是跨浏览器兼容的

• 深层链接，一种代码功能，允许在 URL 中对应用程序的状态进行编码，以便可以将其添加为书签。

• 依赖注入——借助内置的依赖注入，可以轻松地开发、理解和测试应用程序。

• 该 模型视图无论其将应用程序分成部分称为模型，视图和控制器每个都有不同的职责。

• AngularJS 具有从控制器和模型呈现的模板，即 HTML 文件

• 它内置了诸如$http 之类的服务，用于发出 XML HTTP 请求

尽管 AngularJS 有许多惊人的优点，但它仍然存在以下缺点：

• 它不安全。使用 JavaSCRipt 框架，应实现服务器端身份验证以确保应用程序安全。

• 不可降级，因为当应用程序的用户禁用 JavaScipt 时，您将只剩下一个基本页面。

在本指南中，我将演示如何在 Ubuntu 20.04|18.04 上安装和使用 AngularJS。

入门

对于本指南，请确保您拥有：

• Ubuntu 20.04|18.04 系统。

• 具有 sudo 权限的用户。

更新和升级您的 Ubuntu 20.04|18.04 系统。

sudo apt update && sudo apt upgrade

步骤 1 – 在 Ubuntu 20.04|18.04 上安装 Node.js

在本指南中，我们将使用 npm（节点包管理器）在我们的系统上安装 AngularJS。npm 是 Linux 系统上 Node.JS 的默认包管理器，因此将使用以下步骤将其安装在我们的 Ubuntu 20.04|18.04 上。

添加 Node.JS 存储库。这里我们将在 Ubuntu 20.04|18.04 上安装 Node.js 14，因为 Angular 不支持 node.js 16

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

示例输出：

## Installing the NodeSource Node.js 14.x repo…## Populating apt-get cache…+ apt-get updateHit:1 http://ke.archive.ubuntu.com/ubuntu focal InReleaseGet:2 http://ke.archive.ubuntu.com/ubuntu focal-updates InRelease [114 kB]…………## To install the Yarn package manager, run:     curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | gpg –dearmor | sudo tee /usr/share/keyrings/yarnkey.gpg >/dev/null     echo “deb [signed-by=/usr/share/keyrings/yarnkey.gpg] https://dl.yarnpkg.com/debian stable main” | sudo tee /etc/apt/sources.list.d/yarn.list     sudo apt-get update && sudo apt-get install yarn

然后继续使用 APT 命令在 Ubuntu 20.04|18.04 上安装 node.js：

sudo apt install -y nodejs

上面的命令将安装 NPM，它是一个 JavaScript 包管理器。通过检查安装的 node.js 版本来确认您的安装。

$ node -vv14.18.1

下一步是更新 npm 版本。

sudo npm install npm@latest -g

使用以下命令检查 npm 版本：

$ npm --version8.1.0

第 2 步 – 在 Ubuntu 20.04|18.04 上安装 AngularJS

安装 npm 后，我们准备在我们的系统上安装 AngulaJS。使用以下命令在 Ubuntu 20.04|18.04 上安装最新版本的 AngulaJS：

sudo npm install -g @angular/cli

最新版本的 Angular CLI 将安装在 ubuntu 20.04|18.04 上。安装完成后，验证安装的 Angular 版本。

$ ng version

示例输出：

    _                      _                 ____ _     ___    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|   / △ \ | ‘_ \ / _` | | | | |/ _` | ‘__|   | |   | |    | |  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|                |___/    Angular CLI: 12.2.10Node: 14.18.1Package Manager: npm 8.1.0OS: linux x64Angular: … Package                      Version——————————————————@angular-devkit/architect    0.1202.10 (cli-only)@angular-devkit/core         12.2.10 (cli-only)@angular-devkit/schematics   12.2.10 (cli-only)@schematics/angular          12.2.10 (cli-only)

此外，您可以在 Ubuntu 20.04|18.04 上的 Angular CLI 上安装特定版本。

#…Angular 8….#npm install -g @angular/cli@8 #…Angular 9….#npm install -g @angular/cli@9  

#…Angular 10….

#npm install -g @angular/cli@10      

第 3 步 – 创建一个新的 Angular 应用程序

安装 Angular 后，您可以使用该ng命令创建一个新的Angular应用程序。在本指南中，我们将使用 AngularJS创建一个名为HelloWorld的演示应用程序。

ng new HelloWorld

示例输出：

? Would you like to add Angular routing? Yes? Which stylesheet format would you like to use? CSS [Press Enter]CREATE HelloWorld/README.md (1057 bytes)CREATE HelloWorld/.editorconfig (274 bytes)CREATE HelloWorld/.gitignore (604 bytes)CREATE HelloWorld/angular.json (3063 bytes)CREATE HelloWorld/package.json (1075 bytes)CREATE HelloWorld/tsconfig.json (783 bytes)CREATE HelloWorld/.browserslistrc (703 bytes)CREATE HelloWorld/karma.conf.js (1427 bytes)CREATE HelloWorld/tsconfig.app.json (287 bytes)CREATE HelloWorld/tsconfig.spec.json (333 bytes)CREATE HelloWorld/src/favicon.ico (948 bytes)CREATE HelloWorld/src/index.html (296 bytes)CREATE HelloWorld/src/main.ts (372 bytes)CREATE HelloWorld/src/polyfills.ts (2820 bytes)CREATE HelloWorld/src/styles.css (80 bytes)CREATE HelloWorld/src/test.ts (788 bytes)CREATE HelloWorld/src/assets/.gitkeep (0 bytes)CREATE HelloWorld/src/environments/environment.prod.ts (51 bytes)CREATE HelloWorld/src/environments/environment.ts (658 bytes)CREATE HelloWorld/src/app/app-routing.module.ts (245 bytes)CREATE HelloWorld/src/app/app.module.ts (393 bytes)CREATE HelloWorld/src/app/app.component.css (0 bytes)CREATE HelloWorld/src/app/app.component.html (24617 bytes)CREATE HelloWorld/src/app/app.component.spec.ts (1085 bytes)CREATE HelloWorld/src/app/app.component.ts (214 bytes) Packages installed successfully.

该命令会在当前目录中创建一个目录HelloWorld，其中包含 Angular 应用程序所需的所有文件。

第 4 步 – 为 Angular 应用程序提供服务

此时，您创建的 angular 应用程序已准备好提供服务。导航到目录并为您的应用程序提供如下服务。

cd HelloWorldng serve

示例输出：

⠋ Generating browser application bundles (phase: setup)…Compiling @angular/core : es2015 as esm2015Compiling @angular/common : es2015 as esm2015Compiling @angular/platform-browser : es2015 as esm2015Compiling @angular/platform-browser-dynamic : es2015 as esm2015Compiling @angular/router : es2015 as esm2015 Browser application bundle generation complete.Initial Chunk Files | Names         |      Sizevendor.js          | vendor        |   2.39 MBpolyfills.js        | polyfills     | 128.50 kBmain.js             | main          |  56.80 kBruntime.js          | runtime       |   6.62 kBstyles.css          | styles        | 736 bytes                    | Initial Total |   2.58 MBBuild at: 2021-10-16T11:12:44.459Z – Hash: fe2b801949a1c6690c83 – Time: 45098ms** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Compiled successfully. Browser application bundle generation complete.5 unchanged chunksBuild at: 2021-10-16T11:12:48.166Z – Hash: 88949641eec1a3868c26 – Time: 2723ms Compiled successfully.

由于 Angular 应用程序在端口 4200 上运行，因此使用 URL http://localhost:4200通过 Web 访问该应用程序

或者，您可以使用以下命令更改运行应用程序的主机和端口：

ng serve --host 0.0.0.0 --port 8080

在这里，应用程序在 IP 地址 0.0.0.0 和端口 8080 上运行。

现在您可以添加依赖项、PWA 支持、运行和观察测试以及为生产构建应用程序等

结论

这就对了！我们已经在 Ubuntu 20.04|18.04 上成功安装并使用了 AngularJS。我希望本指南对您有所帮助。