4.《Angular环境搭建》

一、使用AngularCLI创建项目

二、文件分析

1.e2e：自动化测试
2.src：应用源代码目录
environments：环境配置
polyfills.ts：导入必要库（兼容老版本浏览器）
3.gitignore：Git
4.angular-cli.json：Angular命令行工具配置文件
5.karma.conf.js：karma的配置文件执行自动化测试
6.package.json：npm工具的配置文件
7.protractor.conf.js：自动化测试相关
8.README.md：
9.tslint.json：用来配置typescript代码质量检查规则

三、Component

//必备元素1、2、3
1.装饰器@Component()
2.模版Template
3.控制器Controller

组件元数据装饰器
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
//
export class AppComponent {
  title = 'app';
}
/*
装饰器@里的属性就是元数据，通过装饰器将元数据附加到Typescript类AppComponent上边，
元数据会告诉Angular如何将Typescript类处理成Angular组件
*/

//可选
4.输入属性@input
5.提供器providers
6.生命周期钩子Lifecycle Hooks
7.样式表styles
8.动画Animations
9.输出属性@Outputs

组件元素.png