ng  new  

ng generate

ng serve  

ng test 

ng build

angular CLI    

Amber CLI

webpack

angular cli 学习笔记：

开发，组件，打包，测试

开发结构和运行结构

angular  cli 进行项目的构建

tips ： angular 2

Angular 2简介

    开发：效率

    运行：效果

功能简介

    快速创建Angular 2项目及组件（new generate）

    使用Angular CLI能够进行开发同步（serve）

    使用Angular CLI简单进行测试和打包（test build）

ng new my-app //创建项目

ng new my-app --skip-install //阻止npm安装

cd my-app

ng serve

cnpm install -g @angular/cli

angular2 中的组件 new generate？怎么使用

使用淘宝镜像安装Angular CLI

补充：其实不需要，只需要设置镜像源npm就可以了npm config set registry https://registry.npm.taobao.org，然后还是用npm安装。

项目构建步骤

Angular2 项目构建及运行过程

1、安装npm，git等

2、创建angular2项目    ng  new   my-app

3、在项目中添加Component 或者 Service  ng g component/service

4、编译并运行  ng  serve --port 4201

5、单元测试 ng test

6、打包发布：ng build  --prod  --aot

知识点：

1、Angular CLI 基于Amber和Webpack，是Angular2的标准构建工具

    Amber的构建能力：目录结构、模块关系等的创建

    Webpack的调试、测试、打包能力

2、Angular2项目文件作用

    --packgae.json   包含所有应用的类库

    --angular.json    配置编译过程中使用的路径，依赖关系，图标样式、环境信息等

    --e2e  测试目录

    --node-module 依赖库的位置

    --src  实际项目目录

3、Angular2项目的入口数据走向

入口文件是：main.ts

它调用了app/app.module中的AppModule

由此启动第一个组件AppComponment

4、Ng build 优化

1、预编译技术   --aot

    压缩了Angular框架代码，将需要解释--执行的代码，变为可以直接执行的代码，实现按需加载，达到优化的目的

2、生产模式

    ng build 默认是在开发模式下打包代码，有大量的Debug开关，开发调试，打印输出等不必要的代码；

    生成模式去掉冗余代码，合并公用文件，减少了请求的次数和体积，提高效率；使用哈希码标记文件，减少由CDN更新引发的引用错误；并压缩文件，从而达到优化目的。

ls -alh dist/ 查看 dist 目录里面的文件类型

du -h  dist/  查看 dist 目录的里面的文件的大小

ng build --prod  最终打包上线  【去掉一些dubug】

1. 代码打包：ng bulid

2. 压缩优化浏览器代码打包命令：ng build --aot

3. 去除各种测试优化的打包命令：ng bulid -prod

ng test 单元测试

测试文件(xxx.spec.ts)

在页面显示测试结果分析

ng generate

（1）创建组件

ng generate component test

实际上创建了组件的模版文件（html）、样式文件（css）、

测试文件（spec.ts）、ts文件，并且更新了模块文件，将组件

添加到模块中（实际上是在里面声明组件）。

（2）创建服务

ng generate service test -m app.module

注册到app.module里面

实际上创建了服务的测试文件（spec.ts）、ts文件，

并且更新了模块文件，将服务添加到模块中（实际上是

在里面声明服务）。

改变端口号：ng serve --port 4201

前者花费时间太久，改良后

普通创建项目

(1)创建my-app项目

ng new my-app 

(2)进入文件夹cd my-app

(3)启动运行ng服务

ng serve

项目的构建

1111111

改变端口号：ng serve --port 4201

Ng new 简介

参数分类：

    开发辅助（--dry-run）

    修改项目默认值（--prefix）

展示ng的所有命令：ng help

进入目录某一文件夹下查看其内容：vim 文件路径。win下没有这个命令，安装个git即可解决此问题。

操作步骤1：

    ng new my-app(项目名称)

    cd my-app

    ng serve

操作步骤2：

    ng new my-app --skip-install

    cd my-app

    cnpm install

    ng serve

此课程的编辑器是Atom。

安装步骤：cnpm install -g @angular/cli.

若是想安装某个版本的话：npm install -g @angular/cli@1.4.10

查看是否安装成功：ng version，若安装成功的话，会显示angular的版本、node的版本、操作系统的版本。

安装国内淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org

ls -alh dist/ 查看 dist 目录里面的文件类型

du -h  dist/  查看 dist 目录的里面的文件的大小

ng build --prod  最终打包上线  【去掉一些dubug】

Angular2 项目构建及运行过程

1、安装npm，git等

2、创建angular2项目    ng  new   my-app

3、在项目中添加Component 或者 Service  ng g component/service

4、编译并运行  ng  serve --port 4201

5、单元测试 ng test

6、打包发布：ng build  --prod  --aot

知识点：

1、Angular CLI 基于Amber和Webpack，是Angular2的标准构建工具

    Amber的构建能力：目录结构、模块关系等的创建

    Webpack的调试、测试、打包能力

2、Angular2项目文件作用

    --packgae.json   包含所有应用的类库

    --angular.json    配置编译过程中使用的路径，依赖关系，图标样式、环境信息等

    --e2e  测试目录

    --node-module 依赖库的位置

    --src  实际项目目录

3、Angular2项目的入口数据走向

入口文件是：main.ts

它调用了app/app.module中的AppModule

由此启动第一个组件AppComponment

4、Ng build 优化

1、预编译技术   --aot

    压缩了Angular框架代码，将需要解释--执行的代码，变为可以直接执行的代码，实现按需加载，达到优化的目的

2、生产模式

    ng build 默认是在开发模式下打包代码，有大量的Debug开关，开发调试，打印输出等不必要的代码；

    生成模式去掉冗余代码，合并公用文件，减少了请求的次数和体积，提高效率；使用哈希码标记文件，减少由CDN更新引发的引用错误；并压缩文件，从而达到优化目的。

ng build 打包指令

（1）功能合并

（2）减少处理

（3）体积减少

编译产生的文件放在dist文件下

ng2特殊优化方式：预编译aot

好处：将angular框架压缩，将项目体积减少

处理指令：

ng build --aot

生产模式打包

ng build -prod

ng test 单元测试

测试文件(xxx.spec.ts)

在页面显示测试结果分析

ng generate

（1）创建组件

ng generate component test

实际上创建了组件的模版文件（html）、样式文件（css）、

测试文件（spec.ts）、ts文件，并且更新了模块文件，将组件

添加到模块中（实际上是在里面声明组件）。

（2）创建服务

ng generate service test -m app.module

注册到app.module里面

实际上创建了服务的测试文件（spec.ts）、ts文件，

并且更新了模块文件，将服务添加到模块中（实际上是

在里面声明服务）。

ng serve

设置不同的端口号

ng serve --port 4201

Ng new简介

参数分类

（1）开发辅助（--dry-run）

（2）修改项目默认值（--perfix）

ng new 列表

通过ng help查询

--dry-run:并没有实际创建项目

--verbose:输出更多log

--skip--install：不安装依赖库（跳过安装）

--routing：创建相应的路由映射

普通创建项目

(1)创建my-app项目

ng new my-app 

(2)进入文件夹cd my-app

(3)启动运行ng服务

ng serve

快速创建项目

（1）--skip-install阻止npm安装依赖库

ng new my-app --skip-install

（2）进入文件夹cd my-app

（3）运用淘宝镜像安装依赖库

cnpm install 

（4）启动运行ng服务

ng serve

其中ng server经过两个过程，一个是编译代码，另一个是启动服务

e2e是测试目录

epec.ts是测试ts