使用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 相关文章推荐
csdn 论坛技术区平均给分功能
Nov 07 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
ES6 Set结构的应用实例分析
Jun 26 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 Session 变量的使用方法详解与实例代码
2013/09/11 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
js解决movebox移动问题
2016/03/29 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
js友好的时间返回函数
2016/08/24 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
Python 基础之字符串string详解及实例
2017/04/01 Python
Python切片操作深入详解
2018/07/27 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
产品陈列协议书(标准版)
2014/09/17 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
小学语文复习计划
2015/01/19 职场文书
监守自盗观后感
2015/06/10 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js