这篇文章主要介绍了Angular 开发学习之Angular CLI的安装使用,现在分享给大家,也给大家做个参考。

前面我们已经准备好开发环境,现在可以正式开发了。正如前面提到的,Angular 提供了一个命令行工具,可以简化我们的程序开发。我们今后的开发也会使用这一工具,因此我们需要首先安装这个名为 Angular CLI 的开发工具。

安装 CLI 的过程很简单,与安装其它工具、甚至是安装一个普通开发包没什么区别。我们前面已经配置好 NPM Registry、安装成功 yarn,那么就使用 yarn 来安装这个工具。具体的命令是:

yarn global add @angular/cli
登录后复制

参数 global 说明是在全局安装; add 说明是在“添加”;最后是 CLI 的包名,没有注明版本好的话,会让 yarn 安装最新版的 CLI。。这一语句与之前 NPM 的

npm install -g @angular/cli
登录后复制

是等价的。

之后我们运行

ng version
登录后复制

如果能够输出 Angular CLI 的版本号,说明安装成功。注意,Angular CLI 的所有命令都是以 ng 开始的。

Angular CLI安装教程-LMLPHP

Angular CLI 建立在 webpack 基础之上,可以帮助我们生成 Angular 项目框架,生成 Angular 模块、组件、指令等。如果手动搭建这一开发环境,需要了解 webpack 的各种细节、编写各种自动化脚本等,要求较高的前端开发技术。考虑到我们的基础教程,使用 CLI 辅助开发无疑是合适的。我们会在后面的章节中详细介绍 Angular CLI 的使用,如果你对 Angular CLI 感兴趣,可以通过其官方网站 了解更多的细节。

刚刚安装完成的 CLI 默认使用 NPM 作为包管理工具。我们希望使用 yarn,只需运行下面的命令:

ng set --global packageManager=yarn
登录后复制

反之,如果想换回 NPM,只需使用

ng set --global packageManager=npm
登录后复制

即可。

安装好 Angular CLI,下面我们来创建第一个示例工程,了解 Angular CLI 的基本使用。

首先,使用

ng new demo
登录后复制

创建一个演示项目。 new 是创建一个全新项目,后面的 demo 是项目的名字。Angular CLI 会帮我们生成完整的项目框架——包括项目所需所有文件、文件结构以及各种辅助文件等。之后,Angular CLI 会自动运行 yarn install ,这是在安装项目所需要的各种依赖。安装过程会比较漫长,需要耐心等待一段时间。

Angular CLI安装教程-LMLPHP

当出现类似上面的界面,提示“Projecy ‘demo' successfully created”时,表示项目已经创建完成。如果有错误,需要检查安装过程或者网络连接等。

项目创建完毕,会在当前目录下生成一个项目文件夹。之后我们可以进入项目目录

cd demo
登录后复制

然后运行

ng serve
登录后复制

Angular CLI安装教程-LMLPHP

ng serve 命令会编译项目,然后启动一个内置的小型服务器,我们就可以通过浏览器查看项目的运行结果。注意上面的提示:NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/,也就是说,这个服务器的地址应该是 http://localhost:4200,我们只要用浏览器访问这个地址即可:

Angular CLI安装教程-LMLPHP

可以看到 Angular CLI 默认生成的项目页面的运行结果。

注意,这一内置服务器仅适用于开发测试用,并不能作为实际使用的服务器。因此,我们如果要部署到正式的服务器,需要将项目编译成一个发布版。编译发布版也很简单,只需使用一条命令:

ng build --prod
登录后复制

编译完成后,打开项目文件夹,可以看到一个 dist 目录,这里面的文件就是整个项目运行所需要的文件。当我们部署应用时,只需要将这个文件夹中的所有文件部署到服务器即可。

我们从创建项目开始,到项目的开发测试,最后是项目打包部署,全部利用 Angular CLI 提供的各种功能。可以看到,Angular CLI 提供了一站式的开发模式,我们可以利用 Angular CLI 很简单的开发 Angular 项目。不过,这里我们演示的只是最简单的用法,在正式使用中,可能会添加很多额外的参数,以便生成我们所需要的文件和项目。这需要通过阅读 Angular CLI 的文档来获取更多信息。在后面的章节中,如果遇到相关内容,我们会再次进行介绍。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

使用JavaScript实现比异步更好的解决方法?

通过Node.js使用Koa进行项目搭建

详细解读React Native Flexbox布局

以上就是Angular CLI安装教程的详细内容,更多请关注Work网其它相关文章!

09-14 15:19