Angular 开发学习之Angular CLI的安装使用


Posted in Javascript onDecember 31, 2017

前面我们已经准备好开发环境,现在可以正式开发了。正如前面提到的,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 开发学习之Angular CLI的安装使用

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 开发学习之Angular CLI的安装使用

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

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

cd demo

然后运行

ng serve

Angular 开发学习之Angular CLI的安装使用

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

Angular 开发学习之Angular CLI的安装使用

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

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

ng build --prod

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
jquery 手势密码插件
Mar 17 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 Javascript
ReactNative实现Toast的示例
Dec 31 #Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 #Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 #Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 #jQuery
React数据传递之组件内部通信的方法
Dec 31 #Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 #Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 #Javascript
You might like
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
wxPython窗口中文乱码解决方法
2014/10/11 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
python调用webservice接口的实现
2019/07/12 Python
python sorted方法和列表使用解析
2019/11/18 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
最新大学职业规划书范文
2013/12/30 职场文书
环保专业大学生职业规划设计
2014/01/10 职场文书
个人银行贷款担保书
2014/04/01 职场文书
销售提升方案
2014/06/07 职场文书
护士旷工检讨书
2015/08/15 职场文书
任命书格式模板
2015/09/22 职场文书