Angular 5项目
如果您正在使用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

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

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

ng new my-app --skip-install

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

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

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

ng new --help

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

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

code .

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

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针对该项目的配置文件.

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

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

它的前缀就是app.

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

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

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

ng new sales-app --prefix sales

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

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

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

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

ng new my-app2 --skip-tests

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

ng new的参数一共有这些:

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

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

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

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

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

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

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

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

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

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

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

看一下项目路由文件:

再查看一下app.module:

可以看到import了AppRoutingModule.

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

比较推荐的做法是:

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

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

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

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

ng serve -o

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

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

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

另外一种配置CLI的方法 ng set.
前面我介绍了使用ng new参数和修改angular-cli.json文件的方式来配置cli, 下面我介绍下通过ng set 来配置cli.

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

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

ng set defaults.styleExt css

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

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

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

Lint:
使用命令ng lint.

首先可以查看一下帮助:

ng lint --help

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

--format: lint的输出格式.

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

没有问题.

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

然后再执行ng lint:

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

把格式化的参数加进去:

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

下面执行ng lint --fix:

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

Angular 5项目的更多相关文章

  1. 手机上访问angular移动项目

    要实现手机访问本地开发的移动端项目,首先做到两点: 1.本地打开的项目可以使用本地ip访问 2.手机和电脑同时处于一个同一个局域网中(手机和电脑同时连上同一个wifi / 手机开热点给电脑 / 电脑开 ...

  2. 用VSCode开发一个asp.net core 2.0+angular 5项目(4): Angular5全局错误处理

    第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 第二部分: http://www.cnblogs.com/cgzl/p/8481825.html 第三 ...

  3. 使用Angular CLI生成 Angular 5项目

    如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular- ...

  4. Angular 2项目的环境配置和项目搭建

    AngularJS2 发布于2016年9月份,它是基于ES6来开发的. AngularJS2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行.AngularJS2 ...

  5. Angular的项目结构

    前面我们已经在我们想要的位置顺利的创建了Angular项目,现在我们就来看一下项目的结构吧. 下面使我们项目的整体结构,包括node的模板.src资源文件以及配置文件等. 下面是根目录文件夹内的文件用 ...

  6. angular 路由项目例子

    angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...

  7. angular2.0入门---webStorm创建angular CLI项目

    创建项目之前需要先安装angular cli,(angular是用typescript编写的,所以先安装typescript,再安装angularjs-cli).打开命令窗口输入 npm instal ...

  8. @angular/cli项目构建--组件

    环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...

  9. Django+uwsgi+nginx+angular.js项目部署

    这次部署的前后端分离的项目: 前端采用angular.js,后端采用Django(restframework),他俩之间主要以json数据作为交互 Django+uwsgi的配置可以参考我之前的博客: ...

随机推荐

  1. 论如何优雅的用bitset来求四维偏序

    四维偏序.. 就是给你一个四维集合.再给你一些询问,请你求出a[i].x1<=ask.x1&&a[i].x2<=ask.x2&&a[i].x3<=as ...

  2. bzoj3920: Yuuna的礼物(莫队+分块套分块)

    思路挺简单的,但是总感觉好难写...码力还是差劲,最后写出来也挺丑的 这题显然是个莫队题,考虑怎么转移和询问... 根据莫队修改多查询少的特点,一般用修改快查询慢的分块来维护.查第$k_1$小的出现次 ...

  3. [SDOI2009]Bill的挑战——全网唯一 一篇容斥题解

    全网唯一一篇容斥题解 Description Solution 看到这个题,大部分人想的是状压dp 但是我是个蒟蒻没想到,就用容斥切掉了. 并且复杂度比一般状压低, (其实这个容斥的算法,提出来源于y ...

  4. 「Vue」JS方法学习

    1.构造函数 大写开头的,能被NEW一个新实例,实例即执行回调函数 异步返回数据.then指定回调函数的时候,成功的回调函数必须传,失败的回调可以不传 var fs = require('fs') f ...

  5. vue axios的使用

    详细可以看:https://www.kancloud.cn/yunye/axios/234845 这里介绍日常使用得比较多的get和post: import axios from 'axios' // ...

  6. Tomcat权威指南-读书摘要系列7

    配置 conf目录下的主要配置文件 server.xml Tomcat主配置文件 web.xml servlet与其他适用于整个Web应用程序设置的配置文件,必须符合servlet规范的标准格式 to ...

  7. 错误 1 无法将文件“obj\Debug\XXX.exe”复制到“bin\Debug\XXX.exe”。文件“bin\Debug\XXX.exe”正由另一进程使用,因此该进程无法访问该文件

    在重新生成Windows服务的时候出现的这个问题,原因是因为你的Windows服务已经在运行了,你可以卸载掉这个服务,也可以在资源管理器里直接关闭.

  8. win7下PLSQL Developer提示“ORA-12154: TNS:无法解析指定的连接标识符”

    解决方法:卸载掉重新安装,注意安装的目录的文件夹不要有特殊的符号,例如64位系统的的安装目录会到Program Files (x86),这时候就会出现"ORA-12154: TNS:无法解析 ...

  9. VS2010 设置main函数输入参数

    main函数的argc.argv参数. 英文版:菜单Project -> Properties -> Configuration Properties -> Debugging在Co ...

  10. 初学Python-搞了一个linux用户登录监测小工具

    这几天突发奇想,想学习一下Python.看了点基础,觉得有点枯燥,所以想搞点什么.想了想,就随便弄个检测Linux用户登录的小工具吧~ 首先,明确一下功能: 1.能够捕获 linux 用户登录的信息. ...