分享最新优惠信息
购买主机更加划算

Linux发行版安装Angular CLI以及基本项目示例图文教程

Angular是一个开源、流行和高度可扩展的前端应用程序开发框架,用于使用TypeScript/JavaScript和其它通用语言构建移动和Web应用程序。Angular是AngularJS(或Angular 1.0 版)之后的所有Angular版本的总称,包括Angular 2和Angular 4。

Angular非常适合从头开始构建小型到大型应用程序。Angular CLI实用程序是Angular平台帮助应用程序开发的关键组件之一,它是一个简单易用的命令行工具,用于创建、管理、构建和测试Angular应用程序。

在本文中,惠主机小编将简单介绍在Linux系统上安装Angular命令行工具的简单过程并简要说明Angular工具的一些常见的使用基本示例,感兴趣的小伙伴可以了解下。

在Linux系统中安装Node.js和NPM

要安装Angular CLI,首先需要在Linux系统上安装最新版本的Node.js和NPM 。

在Ubuntu上安装Node.js

-------------对于Node.js v19.x --------------  
$ curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&\ 
$ sudo apt-get install -y nodejs
------------ 对于Node.js v18.x ------------ 
$ curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
$ sudo apt-get install -y nodejs
------------ 对于Node.js v16.x ------------ 
$ curl -fsSL https://deb.nodesource.com/setup_16.x | bash - &&\
$ sudo apt-get install -y nodejs
------------ 对于Node.js v14.x ------------ 
$ curl -fsSL https://deb.nodesource.com/setup_14.x | bash - &&\
$ sudo apt-get install -y nodejs

在Debian上安装Node.js

-------------- 对于Node.js v19.x --------------  
$ curl -fsSL https://deb.nodesource.com/setup_19.x | bash - &&\ 
$ sudo apt-get install -y nodejs
-------------- 对于Node.js v18.x -------------- 
$ curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\ 
$ sudo apt-get install -y nodejs
-------------- 对于Node.js v16.x -------------- 
$ curl -fsSL https://deb.nodesource.com/setup_16.x | bash - &&\ 
$ sudo apt-get install -y nodejs
-------------- 对于Node.js v14.x -------------- 
$ curl -fsSL https://deb.nodesource.com/setup_14.x | bash - &&\ 
$ sudo apt-get install -y nodejs

在 RHEL、CentOS、Fedora、Rocky 和 ​​Alma Linux上安装 Node.js

-------------- 对于Node.js v19.x --------------  
$ curl -fsSL https://rpm.nodesource.com/setup_19.x | sudo bash - 
$ sudo yum install -y nodejs
-------------- 对于Node.js v18.x -------------- 
$ curl -fsSL https:/ /rpm.nodesource.com/setup_18.x | sudo bash - 
$ sudo yum install -y nodejs
-------------- 对于Node.js v16.x -------------- 
$ curl -fsSL https:/ /rpm.nodesource.com/setup_16.x | sudo bash - 
$ sudo yum install -y nodejs
-------------- 对于Node.js v14.x -------------- 
$ curl -fsSL https:/ /rpm.nodesource.com/setup_14.x | sudo bash - 
$ sudo yum install -y nodejs

此外,要从NPM编译和安装本机附加组件,可能需要按如下方式在系统上安装开发工具。

$ sudo apt install -y build-essential   [Debian/Ubuntu系统] 
$ sudo yum install gcc-c++ make   [RHEL系统]

测试最新Nodejs和NPM

要对nodejs和NPM进行简单测试,可以使用以下命令检查系统上安装的版本:

1、基于RHEL系统上,命令如下:

# node --version
# npm --version

2、基于Debian、Ubuntu和Linux Mint系统上,命令如下:

$ nodejs --version
$ npm --version

在Linux系统中安装Angular CLI

一旦你安装了Node.js和NPM,现在就可以使用npm包管理器安装Angular CLI,如下所示(-g标志意味着在系统范围内安装该工具以供所有系统用户使用),命令如下:

# npm install -g @angular/cli
或者
$ sudo npm install -g @angular/cli

在Linux上安装Angular CLI

接下来可以使用ng可执行文件启动Angular CLI,该可执行文件现在应该安装在您的系统上,运行以下命令以检查已安装的Angular CLI的版本。

# ng version
或者
# ng --version

检查ng的版本

使用Angular CLI创建Angular项目

下面将展示如何创建、构建和服务一个新的、基本的Angular项目。首先,进入服务器的html目录(该目录可以结合自身实际情况灵活设置),然后如下初始化一个新的Angular应用程序(记得按照提示操作):

# cd /var/www/html/ 
# ng new tecmint-app #as root
或者
$ sudo ng new tecmint-app #non-root user

Angular应用程序

接下来,切换到到刚刚创建的应用程序目录,并如下所示显示应用程序:

# cd tecmint-app 
# ls
# ng serve

新的Angular应用程序

在从Web浏览器访问新应用程序之前,如果正在运行防火墙服务,则需要在防火墙配置中打开端口4200,命令如下:

---------- 在Firewalld上 ----------  
# firewall-cmd --permanent --zone=public --add-port=4200/tcp 
# firewall-cmd --reload
---------- 在UFW上 ---------- 
$ sudo ufw allow 4200/tcp 
$ sudo ufw reload

现在可以打开Web浏览器并使用以下地址进行导航,以查看新应用程序的运行情况,如以下截图所示:

http://localhost:4200/
或
http://SERVER_IP:4200

访问新Angular应用程序

注意如果使用ng serve命令构建应用程序并在本地提供服务,如上所述,那么当更改任何源文件时,服务器会自动重建应用程序并重新加载网页。

有关ng工具的更多信息,请运行以下命令进行查看:

# ng help

AngularCLI主页地址: https: //angular.io/cli

总结

在本文中,小编主要介绍了在不同的Linux发行版上安装Angular CLI的详细过程,同时还介绍了如何在新的服务器上构建、编译和提供基本的Angular应用程序,设置过程仅供参考。

关于Angular CLI

Angular CLI (Command Line Interface) 是一个由Angular官方提供的命令行工具,用于快速创建和开发Angular应用程序。使用Angular CLI可以帮助开发人员快速创建一个新的Angular项目,并生成Angular组件、服务、指令和管道等代码,同时还提供了一些常用的开发工具和命令,例如代码打包、测试、调试、构建和部署等。

当然,除了快速创建项目和代码生成之外,Angular CLI还可以自动执行一些优化操作,例如AOT(Ahead-of-Time)编译、代码打包和代码压缩等,从而提高应用程序的性能和加载速度。

总之,Angular CLI可以大大提高Angular应用程序的开发效率和质量,并使得开发人员可以更加专注于业务逻辑的开发。

未经允许不得转载:惠主机 » Linux发行版安装Angular CLI以及基本项目示例图文教程