使用angular-cli创建Angular2 App

我们在搭建前端项目环境的时候,需要找一个合适的项目模板,或者用bower安装一个合适的项目的generator。一般这个模板里面会使用gulp或webpack,里面会定义各种任务,来进行js、css、html的minify、合并、打包等任务,我们还需要考虑开发环境、测试环境、生产环境的不同的配置。我们往往需要进行大量的配置和修改,才能创建一个完善的项目框架,方便我们开发、测试和部署的流程。

为了解决上面这些问题,Angular2提供了一个方便的工具angular-cli,我们可以用它来创建项目模板,运行测试服务器、编译打包,也可以添加新的组件。

虽然这个工具目前还不是非常完善,运行过程中经常会有各种问题,特别是在国内,在安装依赖的时候就会出现各种各样的问题。但是,他提供了一个完整的工具包,让我们能够完成从搭建环境到开发、测试、打包部署等事情。

下面我们就来看看这个工具简单使用。

安装Angular CLI

用下面的命令安装:

1
npm install -g angular-cli

查看安装的版本:

1
2
ng version
> angular-cli: 1.0.0-beta.10

angular-cli有2个不同的分支,一个是使用webpack的版本,一个是默认的没有使用webpack的。如果想使用webpack版本,安装的时候需要用下面的命令安装:

1
npm install -g angular-cli@webpack

如果没有安装node,请自行谷歌安装方式。
然后运行下面的方法创建一个app:

1
ng new ng2-todo

这个方法会生成一个angular2的项目,创建完了以后自动运行 npm install等命令,来下载依赖的库和进行其他一些项目配置,所以执行的时间可能会很长。如果在出现Installing packages for tooling via npm以后长时间都没有完成,可以取消,再执行ng init重新尝试执行,提示覆盖文件的时候选n,还不行的话只能重新建项目再试了。想过程顺利的话,最好还是搭个梯子。

如果你之前安装过之前的angular-cli版本,然后直接用npm install -g angular-cli更新新版本的话,可能会在创建项目过程中出错,可以尝试先删除angular-cli,清除npm缓存再安装。

1
2
3
npm remove -g angular-cli
npm cache clean
npm install -g angular-cli

了解项目结构

先来看看创建的项目,有如下文件,在文件名后面用注释的方式说明了一些文件的用途。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.
├── README.md
├── angular-cli.json # 使用angular-cli创建的项目的描述文件
├── e2e # 测试文件
├── karma.conf.js # 测试相关
├── package.json # nodejs的项目描述文件,里面设置运行的脚本以及开发和运行所依赖的库
├── protractor.conf.js # 测试相关
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── index.ts
│   │   └── shared
│   │   └── index.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.dev.ts
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.json # TypeScript的配置
│   └── typings.d.ts
└── tslint.json # 对TypeScript的文件进行语法检查的规则文件

关于Angular2项目的框架和配置文件,在之前的Angular2入门教程里面已经介绍过了,可以参考。其他的一些文件的说明在上面已经以注释的方式列出。有兴趣的可以以这个为项目模板看看各个配置文件如何设置如何起作用,尝试在自己的项目中使用。

坚持原创技术分享,您的支持将鼓励我继续创作!