三、使用angular cli初始化一个新项目

新项目搭建

ng new命令新建项目

首先到工做目录底下，而后使用ng new命令初始化一个新项目：

ng new newProject // 后面跟的是项目名称

命令执行结果以下：

这个命令会自动帮咱们生成所须要的一些基本文件，注意上图，在create完成一些命令以后，它还会自动调用npm install命令，使用npm把对应的依赖包下载下来。这个时候请使用ctrl+C，进行中断，由于咱们不须要使用使用npm自动安装，咱们会稍后本身使用cnpm安装对应的依赖包（npm速度慢，并且有被墙的风险）。

命令执行完成以后，生成的项目目录结构以下：

由图可知，这个命令会生成项目对应的目录结构，以及一些所须要的文件。
从图中咱们能够看到package.json这样一个文件，对于每个nodejs项目来讲，它都必须有一个package.json配置文件。
这个文件中定义了有项目的名称，version，license之类的信息。最重要的是，在这个文件中声明了项目所须要依赖的全部的包dependencies、devDependencies。
在咱们使用npm install命令安装依赖包时，node会自动读取package.json文件，而后获取到全部的依赖包列表并一一安装。

文件列表中还有一个.angular-cli.json文件，这个文件是angular/cli会自动去读取的。

cnpm install 命令安装依赖包

在项目新建完成以后，咱们须要安装所须要的依赖包，进入到项目目录下，使用cnpm install命令，这样node会自动去读取项目中的package.json文件，而后根据文件中配置的这些依赖包，而后一一会进行下载，如图所示：

图中能够看到几个警告，第一个说的是karma-cli@\^1.0.1这个依赖包用v8.2.1的版本不适配，须要低一些的版本。而后后面的是karma@1.7.1>ckokidar@1.7.0>fsevents@\^1.0.0这些歌依赖包须要darwin操做系统，windows的操做系统没法匹配的问题。

因此好像前面有谁说最新的node版本在angular/cli会有点问题，不知道说的是否是这个，因此这个时期，仍是先安装6.x的版本好了。

安装完了以后，咱们能够看到项目目录多出了一个node_modules目录(以下图），node默认是把全部的依赖包都安装到了这个文件夹下，因此若是依赖包安装过程当中发生了什么错误，或者我新添加了什么依赖包须要从新安装依赖包的状况下，咱们须要先把项目底下的node_modules文件夹删除，而后从新运行cnpm install命令。

ng serve 开启服务

项目新建完成，依赖包下载完成。以后就能够跑起项目了，咱们须要使用ng serve的命令开启一个轻量级的开发状态的httpserver。
咱们在作前端开发的时候，不要启动后台，只要开启一个前端就行了。

从上面图中，咱们能够看到只须要打开浏览器访问http://localhost:4200便可。

最后，在浏览器中看到上图所示的界面，就至关于咱们已经用angular/cli创建好了一个新项目。

在Chrome浏览器的调试工具中发现网络请求里面，中vendor.bundle***啥的，某个文件特别大，俺么咱们就能够重启服务，使用production模式，即便用命令ng serve --prod，这样就会减少文件大小。
可是使用这个命令，咱们会发现下面的错误：

这个错误发生的缘由实际上是因为angular/cli的最新版本有bug吧，因此咱们不要用最新的版本，将下图中angular/cli的对应版本改成1.2.6（这个版本是没有问题的）。随后须要扫除node_modules文件夹，而后从新运行cnpm install命令。

在依赖包从新安装以后，咱们再设置ng serve --prod，就会有效减少请求中文件的大小：

至此，使用@angular/cli初始化一个新项目已经完成。

工具搭建的新项目剖析

新搭建的项目中，有自动生成的应用根页面模板，应用根组件，应用根模块：

css修改使用scss

将全部的css后缀文件，修改成scss，而后其他各个文件中对原来css的引用也都改为scss。这样项目就会使用scss进行编译。

添加依赖包

咱们须要使用其余依赖包的，就直接到package.json中添加对应的依赖包，而后经过cnpm install安装便可。比我，咱们要引用bootstrap还有font-awesome依赖包的时候，就须要在package.json配置文件的dependencies节点下添加上对应的依赖信息："bootstrap": "^3.3.7","font-awesome": "^4.7.0"
随后在styles.scss文件中，使用import语句，@import "~bootstrap/dist/css/bootstrap.min.css";@import "~font-awesome/css/font-awesome.min.css";就能将bootstrap和font-swesome中的css样式导入过来了。路劲中的~表示，路径查找时，不要查询项目路径，直接到node_modules目录下面去找。由于bootstrap是咱们使用cnpm install的依赖包，因此固然在node_modules文件夹下。

新建组件Component

在终端中使用组件建立命令

> ng generate c UserList   // c表示component，命令中的generate能够简写为g，组件名称使用驼峰命名

这样写，会自动生成目录结构，而且生成组件:
- 会自动在src目录下生成一个user-list目录，目录下有UserList组件对应的html，scss，ts文件
- user-list.component.html
- user-list.component.scss
- user-list.component.spec.ts
- user-list.component.ts
- 同时，会更新src/app/app.module.ts根模块中的信息（将这个新组件import到根模块中）。

随后使用，是在user-list.component.ts文件的@Component()声明中，找到selector节点，节点内容为selector: 'app-user-list（app这个前缀是经过修改.angular-cli.json配置文件中的"prefix": "app"项能够修改的）,而后就能够直接在项目的根html模板中使用<app-user-list></app-user-list>标签便可,这个标签到底包含哪些内容，就须要看组件自身的html文件user-list.component.html中写了哪些内容了。