在 Ubuntu 20.04|18.04 上安装和使用 AngularJS

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 上运行。

image.png

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

结论

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


作者头像
南宫俊逸创始人

君子好学,自强不息~

上一篇:阿里云新人特惠专享云服务器ECS 1核2G N4低至72.6元/年,上云必备好品1元起,学习考证9.9元起!点击立即选购!
下一篇:使用 Waydroid 在 Linux 上运行 Android 操作系统

相关推荐

4

发表评论

×
×