学习Angular
1、环境WebStrom(推荐2017版本)
由于Angular2之后由Typescript编写，新版本支持的TypeScript版本较高，推荐新版本。
2、安装nodeJS
注意：可以将npm替换为cnpm
3、安装Angular cli
cnpm install -g @angular/cli
用 ng v 检测有没有安装成功：如图
4、安装TypeScript
cnpm install -g typescript
5、创建项目
（1）在命令窗口：ng new 项目名
（2）在WebStrom中File=>New=>project=>Angular CLI
比较慢，需要耐心等待
6、会自动化的创建工程，根据package.json中的依赖（"dependencies"）自动生成node_modules文件。工程目录说明：
- e2e：端到端的测试目录（用来做自动测试的）
- node_modules：第三方依赖包存放目录
- src：应用程序源代码目录
- angular-cli.json ：Angular命令行工具的配置文件。后期可能会修改它，引入一些其他的第三方包，例如jQuery等
- karma.conf.js：karma是单元测试的执行器，karma.conf.js是karma的配置文件
- package.json：标准的npm工具的配置文件(包含该应用程序所使用的第三方依赖包)
说明：新建项目时，下载的第三方包，在此处添加依赖，下载完毕后的包存放在node_modules目录中
- protractor.conf.js：自动化测试的配置文件
- README.md：说明文件
-
tslint.json：tslin的配置文件（定义TypeScript代码质量检查的规则）
src目录 - app目录：包含应用程序的组件和模块(代码目录)
（1）app.component.css ；app组件的样式
（2）app.component.html ；app组件的展示页面
（3）app.component.spec.ts；测试文件
（4）app.component.ts；app组件的逻辑文件
（5）app.module.ts；这个文件表示模块；Angular 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象
几个重要的属性如下：
declarations （声明） - 视图类属于这个模块。 Angular 有三种类型的视图类： 组件 、 指令 和 管道 。
exports - 声明（ declaration ）的子集，可用于其它模块中的组件模板 。
imports - 本模块组件模板中需要由其它导出类的模块。
providers - 服务的创建者。本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到。
bootstrap - 应用的主视图，称为根组件，它是所有其它应用视图的宿主。只有根模块需要设置 bootstrap 属性中。
- environment目录：环境配置。Angular是支持多环境开发的（可在不同的环境下，共用一套代码）
- assets目录：资源目录，存储静态资源（如照片）
- inde.html：整个应用程序的根html（程序启动页面）
- main.js：整个项目的入口点，Angular通过此文件启动项目
- polyfills.ts：导入一些必要的库（为了兼容老版本）
- style.css：全局样式表
- tsconfig.app.json：TypeScript编译器的配置，添加第三方依赖时会修改此文件
- test.js：自动化测试
- typings.d.ts：类型，第三方文件
7、项目启动
（1）在命令窗口：ng serve ；访问：localhost:4200
（2）借助WebStrom。npm工具-->start；访问：localhost:4200
（3）还可以，如图：
8、新建组件
ng g component 组件名
创建新的组件，并且更新app.module.ts中的文件：
然后就可以在product.component.html中写页面了，但是Angular是一个单页面应用，那么怎么吧product页面显示到页面中的呢，在product.component.ts文件中已经定义了一个组件标签名app-product，然后把<app-product></app-product>写进app.component.html中；
