使用Angular CLI生成 Angular 5项目教程详解


Posted in Javascript onMarch 18, 2018

如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文.

Angular CLI 官网:https://github.com/angular/angular-cli

安装angular cli:

npm install -g @angular/cli

不过首先要确保您安装了比较新版本的nodejs.

今天主要通过以下几个方面介绍Angular CLI:

  • 生成项目
  • 参数介绍
  • 配置和自定义CLI
  • 检查和修复代码
  • 生成新项目:
ng new my-app

这个命令会生成一个新的项目叫做my-app并把该项目的文件放在my-app这个文件夹下.

项目生成完的时候别忘了cd进入到my-app目录.

另一个选项是使用--dry-run参数:

ng new my-app --dry-run

使用这个参数呢, 不会真的生成项目, 而是会打印出来如果创建该项目的话哪些文件将会生成.

使用Angular CLI生成 Angular 5项目教程详解

另外一个常用的参数是--skip-install:

ng new my-app --skip-install

这个命令作用是, 生成完项目文件之后不执行npm install这个动作.

不过以后还是需要手动执行npm install的.

使用--help参数可以查看帮助:

ng new --help

使用Angular CLI生成 Angular 5项目教程详解

下面我要生成一个项目, 先不执行npm install:

使用Angular CLI生成 Angular 5项目教程详解

这个速度非常快, 然后使用我最喜欢的IDE VSCode将其打开:

code .

看看整个的项目结构, 以及package.json:

使用Angular CLI生成 Angular 5项目教程详解

scripts下面是一些预定义的项目命令:

start 是运行项目的意思, 执行npm start即可, 或者直接执行ng serve也可以.

npm build / ng build 是执行构建.......

不一一介绍了.

然后看下dependencies:

我们使用的是angular 5.2.0, 前面的^符号表示, 我们使用的版本号是大于等于5.2.0的但是肯定会小于6.

最下面是devDependencies, 里面都是开发时用的工具库, 可以看到angular cli就在里面.

接下来看看angular-cli.json这个文件:

angular-cli.json:

它是angular cli针对该项目的配置文件.

使用Angular CLI生成 Angular 5项目教程详解

里面的prefix比较有趣, 它是所有生成的components和directives的默认前缀.

可以查看一下app.component.ts:

使用Angular CLI生成 Angular 5项目教程详解

它的前缀就是app.

如果想更改默认前缀的话, 就可以修改angular-cli.json文件里面的prefix属性值了, 如果改成sales, 那么以后生成的components和directives的前缀就是sales. 但是对已经生成的components/directives就不起作用了.

那么如何保证生成的项目的components/directives前缀是您想要的呢?

就是使用ng new的另一个参数 --prefix:

ng new sales-app --prefix sales

使用Angular CLI生成 Angular 5项目教程详解

这时里面生成的component的selector就是:

使用Angular CLI生成 Angular 5项目教程详解

angular-cli.json文件里面的prefix:

使用Angular CLI生成 Angular 5项目教程详解

在生成的项目里可以看到, 同时还生成了spec文件. 如果我不想让我的项目生成spec文件呢?

ng new也有这个参数--skip-tests:

ng new my-app2 --skip-tests

使用Angular CLI生成 Angular 5项目教程详解

可以看到, 并没有生成任何spec文件.

ng new的参数一共有这些:

使用Angular CLI生成 Angular 5项目教程详解

有几个介绍过的, 其他的例如:

--skip-git: 生成项目的时候就不会把它初始化为git repository, 默认是初始化为git repository的.

--directory: 可以设定生成的目录, 默认是使用的项目名称.

--style: 可以设定样式的类型, 默认是css, 例如可以改成scss.

也可以通过--inline-style把样式的写法设为行内样式, 这个默认是false的.

下面我来生成一个使用scss样式的项目:

使用Angular CLI生成 Angular 5项目教程详解

可以看到生成的是styles.scss, app.component.scss文件, angular cli不仅会生成scss文件, 而且也会编译它们.

查看angular-cli.json, 可以在文件的下方看到采用的是scss样式文件:

使用Angular CLI生成 Angular 5项目教程详解

这样, 以后生成的component的默认样式文件就是scss了.

最后我想介绍一下这个参数, --routing:

使用Angular CLI生成 Angular 5项目教程详解

如果想手动为项目配置路由的话, 还是需要一些步骤的, 所以可以使用这个参数直接生成带路由配置的项目.

