angular6
1. 简单介绍下项目开始，官方文档上都有详细介绍
1. 然后全局安装 angularCLI
npm install -g @angular/cli
2. 用脚手架创建项目
ng new my-app
这样就生成一个项目
3. 进入项目目录运行服务并打开
cd my-app ng serve --open
注：项目目录官方文档很详细我就不介绍了
2. 创建组件
ng generate component heroes
会在 app 文件下创建 一个 hreoes 组件并将其引入到 app.moduls.ts 根文件
hreoes 组件文件夹：文件夹目录下会有四个文件，css 样式文件，html 文件，ts 文件，剩下一个文件没有用.
// 用 ng generate component 创建组件过多时，app.mosuls.ts 会出现乱码或引入错误代码跑偏，需要自己整理！！！
@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据。
CLI 自动生成了三个元数据属性：
-
selector— 组件的选择器（CSS 元素选择器）
-
templateUrl— 组件模板文件的位置。
-
styleUrls— 组件私有 CSS 样式表文件的位置。
还有很多扩展属性：
1. encapsulation：
-
`ViewEncapsulation.Native'
根目录下 style.css
-
`ViewEncapsulation.Emulated`
亲测style样式与本组件 css 样式通用，（默认）
-
`ViewEncapsulation.None`
使用全局CSS （style.css）
2. changeDetection: 实例化组件时，Angular会创建一个更改检测器
3. viewProviders: 定义其视图DOM子项可见的可注入对象集。
4. moduleId ,
5. templateUrl 与 template ：不用多说指向 html ，templateUrl 指向 html 路径, template 直接来写 html
6. styleUrls 与 styles ：同上
7. animations ：动画，很厉害的东西，官方介绍通过类似动画的DSL在组件上定义动画。这种描述动画的DSL方法允许灵活性，既有利于开发人员，也有利于框架。动画通过侦听模板中元素上发生的状态更改来工作。当发生状态变化时，Angular可以利用并在其间设置动画。这与CSS转换的工作方式类似，但是，通过编程DSL，动画不仅限于特定于DOM的环境。（Angular也可以在幕后执行优化，使动画效果更高。）要使动画可供使用，动画状态更改将放置在动画触发器中，动画触发器位于动画注释元数据内。在触发器内，可以放置状态和转换条目。
8. interpolation：覆盖默认的封装开始和结束分隔符 (respectively {{ and }})
9. entryComponents：定义在定义此组件时应编译的组件。对于此处列出的每个组件，Angular将创建一个ComponentFactory并将其存储在ComponentFactoryResolver中。
10. preserveWhitespaces: boolean
CSS 元素选择器 app-heroes 用来在父组件的模板中匹配 HTML 元素的名称，以识别出该组件。
ngOnInit 是一个生命周期钩子，Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。
始终要 export 这个组件类，以便在其它地方（比如 AppModule）导入它。
3. 创建服务
ng generate service hero
使用 Angular CLI 创建一个名叫 hero 的服务。
@Injectable() 服务
注意，这个新的服务导入了 Angular 的 Injectable 符号，并且给这个服务类添加了 @Injectable() 装饰器。 它把这个类标记为依赖注入系统的参与者之一。HeroService 类将会提供一个可注入的服务，并且它还可以拥有自己的待注入的依赖。 目前它还没有依赖，但是很快就会有了。
@Injectable() 装饰器会接受该服务的元数据对象，就像 @Component() 对组件类的作用一样。
