如何使用Angular CLI创建Angular应用程序

时间:2019-05-19 01:26:14  来源:igfitidea点击:

Angular是一个javascript框架、库、资产和实用程序。本教程将在任何平台上使用Angular CLI工具创建一个Angular应用程序。angular项目为自动化提供了名为angular CLI的命令行界面。我们可以在Angular项目中执行自动化操作,而不是手动执行,从而节省时间和精力。使用Angular CLI,可以执行以下操作:

  • 新建项目.
  • 设置应用程序环境管理应用程序配置.
  • 构建组件、服务和路由系统
  • 启动应用程序、
  • 测试和部署项目.
  • 安装第三方库,如Bootstrap、Sass等

环境要求

Angular要求在系统上安装nodej。我们可以按照以下教程之一,按照操作系统在系统上安装Angular。

安装Node.js节点在Windows上安装Node.js节点在CentOS和Fedorainstal上Node.js节点在Ubuntu、Debian和LinuxMintAfter上,确保Node.js节点NPM安装正确。

 node -v  

v12.4.0

 npm -v  

6.9.0

安装Angular CLI

现在,使用NPM包管理器安装Angular CLI实用程序。

npm install -g @angular/cli

带有-g的选项确保在系统上全局安装Angular CLI。因此,系统上的所有用户和应用程序都可以访问它。Angular CLI提供用于命令行操作的命令“ng”。让我们检查一下我们系统上安装的ng版本。

 ng --version  

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

Angular CLI: 8.0.3

创建Angular应用程序

系统已准备好构建Angular应用程序。下面的命令将创建名为 hello Angular 的Angular应用程序。

ng new hello-angular

这将创建一个包含项目名称的目录,并在该目录下创建所有文件。它还将在该目录中安装所有必需的库。

运行Angular应用程序

基本的Angular应用程序已经准备就绪。切换到hello angular目录并使用ng serve命令运行angular应用程序。

cd hello-angular
ng serve

我们可以在localhost端口4200上访问angular应用程序,该端口是angular应用程序使用的默认主机和端口。

http://localhost:4200

通过提供[-host]和[-port]命令行参数,可以更改运行Angular应用程序的主机和端口。

ng serve --host 0.0.0.0 --port 8080

IP地址0.0.0.0将监听所有接口,并且所有网络都可以访问。