看一下项目路由文件:

使用Angular CLI生成 Angular 5项目教程详解

再查看一下app.module:

使用Angular CLI生成 Angular 5项目教程详解

可以看到import了AppRoutingModule.

综上, ng new 的这些参数可以在生成项目的时候作为命令的参数联合使用, 其中有一些参数也可以在项目生成以后通过修改angular-cli.json文件来做修改.

比较推荐的做法是:

在生成项目的时候使用: --routing, --prefix, --style, --dry-run参数. 首先通过--dry-run参数, 确保会生成哪些文件是否正确, 确认后把--dry-run参数去掉, 生成文件.

下面我生成一个项目, 并且执行npm install:

使用Angular CLI生成 Angular 5项目教程详解

命令执行完, 可以看到如下的项目结构;

使用Angular CLI生成 Angular 5项目教程详解

里面有node_modules目录了, 也就是所有的包都安装好了, 接下来我可以运行该项目了:

ng serve -o

其中的-o(--open)参数表示运行项目的时候打开默认浏览器.

使用Angular CLI生成 Angular 5项目教程详解

查看浏览器http://localhost:4200:

使用Angular CLI生成 Angular 5项目教程详解

ng serve的优点是, 当代码文件有变化的时候会自动重新构建并且刷新浏览器, 您可以试一下.

另外一种配置CLI的方法 ng set.

前面我介绍了使用ng new参数和修改angular-cli.json文件的方式来配置cli, 下面我介绍下通过ng set <属性> <值> 来配置cli.

就拿当前这个项目来说, 它的默认样式文件类型是scss:

使用Angular CLI生成 Angular 5项目教程详解

如果我在该项目目录执行:

ng set defaults.styleExt css

那么该项目的设置就会改变:

使用Angular CLI生成 Angular 5项目教程详解

如果使用参数 -g(--global), 那就会进行一个全局的配置, 这个配置会保存在一个文件里(如果还没有任何去安居配置的情况下这个文件并不存在), 这个文件应该在users/xxx目录下, mac的话应该在home目录下.

它不会影响到已经存在的项目. 但是如果新生成的项目不指定ng new的参数情况下, 默认就会采用全局的配置:

使用Angular CLI生成 Angular 5项目教程详解

Lint:

使用命令ng lint.

首先可以查看一下帮助:

ng lint --help

使用Angular CLI生成 Angular 5项目教程详解

--fix: 尝试修复lint出现的错误.

--format: lint的输出格式.

首先我针对上面的my-app6执行ng lint:

使用Angular CLI生成 Angular 5项目教程详解

没有问题.

然后我故意弄出来几处错误/不规范的写法:

使用Angular CLI生成 Angular 5项目教程详解

然后再执行ng lint:

使用Angular CLI生成 Angular 5项目教程详解

可以看到这些错误都被详细的列了出来.

把格式化的参数加进去:

使用Angular CLI生成 Angular 5项目教程详解

可以看到现在lint结果的显示更直观了一些.

下面执行ng lint --fix:

使用Angular CLI生成 Angular 5项目教程详解

执行后lint的错误减少到了一个, 看下代码:

使用Angular CLI生成 Angular 5项目教程详解

以上所述是小编给大家介绍的使用Angular CLI生成 Angular 5项目教程详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jquery 页面全选框实践代码
Apr 02 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
js与applet相互调用的方法
Jun 22 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 Javascript
分析javascript原型及原型链
Mar 18 #Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 #jQuery
jQuery中each方法的使用详解
Mar 18 #jQuery
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 #Javascript
js中DOM事件绑定分析
Mar 18 #Javascript
js中如何完美的解析数据
Mar 18 #Javascript
解决使用vue.js路由后失效的问题
Mar 17 #Javascript
You might like
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
js实现网页收藏功能
2015/12/17 Javascript
js实现简单的验证码
2015/12/25 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
Python中运行并行任务技巧
2015/02/26 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
python实现学生成绩测评系统
2020/06/22 Python
HashMap和Hashtable的区别
2013/05/18 面试题
我未来的职业规划范文
2014/01/11 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
保护环境建议书
2014/03/12 职场文书
yy生日主持词
2014/03/20 职场文书
法制演讲稿
2014/09/10 职场文书
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
Java 超详细讲解hashCode方法
2022/04/07 Java/Android