使用 Angular CLI 创建和部署应用的步骤

Angular 是前端开发中一种非常流行的框架，并且 Angular CLI 作为 Angular 官方提供的工具，使用它可以更方便的创建、测试、构建和部署应用。本文将介绍使用 Angular CLI 创建和部署应用的具体步骤，带你深度学习并成功创建一个 Angular 应用。

安装 Angular CLI

首先要安装 Angular CLI 工具，如果已经安装可以忽略这一步。

使用 npm 来安装 Angular CLI，打开命令行工具输入以下命令：

npm install -g @angular/cli

这里我们使用 -g 参数将 Angular CLI 安装到全局环境中，执行完毕之后，就可以使用 ng 命令了。

创建新的应用

在命令行工具中，进入你想要创建应用的目录，运行以下命令：

ng new my-app

这个命令将创建一个新的名为 my-app 的应用，在运行时可能会询问一些选项，你可以根据自己的需求来做出选择。

创建好后进入 my-app 目录，使用以下命令运行应用：

cd my-app
ng serve --open

ng serve 命令可以启动一个本地开发服务器，并打开浏览器来访问应用。--open 参数将会在浏览器访问服务器的时候自动打开应用。

修改样式

默认的 Angular 应用样式可能不适合你的需求，我们可以打开 src/style.css 文件来修改样式。

例如，你可以在 style.css 中添加以下样式：

body {
  background-color: #333;
  color: #fff;
}

保存文件之后，浏览器会自动更新应用，你可以看到背景颜色和文字颜色都被修改了。

创建新的组件和服务

在 Angular 中，组件和服务是被用来组合和处理开发逻辑的基本单元，使用 Angular CLI 可以非常方便的创建这些单元。

使用以下命令创建一个新的组件：

ng generate component my-component

这个命令会在 src/app 目录下创建一个名为 my-component 的新组件。

使用以下命令创建一个新的服务：

ng generate service my-service

这个命令会在 src/app 目录下创建一个名为 my-service 的新服务。

部署应用

在你的应用准备部署的时候，可以使用以下命令来构建应用：

ng build --prod

这个命令用于生产环境构建，会生成一个 dist 目录用来存放构建好的应用，可以将它部署到服务器上。

如果你需要将应用部署到 GitHub Pages 中，可以首先安装 Angular CLI 的预先测功能：

-ng add angular-cli-ghpages

然后使用以下命令将应用部署到 GitHub Pages：

ng deploy

这个命令将构建应用并将构建后的文件上传到 GitHub Pages。

总结

使用 Angular CLI 可以非常方便的创建、测试、构建和部署 Angular 应用。通过本文的介绍，你已经了解了 Angular CLI 的基本使用方式，并且可以创建和部署自己的应用了。Happy coding!

示例代码请参考：https://github.com/angular/angular-cli

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bd8b848841e9894a25632